Automatic Zoom In / Zoom Out (Breathing / Ken Burns) Effect in Elementor Without Plugins - WordPress
ฝัง
- เผยแพร่เมื่อ 28 ธ.ค. 2024
- The CSS required to do this is pinned 📌 to the top comment.
Get Elementor: be.elementor.c...
Hosting I love and recommend for most clients and for those on a budget: www.hostg.xyz/...
🧙 Wizards of Webcraft - A series where I’ll be reviewing your websites - www.reialesa.c... Apply now!
Automatically zooming in and zooming out an image is a great way to make your website a little more dynamic and interesting. It can be very subtle, hardly noticeable, happening somewhere in the background, or very apparent and used to capture attention.
The best part is, you can use this breathing effect for any element, any widget, including headings, icons, buttons and even whole containers. Not only that, it's very simple and you have full control over it. You can control how much it zooms in and out, how long it takes to do so and how the effect speeds up and slows down.
Even more, you can use this to simply zoom in (or out) something and have it stay zoomed in (or out). That's called a Ken Burns effect, and it's a great way for adding visual interest to your website.
It just takes a little bit of CSS. And since the effect is created entirely with CSS, you can use it anywhere, including other WordPress page builders.
#elementor #zoominzoomout #breathingeffect
Get in touch:
www.reialesa.c...
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
The CSS required to do this 👇
.imagezoom {
animation: zoom-in-zoom-out 3.2s ease-in-out infinite;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* You can also modify this to have your element zoom in (or out) once when the page loads. Here's an example. Delete this if you'll be using the first part of the CSS (and vice versa). Don't forget to hit that thumbs up button ;) */
.imagezoom {
animation: zoom-in 7s ease;
animation-fill-mode: forwards;
}
@keyframes zoom-in {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
Thank u for this video, i'm from Brazil and this helped me so much.
Awesome, I'm happy to hear that, thank you for your kind comment! 🙌
Unfortunately, one essential element is missing: as in this version (which works great, thank you very much!), it is an upscale effect because the image is enlarged. I find this unpleasant because it interferes with my page layout (spacing, proportions). It would be a real zoom if the image dimensions themselves remained the same and the image only “breathes” within the frame. Is it possible to fix the outer dimensions in CSS?
Ein wesentliches Element fehlt leider: So wie in dieser Version (die übrigens toll funktioniert, vielen Dank!) ist es ein Upscale-Effekt, weil sich das Bild vergrößert. Das nehme ich als unangenehm wahr, weil es damit in mein Seitenlayout eingreift (Abstände, Proportionen). Ein echter Zoom wäre es, wenn die Bildmaße selbst gleichbleiben, und das Bild nur innerhalb des Rahmens "atmet". Kann man die Außenmaße in CSS fixieren?
gracious brother
How can I create this zoom effect while keeping the text still? please help me, thanks
awesome thank you !
Thank you for your support, I appreciate it! 🙏
Excellent, thanks very much for this code. For a full screen background or background overlay image , would this work if you wanted to pan left to right and then back again. Perhaps using translateX? I tried some variation but wasn't able to make it work. I had issues such as spaces would appear between the edge of the screen and the image. It seemed that the image was somehow "contained" within a boundary that did not always fit in the viewport.
Hi. No problem, thank you for your support!
It should. And you have the right approach by using translateX. It would look something like this:
.image {
animation: left-to-right 2.5s ease-in-out infinite;
}
@keyframes left-to-right {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10vw);
}
100% {
transform: translateX(0);
}
}
Is it possible that the spaces are there because of padding or margins? Or that the containers aren't set to full width? Try double checking all of these and let me know how it goes! 💪
Is it possible to get the effect only on the background of a container with the other elements inside the container reminaing static?
Yes it is! Here's how 👇
.container {
animation: animated-background 3.2s ease-in-out infinite;
}
@keyframes animated-background {
0% {
background-size: 100%;
}
50% {
background-size: 120%;
}
100% {
background-size: 100%;
}
}
All that you have to do is replace the ''container'' class with whichever class you want, replace the transition timing function, the speed and the size to your liking and you're good to go. Let me know how it goes! 💪
works great is there a way to make it zoom in once and stop, ie stay at 120% until the next time the page is loaded@@Reialesa
@@Reialesait lags a while before starting each loop is there a way to stop that? I also noticed that if you want to start the loop at larger than 100% size, it does this weird snap back to 100 before starting the each loop again. Is there a way to avoid that?
Yes! You can make the animation stop after it's finished by adding in ''animation-fill-mode: forwards;'' and removing ''infinite''. Here's an example 👇
.container {
animation: animated-background 3.2s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes animated-background {
0% {
background-size: 100%;
}
50% {
background-size: 120%;
}
100% {
background-size: 100%;
}
}
Hey @nicki_nick - is your element by any chance a different size at the end of the animation than it is at the start? Because if it is, for example, 1 at the start, 1.2 in the middle and anything other than 1 at the end, it will snap back into the original position and it won't be smooth. If you want a nice, smooth transition, make sure your start and end sizes are identical. Like so 👇
.container {
animation: zoom-in-zoom-out 2.2s ease-in-out infinite;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
When it comes to the lag, I'd guess that the reason is that your page isn't loading quickly enough, or the image/content is just too large and it's causing a delay.
Hey bud tnx a lot for tutorial,got question for u.When it zooms out,my background image isnt full size,how can i fix that?
Hi! I'm not quite sure what you mean. Would you mind sharing the link?
One thing I can think of is that the background image isn't set to ''Cover''. When the background image ''Display Size'' is set to ''Cover'', it's always going to adapt and cover the whole background. Let me know how it goes! 💪
Hey Tim, i dont have enough money so i installed a free elementor pro plugin and i have the following problem: i named the css-classes correctly and pasted ur code, but it only works for the .container not for .text...should i save money and buy the real pro version or is there any chance to fix this
Hi! If I understand correctly, you're using a pirated version of Elementor Pro? If that's the case, I would really recommend just going with the official free version, you'll be able to do a lot with it and you'll be using original, legitimate software. As for the CSS, it should work with any element. It just comes down to giving your element (widget, container...) a class and then matching that class in the CSS. This isn't Elementor exclusive, so it should work pretty much anywhere you can use CSS.
@@Reialesa okay but i think im gonna buy it. PS: ur vids are carrying my website
I think you'll find a lot of things get a bit easier once you have the Pro version. PS: That's awesome to hear, thank you! 🙌