ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How to Create and Use the Ken Burns Effect within Divi
ฝัง
- เผยแพร่เมื่อ 8 ส.ค. 2024
- The “Ken Burns Effect” is a great tool for web developers who want to engage their site visitors with visual storytelling. That’s why in today’s post I’m going to show you a way to add this effect to Divi’s full-width header module and fullwidth slider module slides.
However, its application extends to the other Divi sections and modules as well.
Once you understand the CSS behind the effect, you will have more control over the way your background images move.
What I’m showing you today will serve as a great asset in your future projects.
Read article: www.elegantthemes.com/blog/di...
Another great tutorial, which is so easy to follow. Thanks a lot.
dont see the css code. the link doesn't have the code on that page as seen in the video.
I found it here and works well, though the zoom out is not perfectly smooth.
intercom.help/elegantthemes/en/articles/2717227-how-to-create-and-use-the-ken-burns-effect-in-divi
Thank You again!! Great effects!
Very beautiful, I like it!
Hello there! Thank you very much for this! I really appreciate your work. I was wondering how I can change the speed of the zoom. I just want minimal movement.
Hi, apologies if this has been asked before (i did look but couldn't see it). Is it possible to have the effect zoom and pan and then effectively rewind so when looping the effect can be smooth and without a hard break at the end before it repeats?
Very nice. Can we adjust the speed of the zoom?
Hi, can I also add a different Ken Burns effect for every image in the slider? I would like for example one pic to just zoom out while another one should zoom in left.
hi is it possible to add a different ken burn effect for each slide of the fullwidth module slide?
Thank you so much in advance
when i'm trying this, it works but the image is far too zoomed in at start ! Why is that ? yours seem to fit perfectly.
The slider works on the pc however when I see it on tab & mobile version, there is a blank background that appears on the right! how to fix this?
Nice! How to avoid white screen left or right on mobile when we use the same effect but with pan tilt left or right?
Hi naxiand, Did you learn how to resolve this?
Thanks man!
Hola, Me interesa este efecto ''ken burns'' he buscado la explicación en Español, pero no he obtenido resultados. De todas maneras tengo la sensación que en tu vídeo explicas muy bién todos los pasos, pero no entiendo ingles . No sé cómo hacerlo para obtener un tutorial en Español .
Any chance of getting this updated with the new DIVI builder? Ty
I found it here and works well, though the zoom out is not perfectly smooth.
intercom.help/elegantthemes/en/articles/2717227-how-to-create-and-use-the-ken-burns-effect-in-divi
Hi :) Will this Ken Burns effect be updated, cause it dosen't really work anymore - I get failers in css?
Thanx for a lot of great videos :)
Hello MAK, do you know how to pause ken burns on mouse hover? I have the background image set to transition from left to right by default. How can I set it so it pauses when I hover the mouse over it?
Hi, Supbrotv. Not sure how do that so I have asked the developer. Will post a response ASAP.
can you do a similar thing for video backgrounds?
I second this question four years ago. "How to avoid white screen left or right on mobile when we use the same effect but with pan tilt left or right?"
I am getting random flickering or flashing when Ken Burns effect is on. Have you heard of this problem?
No, I haven't heard of this.
where is the css code? You said it was below the video but not finding it. Can you post somewhere?
Hit the SHOW MORE link below the description, it's there :)
HI Guys, I can't find Custom CSS. Help me plz. Can you send me that's infomations?
There is no option for parallax scrolling? Has this been removed?
Hello!!! I can`t find te CSS code. Could tou say me where i get it? Thank you very much!!!
Hey Juan! You can check the CSS codes that was used in this video here: bit.ly/2U28kEm
@@elegantthemes Am I missing something?? That post describes the Ken Burns effect On Hover, not for use with a full-width slider as in the video above. Thanks!
@@elegantthemes I donn't see the CSS code there that is used in the video. Please publish that css code so we can copy and paste it. Thank you.
@@RonaldHovens any answer to this request yet?
@@scdolan5 I agree....where is the css code. Did they just forget about users out here? Pls respond Elegent Themes
Hi Mak
The link is recirecting to a new blog post. Can you make your magic and make the old blog post from ET come back to life?
Thank you :-)
BR Rikke
Hey Rikkie! Are you referring to this article? 😊 ow.ly/gHEk30oG3S9
The Elegant Themes post has been updated (posted on March 19, 2019), so 90% of the instruction that is in this video is no longer needed, due to DIVI's new hover-effects!
Take a read and see . . . no CSS needed. #DIVIROCKS
www.elegantthemes.com/blog/divi-resources/how-to-add-ken-burns-hover-effects-to-images-modules-and-rows-in-divi