Page Scroll Effects

Page Scroll Effects

Introducing a mini-library of experimental page scroll effects.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the MIT license. You can support our project with a Paypal donation 🙌

We put together some fancy effects that take place while the user is surfing through the sections of a web page. Some of the effects are quite extreme, but they can prove very useful if your goal is to create an immersive user experience.

All animations have been created using Velocity.js.

Please note that these effects are not visible on small devices, where the user can simply scroll through the list of sections. We tested the effects on mobile and performance was poor, therefore we decided to limit them to bigger and more powerful devices.

Credits:

How it works

To apply an animation or to enable/disable scroll hijacking, simply use the data-animation and data-hijacking data types applied to the <body>. Values supported by data-animation are none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax. While data-hijacking can be either on or off.

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="none">

Creating the structure

The HTML structure is just a list of <section> elements, plus a navigation. We put just a title inside each section. With the Fixed or Parallax animation selected, we also set a background image. Feel free to add your own content inside each section > div element.

<section class="cd-section visible">
   <div>
      <h2>Page Scroll Effects</h2>
   </div>
</section>

<section class="cd-section">
   <div>
      <h2>Section 2</h2>
   </div>
</section>

<section class="cd-section">
   <!-- ... -->
</section>

<nav>
   <ul class="cd-vertical-nav">
      <li><a href="#0" class="cd-prev inactive">Next</a></li>
      <li><a href="#0" class="cd-next">Prev</a></li>
   </ul>
</nav> <!-- .cd-vertical-nav -->

Adding style

All transformations have been created in jQuery using Velocity.js, therefore there isn't much to explain about CSS. We simply set a height equal to 100vh for each <section> so that they cover the viewport entirely, plus we set background colors and images using :nth-of-type() selectors and data types.

.cd-section {
  height: 100vh;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

Events handling

We have been using two different approaches according to whether data-hijacking is off or on.

When data-hijacking = off, each section is animated according to its position relative to the viewport. E.g., for the scaleDown animation, we change the opacity, scale, translateY and boxShadowBlur values of the section > div elements:

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
    windowHeight = $(window).height();

if( offset >= -windowHeight && offset <= 0 ) {
   // section entering the viewport
   translateY = (-offset)*100/windowHeight;
   scale = 1;
   opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
   //section leaving the viewport 
   scale = (1 - ( offset * 0.3/windowHeight));
   opacity = ( 1 - ( offset/windowHeight) );
   translateY = 0;
   boxShadowBlur = 40*(offset/windowHeight);
}

When data-hijacking = on, we define custom effects for each animation using Velocity UI Pack registration feature. For example, for the scale-down effect (scaleDown animation), we used:

$.Velocity
   .RegisterEffect("scaleDown", {
      defaultDuration: 800,
      calls: [ 
         [{ opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
      ]
});

Join our newsletter

Get our monthly recap with the latest CodyHouse news

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.