Streaming live at 10am (PST)

Animated Gradient CSS


#1

Greetings!

Ive been trying to figure out how to replace the blue background on my front page the with this css code https://codepen.io/P1N2O/pen/pyBNzX but I cant figure it out!

Please help a noob out!


Here is my site Read-Only: https://preview.webflow.com/preview/shineonagency?preview=85b2c5051e6f068d4d691eafd33baa1d


Color animation in the background
#2

Hi, @Shine-On!! I’ve got it! Check it out here (it’s cloneable!!!) :

There’s custom code you’ll need in the header. Have fun!


#3

First of all let me thank you for helping me out bud.
I cloned it and it created a new project. I tried to compy the body but it didnt let me so i just copied the Hero Section element to my own project. Where do I put it?

Also I want to add more colors to it, how can I do that?

Thanks in advance!


#4

Hello @Shine-On

I created a very simple version of this using only Webflow animations and no custom code, you can take a look at the project here:

You can always add more gradients, change sizes, duration times, etc. Hope this helps.


#5

Hey, @Shine-On - happy to help! You can see @aaronocampo has you covered with a purely Webflow based option.

But if you want to use the codepen version, I simplified it to make it easier. Just copy this code and paste it into the custom code header of the home page where you want the effect:

<style>

.intro-banner {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
	background-position: 0% 50%
}
50% {
	background-position: 100% 50%
}
100% {
	background-position: 0% 50%
}
}

</style>

Then go remove the styles on your section by option-clicking the paint can next to the background color (note: you’ll have to remove the combo class).

There are four hex colors at the top of the code, just change them out to change the colors.


#6

@Shine-On - did a quick recreate of your hero section and made a video to show you. Might be easier!


#7

Hey, Ben! This is Mike Albright from Down In Front; I’ve tried to contact you about my website that you host several times in the past week alone by email, your website, Twitter, Facebook, and a mutual friend and you haven’t responded, and I’ve tried repeatedly to get in touch with you with nothing from you since December of 2016. Please respond to any of the messages I’ve sent you.


#8

Hey, Mike! I e-mailed your wife who messaged me through my website! Check it out!


#9

Thank you, Ben; I will do that.


#10

You made my day man thank you!


#11

Happy to help!! :slight_smile:


#12

Thank you so much man! Could you tell me where I should place this?? https://gyazo.com/7ace1e108f2881f2a9c5ed47cbec0847 (I put it in the top bar)


#13

Just 2 last questions Riley, how can I add the same effect to these 2 elements? https://gyazo.com/8f37cb65e0a30ccce79a05f21bf30e98
https://gyazo.com/109de1de6a4e2d3f20a0e8ceeba47fcf

and

How can I make this an automatic carousal slideshow (like automatic rotating of the brand logos)

Many many thanks!


#14

Hi, @Shine-On! This is how I accomplished it. It would be better if there was one class that used this code so you didn’t have to repeat it. But, this will do it and will allow you to customize gradient colors across the different instances.


#15

Im gonna give it a try! ANy idea about the carousal thing I mentioned?


#16

Yes! Must have missed that. Sorry! Give me just a bit and I’ll show you how to make it happen !


#17

Take your time my man!


#18

Ok, so the easiest way to approach this for me was just to build it and make it cloneable. Then you can copy and paste and use it, but also, you can inspect everything and see how it was setup. Go grab it here:

Hope that helps!


#19

Man I’ve never been this happy about joining this forum! Thank you so much for your help!

Is there a way to have it constantly moving?

And btw how can I remove the dots?


#20

@Shine-On - so glad you feel that way. This forum is filled with awesome and helpful people! So to answer your questions: Yes, there is. And it looks like you have it set up to do so. Infinitely loop, that is. If you want a constant horizontal scroll, that’s a doozy of an animation to set up and loop! I read a great discussion on this topic not too long ago. Granted this wasn’t horizontal scrolling, but the same concepts would apply:

To get rid of the navigation dots at the bottom, follow along with this video: