Good day.
I have yet another question about how I can implement a stunning effect into the header of my website. I found the following on CodePen:
And I was wondering how I can implement this to be the background of my Hero Section, which is 100vh in height and 100% in width. I’d only like to implement the colors, and not the text.
Furthermore, I’d also like to know how I can choose which colors it cycles through, and what the background color is.
Any help is appreciated.
No way by webflow UI (This is a very specific effect). But this is “regular” CSS.
You see the result only under publish site.
aurora (or any other name) .aurora {
background: blue; /*change this color */
position: relative;
height: 100vh;
}
.aurora:before,
.aurora:after {
content: '';
display: block;
border-radius: 100%;
opacity: 0.18;
}
.aurora:before {
box-shadow: 0 0 35vmax 35vmax #f00;
animation: hue 5s 0s linear infinite, move1 10s 0s linear infinite;
}
.aurora:after {
box-shadow: 0 0 35vmax 35vmax #0ff;
animation: hue 10s 0s linear infinite, move2 20s 0s linear infinite;
}
@-moz-keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-webkit-keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-o-keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@keyframes hue {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-moz-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-webkit-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-o-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-moz-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@-webkit-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@-o-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
“play” with the codepen and thats it. The color breath (So no way to set X specific colors). This filter with animation:
Thanks for your reply @Siton_Systems!
I’m quite familiar with HTML and CSS, just needed some guiding on how I could get this working on Webflow. That being said, is there no way I can switch the code from hue-rotate to specific colors?
No, Try this:
I have seen that, but unfortunately it just doesn’t turn out as good as the Aurora BG CodePen. I’ll try it out as is for now, and may continue playing around with the code.
Thanks again!
Hey mate!
So I messed around a bit with the Pen and was able to get an effect that I’m very pleased with, whereas it only cycles through two colors. However, on trying to implement it into Webflow it didn’t work.
Here’s the edited code on CodePen (you can try putting it into the Pen so you can see the effect yourself):
// *** Magic starts HERE
diameter = 35vmax
.aurora
background #1b1b1b
position relative
&:before,
&:after
content ''
display block
position absolute
width 1px
height 1px
border-radius 100%
opacity .30
// transform rotate(55deg)
&:before
box-shadow 0 0 diameter diameter #e82c72
animation:
hue 10s 0s linear infinite,
move1 20s 0s linear infinite
&:after
box-shadow 0 0 diameter diameter #31c5f4
animation:
hue 10s 0s linear infinite,
move2 20s 0s linear infinite
@keyframes move1
0%
top 0vh
left 50vw
25%
left 0vw
50%
top 100vh
75%
left 100vw
100%
top 0vh
left 50vw
@keyframes move2
0%
top 50vh
left 100vw
25%
top 100vh
50%
left 0vw
75%
top 0vh
100%
top 50vh
left 100vw
The code I added into Webflow:
.aurora {
background: #1b1b1b
position: relative;
height: 100vh;
}
.aurora:before,
.aurora:after {
content: '';
display: block;
border-radius: 100%;
opacity: 0.30;
}
.aurora:before {
box-shadow: 0 0 35vmax 35vmax #e82c72;
animation: hue 10s 0s linear infinite, move1 20s 0s linear infinite;
}
.aurora:after {
box-shadow: 0 0 35vmax 35vmax #31c5f4;
animation: hue 10s 0s linear infinite, move2 20s 0s linear infinite;
}
@-moz-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-webkit-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-o-keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@keyframes move1 {
0% {
top: 0vh;
left: 50vw;
}
25% {
left: 0vw;
}
50% {
top: 100vh;
}
75% {
left: 100vw;
}
100% {
top: 0vh;
left: 50vw;
}
}
@-moz-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@-webkit-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@-o-keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
@keyframes move2 {
0% {
top: 50vh;
left: 100vw;
}
25% {
top: 100vh;
}
50% {
left: 0vw;
}
75% {
top: 0vh;
}
100% {
top: 50vh;
left: 100vw;
}
}
Furthermore, when I used the code you provided the colors were cycling from top to bottom, not side to side.
Here’s my public share link:
https://preview.webflow.com/preview/netweave?preview=506a784a645f8bedd101261afb0f2b6b
It’s on the “Home Copy” page. Here’s the published site right now, using your code:
http://netweave.webflow.io/home-copy
Any help is appreciated.