Streaming live at 10am (PST)

How can I implement this into my header?


#1

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.


Implementing custom CSS into Webflow site
#2

No way by webflow UI (This is a very specific effect). But this is “regular” CSS.
You see the result only under publish site.

  1. Add to your hero this class aurora (or any other name)
  2. Go to custom code (entire site -or- Individual Page).
  3. Head Code. Your codepen is with stylus i copy-paste the CSS code her (The result):
    .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;
      }
    }

About colors

“play” with the codepen and thats it. The color breath (So no way to set X specific colors). This filter with animation:


#3

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?


#4

No, Try this:


#5

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!


#6

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.