scrollify

This is the Screen Scrollify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.12/jquery.scrollify.min.js"></script>
<body>

    <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 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">
      <h2>Basic Setup</h2>
      <p>Scrollify requires <a href="http://jquery.com/" target="_blank">jQuery</a> 1.6+.</p>
      <pre>	&lt;! doctype html&gt;
	&lt;html&gt;
		&lt;head&gt;
			&lt;script&gt;
				$(function() {
					$.scrollify({
						section : "section",
					});
				});
			&lt;/script&gt;
		&lt;/head&gt;
		&lt;body&gt;
			&lt;section&gt;&lt;/section&gt;
			&lt;section&gt;&lt;/section&gt;
		&lt;/body&gt;
	&lt;/html&gt;
				</pre>

    </div>
  </section>
  <section class="panel configuration" data-section-name="configuration" style="height: 900px;">
    <div class="inner">
      <h2>Configuration</h2>
      <pre>	$.scrollify({
		section : "section",
		sectionName : "section-name",
		easing: "easeOutExpo",
		scrollSpeed: 1100,
		offset : 0,
		scrollbars: true,
		standardScrollElements: "",
		before:function() {},
		after:function() {},
		afterResize:function() {},
		afterRender:function() {}
	});
				</pre>
    </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() {
  $.scrollify({
    section: ".panel",
    before: function(nextIndex, elements) {
//      alert('before event was sent');
			if($.scrollify.current().attr('data-section-name')=="configuration")
      {
         $.scrollify.current().addClass('config');
      }
    },
    after: function(index) {
//      alert('after is triggered here');
			if($.scrollify.current().attr('data-section-name')!="configuration")
      {
         //$.scrollify.previous().removeClass('config');
         $('section[data-section-name="configuration"]').removeClass('config');
      }
    }
  });

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

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