Page Scroll EffectsIntroducing a mini-library of experimenta

Introducing a mini-library of experimental page scroll effects.

Browser support

ie
Chrome
Firefox
Safari
Opera

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:

Velocity.js by Julian Shapiro
images from Unsplash.

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 . 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"></body>

Creating the structure

The HTML structure is just a list of

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.

class="cd-section visible">

Page Scroll Effects

class="cd-section">

Section 2

class="cd-section">

class

"cd-vertical-nav"

href="#0"class="cd-prev inactive">Next

href="#0"class="cd-next">Prev

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

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]
        ]
    });

June 10, 2015

Resource released by CodyHouse