Smooth Background Color Change on Scroll in Elementor | Scrolling Background Effect/Animation
Vložit
- čas přidán 7. 09. 2024
- Today I'll show you how to make smooth Background Color Change on Scroll in Elementor. We'll create this cool scrolling Background Effect/Animation.
✅Get Elementor Pro:
makedreamwebsi...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsi...
✅Get code snippet for Smooth Background:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
In this tutorial, I’ll show you how you can create a smooth background animation in your WordPress website using the Elementor. So, instead of a normal background, we’ll make a smooth transition when we scroll inside our page. And it gives your page a much better and modern look.
First, we need to write 2 code snippet from our dashboard. Then, our scrolling effect will be added. But, for some sections, there can be some issues. So, we need to fix that.
For those sections, we need to create another version of them and also follow some other steps. Then, it works perfectly.
If you use image, then you can also use multiple versions of a same image and show it in different backgrounds. This effect is perfectly responsive on the tablet and mobile devices. So, you also don't have to do anything extra for that.
That's how you can create this animated background color in your Elementor website. If you enjoy this tutorial, don't forget to like and subscribe.
Absolutely amazing! Even a month ago I was asking myself how to make this effect. And here it is. Perfect!
Thanks a lot😁
This is awesome!
Is is possible to apply this only to certain sections of a page? Like if I don't want the colour to change when I reach my footer, for example, could I exclude the footer from triggering the change (with a css class maybe)?
This code is so much better than the original I was using. Thank you!
You're welcome!
Thank you so much buddy.
You’re welcome!
Great tutorial! I did have an issue with the g-transition smoothing all elements on my page, not just the background color transitions. You can fix this by tweaking the style section in Code 2 to:
body.loading {
opacity: 1;
}
body.loaded {
--bg-transition: 0.8s;
}
body {
transition: background-color var(--bg-transition) ease-in-out !important;
}
.sb-color > * {
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease-in-out !important;
}
.sb-color > *.show {
opacity: 1;
pointer-events: unset;
}
love your every tutorial, thanks for sharing with us
Thank you so much ❤️
Love this effect thank you
You’re welcome 😊
Is there a way to apply this only for the header? For example the about section on the hompage is blue background, so the header needs to turn entirely into blue and then the section below "about" has a green background, so the header will need to turn into green. Thanks!
Great, I was wondering how to achieve this, in 48h I have seen 3 sites with this effect 😊
Awesome video! Thanks!!!
I LOVE this and have it though-out my website BUT I have hit an issue. I have custom post types using CPT UI Plugin and the background does not change. It works ace in WordPress Pages and Posts but not in Custom Page Types.
Can you help!!!!!!
Beautiful!
Thank you!
So creative 🤩🙌
Thank you!
Amazing, no more having to use a buggy elementor add on.
It's so beautiful but I can't make it work. 😢
Could you maybe make the tutorial more extensive so that the text colors also go along with the color transitions?
By extensive you mean to increase the color changing transition time? Right?
Is there any way to change the color of the header font, based on the background color? :)
So weird. I copied the text exactly and followed the directions, and it's not working. Literally nothing happens.
Is there a way to make this not affect the other motion animations on page as the g-transition 0.8 makes it all v slow.
Awesome! This work with gradients background?
No, it only works for one colour background
Hi, sir actually i have seen your video on scrolling effect that is changing the background color on scroll what i want is to change the specific column color when user scrolls on screen only in mobile view can you please help me with that
Any chance you can do this using background images instead of only colors?
Can't find a tutorial on this anywhere on CZcams ((:
Yes, you can follow the same process. But, instead of colours, you can use background images...
Hello, in my case the console gives me this error when I scroll.
caught TypeError: Cannot read properties of undefined (reading 'replace')
Hi When I added it to my site, my Image Box Card Carousel doesn't work anymore can help me why that is happening?
I followed this step by step on my astra website and nothing happened. Doesn't seem to have made any difference.. Thoughts?
Some plugins may have conflicted with the code
@@MakeDreamWebsite Is there a way to check this?
That is one reason, you may deactivate all other plugins, if then it still doesn't work, so it can be figured out the problem is not because of plugins. BTW, have you use the flexbox container?
Hi! I really like the tutorial and the effect but using the javascript kinda broke my site. All of the test content disappeared. In the editor it looks fine. Any idea how to fix this?
Kind regards
I don't know if you need this info or not since it's been 2 month on your comment, but for anyone who needs it, I just experienced the same thing so I just deleted the code and installed a plugin "Advanced DB Cleaner" and my site came back to life.
Since there are many sections with images won’t this make the site big and heavy?
Great tutorial though.
Yes, that's one of the drawback of this method...
There should be a way to set the code such that the animation starts from ehen the section is at the middle of the screen, at the moment it starts with the section the bottom, how can we ofset that animation?
experimented with line 44 of the code, and bottomOfset = 600 was a sweet spot, i didn't need to duplicate any sections
Love this tutorial, value for time 👍
Glad to hear it!😍
Hi, thanks for an awesome tutorial :) However, it's not working at all for me. The entire page turned white. Is there any external JS and CSS library that needs to be linked? I'm unable to figure out what is causing this. Any ideas?
Add both CSS first!
I have the same problem. How did you solve it? @MakeDreamWebsite
@@Zzjulhow to do this?
@@Zzjul please share the steps to solve this. Thanks!
Can this be used on Shopify?
This is Elementor only...
Do you have a version of the code that works for single custom post types? I think this only works for pages, not posts. Thanks!
It also works with post if you build the post using Elementor, not Gutenberg.
@@MakeDreamWebsite Are you sure? I tried and it doesn't. I have a single post template and it doesn't work inside the post content area. It's built with elementor.
Hey, my page go so slow with this code. What can i do?
I have added this code but didn't work May be I have added colors in sections and I am not using the flex box. Is it fine?
I'm not sure about sections. It probably may cause issues...
👍👍👍👍👍👍👍👍👍
Thanks 😇😇😇😇😇😇😇
Is this method affecting the performance? because you're duplicating all the elements, including images
Yes, it's a drawback of this method, although it's too much negligible.
But, as you can see for all the sections you don't have to make a duplicate, you only need where it looks odd.
I do appreciate the nice work you do to create amazing content but lately I see you only use flexbox containers which is still in beta. I'm a web designer, and I had to stop using containers on my project because it had issues. I still stick to the current sections and columns method because it doesn't have any issues till they release a stable flexbox container. The issue is some of your recent tutorials do not work with the section/columns, you created them for flexbox containers and not section/column. Since I don't use experimental features on active websites, most times i just stop watching a video when I see the tutorial is created for a flebox container because most time they don't work
Hi Matolo, I know your pain 😢 Yes, it's now on beta version and soon it will release as default layout system. But, if I make those with section/columns, after some days those all videos will not working and become useless for all of you. And now as the flexbox is experimental, so with the container version, I have also provide you a non-container version as template (as in a single video it's not possible to show them on both version).
Now, specifically for this tutorial, with sections/columns it's not possible to achieve the effect in this way. Because you can see for some container you need to wrap this into a new container which is not possible for sections/columns.
@@MakeDreamWebsite Exactly. I think that's the right decision.
Does that work with the free version?
If you use a code snippet plugin and somehow can paste those code snippets. Then, it will work with Elementor free version too...
🙏🙏