scrollify Avinash

This is the Screen Scrollify

by Zakaria Acharki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.12/jquery.scrollify.min.js"></script>
<body>
  <section id="p1" 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 >Scroll to view</a>
    </div>
  </section>
  <section id="p2" class="panel overview" data-section-name="overview" style="height: 900px;">
    <div class="inner">
      <h2>Basic Setup</h2>
      <p>Scrollify requires <a href="http://jquery.com/" target="_blank">jQuery</a> 1.6+.</p>
      

    </div>
  </section>
  <section id="p3" class="panel configuration" data-section-name="configuration" style="height: 900px;">
    <div class="inner">
      <h2>Configuration</h2>
      
    </div>
  </section>
</body>

CSS

.home {
  background: #65c2cf;
  background: hsl(184, 65%, 49%);
  text-align: center;
}

.overview {
  background: #e14456;
  background: hsl(350, 92%, 59%);
}

.configuration {
  background: #6dcb94;
  background: hsl(158, 58%, 52%);
}

.options {
  background: #ec8200;
  background: hsl(28, 100%, 52%);
}

.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() {
  var ids = "#p1, #p2, #p3";

  $.scrollify({
    section: ids,
  });

});