scrollify

This is the Screen Scrollify

by LĂ©o Durand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.12/jquery.scrollify.min.js"></script>
<body>
  <section class="panel home" data-section-name="home" style="height: 900px;">
    <div class="inner">
      <header>
        <h1>Zxcelerator</h1>
        <p class="tagline">New Rating Tool</p>
      </header>
      <a href="#overview" class="scroll">Scroll to view</a>
    </div>
  </section>
  <section class="panel overview b" data-section-name="overview" style="height: 900px;">
    <div class="inner">
      <div id="title">ANIMATE ME!</div>


    </div>
  </section>
  <section class="panel configuration" data-section-name="configuration" style="height: 900px;">
    <div class="inner">
      <div id="title2">ANIMATE ME TOO!</div>
    </div>
  </section>
</body>

CSS

.home {
  background: #65c2cf;
}

.overview {
  background: #e14456;
}

.configuration {
  background: #6dcb94;
}

.options {
  background: #ec8200;
}

.panel {
  position: relative;
  border-bottom: 1px solid #666;
  overflow-x: hidden;
}

.tagline {
  font-size: 2.3em;
  letter-spacing: 0.02em;
  padding: 0;
}

h1 {
  display: block;
  font-size: 4em;
  -webkit-margin-before: 0.67em;
  -webkit-margin-after: 0.67em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

.scroll {
  position: relative;
  font-size: 1.3em;
  margin-top: 20px;
  display: inline-block;
  height: 100px;
}

a:link,
a:visited {
  color: #FFF;
  text-decoration: none;
}

.scroll:after {
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.scroll:after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  margin: auto;
  top: 10px;
  right: 0;
  left: 0;
  -webkit-animation: 3s arrow infinite ease;
  animation: 3s arrow infinite ease;
}

JavaScript

$(function() {
  $.scrollify({
    section: ".panel",
    before: function(nextIndex, elements) {
      if ($.scrollify.current().attr('data-section-name') == "configuration") {
        $.scrollify.current().addClass('config');
      }
    },
    after: function(index) {
      if ($.scrollify.current().attr('data-section-name') != "configuration") {
        $('section[data-section-name="configuration"]').removeClass('config');
      }
    }
  });

  $(".scroll,.scroll-btn").click(function(e) {
    e.preventDefault();

    $.scrollify.next();
  });
});