Uses for Infinite Rainbow Gradients

index.pug

.scroll
#fullpage
  .section.section1
    h2.title Some Uses For
    h1.title2 Rainbow Gradient Animations
  .section.section2
    nav.navbar Navigation Bars
      img.hamburger(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/551157/hamgurger.svg")
  .section.section3
    h1.clip Text Clips
  .section.section4
    .button 
      span Hover Animations
  .section.section5
    h2.conclude1 Now go forth and make the web
    h1.conclude2.clip Fabulous
  

script.js

$(document).ready(function(){
  $('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
      if(index == 4 && direction == "down"){
        $('.scroll').animate({
          'opacity': '0'
        }, 100);
      }
      else{
        $('.scroll').animate({
          'opacity': '0'
          }, 100).delay(500).animate({
          'opacity': '1'
        })
      }
      
    }
  });
  $('.scroll').on('click', function(){
    $.fn.fullpage.moveSectionDown();
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/551157/jquery.fullPage.js"></script>

style.scss

@mixin rainbow(){
  background: repeating-linear-gradient(-45deg,red 0%, yellow 7.14%, rgb(0,255,0) 14.28%, rgb(0,255,255) 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
	background-size:600vw 600vw;
	-webkit-animation:'slide' 10s infinite linear forwards;
}
@keyframes slide{
  0%{
    background-position-x: 0%;
  }
  100%{
    background-position-x: 600vw;
  }
}

body{
  font-family: 'filson-soft';
  margin: 0;
  overflow:hidden;
  
    color: white;
  h2, h1{
    margin: 0;
    position:relative;
    top: 50%;
    text-align: center;
    width: 100vw;
    transform:translateY(-50%);
  }
}
.section1{
  @include rainbow;
}
.title{
  top: 30%;
  margin-bottom: 10vh;
  font-size: 5vw;
}
.title2{
  top: 30%;
  font-size: 8vw;
  line-height: 8vw;
}
.navbar{
  position:relative;
  top: calc(50% - 50px);
  @include rainbow;
  height: 100px;
  line-height: 100px;
  padding-left: 50px;
  font-size: calc(12px + 3vw);
  img{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 25px;
    top: 25px;
  }
}
.clip{
  font-size: 15vw;
  @include rainbow;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.button{
  border-radius: 10px;
  width: 40vw;
  height: 15vw;
  font-size: 3vw;
  vertical-align: center;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: red;
  display:table;
  &:hover{
    @include rainbow;
    animation-duration: 3.5s;
  }
  span{
    font-weight: 500;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
}
[class^="conclude"]{
  top: 35%;
  color: black;
  margin-bottom: 10vh;
}
.conclude1{
  font-size: 3vw;
}
.scroll{
  cursor: pointer;
  width: 6vw;
  height: 6vw;
  position:absolute;
  bottom: 0;
  z-index: 100;
  background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/551157/menu-drop.svg");
  left: 50%;
  transform:translate(-50%,-50%);
}

uses-for-infinite-rainbow-gradients.markdown

Uses for Infinite Rainbow Gradients

A Pen by Bernard McDevitt on CodePen.

License.