Building a Single-Page Dynamic Website using AnimateScroll.js

Advertise here with BSA

Sliding parallax websites incorporate animation with page sections to build a very unique experience. Over the past few years I have found a large number of parallax designs wrapped into a single webpage. Notably this parallax interface may be hard-coded from scratch, but there are lots of free open source plugins to do the job quicker.

In this tutorial I want to demonstrate how we can use AnimateScroll to build a sliding single-page website layout. I’ve kept inner page content to a minimum so we can see exactly how the CSS structure works with the animations. Keep in mind this definitely isn’t a tough concept to implement. But you should have an understanding of page hierarchy and CSS positioning or it gets confusing fast. Check out my live demo example to see exactly what we are making.

Live Demo – Download Source Code

Getting Started

The first step is to download a local copy of jQuery and grab a copy of the AnimateScroll.js codes from Github. You will only need to copy over a single file animatescroll.js which should be placed alongside your jQuery script.


<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Dynamic Scrolling with AnimateScroll.js - DesignM.ag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/animatescroll.js"></script>
</head>

The inner page structure is fitted to host a single fixed navigation bar at the top of the page. I have this wrapped inside an HTML5 <nav> using an internal unordered list. Considering the page is meant to display at 100% width I haven’t used any outer wrapper.


  <nav id="topnav" class="clearfix">
    <ul>
      <li><a href="body" id="homenavlink">Home</a></li>
      <li><a href="#about" id="aboutnavlink">About</a></li>
      <li><a href="#portfolio" id="portfolionavlink">Portfolio</a></li>
      <li><a href="#contact" id="contactnavlink">Contact</a></li>
    </ul>
  </nav><!-- @end #topnav -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1581572/ -->
  <section id="pagetop" class="contentpg">
    <h2>First Section</h2>
      
  </section><!-- @end #pagetop -->
  
  <!-- BG http://nature.desktopnexus.com/wallpaper/1581411/ -->
  <section id="about" class="contentpg">
    <h2>About Someone</h2>
  </section><!-- @end #about -->
  
  <!-- BG http://architecture.desktopnexus.com/wallpaper/1582636/ -->
  <section id="portfolio" class="contentpg">
    <h2>Portfolio Work</h2>
  </section><!-- @end #portfolio -->
  
  <!-- BG http://abstract.desktopnexus.com/wallpaper/1583541/ -->
  <section id="contact" class="contentpg">
   <h2>Contact Some People</h2>
  </section><!-- @end #contact -->

Depending on how you want your content to appear it may be worthwhile to create a wrapper class. This wrapper can be placed inside each content section for centering the text, or keeping it at some fixed width value.

Each of my sections is covered with a fullscreen background image. Since there is very little content they are only maxed out to a certain height. But with natural CSS3 background images we can expect the design to scale for any monitor resolution. Let’s delve into the stylesheet and really see how this all comes together.

Page Designs

Inside my styles.css file is everything necessary for the layout to render properly along with the AnimateScroll.js plugin. First you’ll notice one small import statement to include a Google web font used for custom heading text. This is followed by a long list of CSS resets to update the default page document structure.

It gets interesting once we break into the core page design. #topnav is fixed to the top of the page at a height of 55px. The links behave as parallax sliders moving around to sections within the webpage itself. You can build this navigation anywhere in your layout – but keeping it at the top makes more sense in a fixed position.


/** page structure **/
#topnav {
  display: block;
  position: fixed;
  top: 0;
  height: 55px;
  width: 100%;
  background: #779ec0;
  border-bottom: 2px solid #628aad;
}
#topnav ul  { padding-left: 80px; }

#topnav ul li { 
  display: block;
  width: auto;
}

#topnav ul li a {
  display: block;
  float: left;
  line-height: 55px;
  margin-right: 10px;
  padding: 0 15px;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  text-decoration: none;
}
#topnav ul li a:hover {
  background: #62819d;
}

Each of the internal section elements has their own ID to designate unique background images. But they also use the class .contentpg for strict duplicated rules. Notably I’ve written some internal padding along with a maximum height of 550 pixels. Each content section may be longer or shorter depending on how much you need to write. Feel free to edit this value so that it works best on your project(s).


/** page sections **/
.contentpg {
  display: block;
  min-height: 550px;
  padding: 55px 80px;
}

#pagetop {
  background-image: url('../img/bg1.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg1.jpg',sizingMethod='scale')";
}

#about {
  background-image: url('../img/bg2.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg2.jpg',sizingMethod='scale')";
}

#portfolio {
  background-image: url('../img/bg3.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg3.jpg',sizingMethod='scale')";
}

#contact {
  background-image: url('../img/bg4.jpg');
  background-repeat: no-repeat;  
  background-size: cover; 
  /*css hack for ie*/     
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg4.jpg',sizingMethod='scale')";
}

The codes handling fitted background images are from the popular CSS-Tricks article covering perfect CSS-based fullscreen backgrounds. CSS3 is not supported in many older browsers and so this trick is great for modern websites. But if you are concerned about legacy support I would highly recommend using another jQuery plugin such as Backstretch.

Initialize AnimateScroll.js

With the page structure in place and the CSS designed nicely it is time to apply the animation. There are 3 options you can go over in the documentation but it’s all very straightforward. The easing option controls the animation style, padding gives extra space from the top of an element, and scrollSpeed adjusts how fast or slow the animation happens.


$(function(){
  $('#topnav ul li a').on('click', function(e){
    e.preventDefault();
    var scrolldiv = $(this).attr('href');
    
    $(scrolldiv).animatescroll({padding:50});
  });
});

This small block of code should be placed inside a script tag just before closing the document body. If you wish to write other scripts then it could be instead written into an external JS file. The selector is targeting any link within the top navigation section.

Once the user clicks on a link we can stop the href value from loading into the address bar with event.preventDefault(). However we do need this href value because it will designate which content section we are scrolling into. I saved this into a new variable scrolldiv which is then turned into a selector for the .animatescroll() method.

Notice the single option I am using is just related to padding. Since the top navbar is always fixed on the screen we need to relieve some extra room. This option works for all the lower content areas, but the very top home section needs additional CSS padding from the body. Now the navigation bar will never get in the way of any content on the page.

Live Demo – Download Source Code

Closing

I know this is a fairly basic demonstration but I made it this way to behave almost like a template. Anyone who is willing to build their own single-page website layout could use this tutorial as a starting point. There are also many alternative parallax plugins which you could try looking into. If you want to see how my example works feel free to download a copy of the project source code and play around to see what you can build.