Change background color on scroll or with time

Custom code
1

Im looking to change the background color of my page by either time or scroll. Either would be a cool effect that I would like to bring to the page.

I suck at writing code, but understand it for the most part and am fluent in grabbing code and using it in the code editor.

Im hoping someone can point me in the direction of code that I could grab or some instruction on how I can do this.

Thanks in advance.

2

This isn’t code and am not sure how complex you are want/need it to be, but a way you could potentially set this up is with a photo or shape that is as big the page to work as a ‘background’ and use an animation on the Scroll effect to have photo or shape to pop in or fade into the background color you want by changing the opacity.

1 Like
3

Thank you! and funny you would suggest this… my solve was similar. What I did was create a video that faded between the two colors and used the video frame widget pinned at full width and height and triggered by scroll.

Kind of a hacky workaround, but isnt it all like that with Readymag lol.

4

Hello at @nicholas.jacksondesi I have some HTML here that will cycle through a selection of colours. I would maybe just add this to an embedded widget rather than in the head as you won’t be able to see it when designing your project. You can set the code widget to be full width and full height in the pin element settings.

<style>
body {
	animation-name: backgroundColorChanger;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate; 
}

@keyframes backgroundColorChanger {
	0% {
		background: #000000;
	}
	25% {
		background: #999999;
	}
	50% {
		background: #aaf683;
	}
	75% {
		background: #ffd97d;
	}
	100% {
		background: #ff9b85;
	}
}
</style>
1 Like
5

Thanks so much! Ill give this a try!