skrollr

by kordarei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div style="height: 800px"></div>
    <div class="animated" 
    data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" 
    data-center="background-color:rgb(0,255,0);transform:rotate(-360deg);" 
    data-top="background-color:rgb(255,0,0);transform:rotate(360deg);">
      Bla Bla Bla
    </div>
  </body>

</html>

CSS

.animated {
  height: 50px;
  width: 150px;
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

JavaScript

var s = skrollr.init({
  constants: {
    foobar: 1337
  }
});