page scrolling effects
June 10, 2015 | 79 Feedbacks

Page Scroll Effects

Introducing a mini-library of experimental page scroll effects. 
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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.

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.

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.

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:

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:

Changelog

June 26, 2015
  • Fixed bug on key event
June 19, 2015
  • Bug fixed - on resize, bind events only if they were previously unbound
June 10, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Juan Castellanos

    Genial

    • Marco Novara

      Hi All, I will start to build y website from scratch or with some nice wordpress theme soon, as UI designer i am not expert much in coding, but usually of i spend some time i get to do what i want…

      It probably seems strange to all of you but i am trying to add my own contents (images) to the pages and I can’t find the way… any suggestions please?!?

  • Thiago Coelho

    Nice.

  • Shane Hurt

    I just had a quick play & was wondering if this can work when the height of each section is dynamic based on its content?

  • http://www.mirchu.net/ Mirchu
  • russelgal
  • cnotv

    Missing page or wrong link:
    http://codyhouse.co/demo/page-scroll-effects/scaleDown-hijacking.html

    Amazing work as usual and clear tutorial!
    Is nice to see Velocity in action.

    PS: Too bad is not working on mobile, for picky clients =

  • Ahmed El-Badawi

    Great, But How Can I Use More Buttons In Nav??

    Thanks,

  • Matteo Pieroni

    Great work! When using hijacking they look good! Without Hijacking though this seems to be breaking the experience a lot, you never get the exact point at wich the animation finishes, therefore never having the best display of informations.

    • Matthew Beasley

      Yup without hijacking its not smooth at all.

  • Eduardo Rodrigues

    Very nice

  • ScottieJC

    Some great looking effects! Just wondered what the browser support is like?

  • ScottieJC

    Just wondered if anyone had an idea to an issue that I am having with this slider where the cd-verticle-nav isn’t showing. If I use the web inspector the styles for that element don’t even display. It is as if they are not found.

    I have noticed in the inspector that I have this error showing, but I am not sure if it is related:

    Uncaught TypeError: Cannot read property ‘offsetWidth’ of nullXj @ main.js:48Sk @ main.js:54initialize @ (index):31

    Thanks for any help that someone can offer :)

  • Dharmesh Dev

    what’s the benefit of hijacking, when i turn it on the animation for parallax is very smooth in chrome similar to firefox but when turned off it’s not that smooth, why is it so ???

  • Alex

    with parallax and hijacking off I get a strange bug when resizing the browser window. Another slide shows up and sometimes I get an ‘Strobo light’ like effect wit the tabs switching around on its own (Safari)

    • ScottieJC

      I am experiencing the something between Safari and Chrome Alex. I can’t seem to find what is causing the issue. One thing I have noticed on the demo is that it only seems to be when Hijacking is turned off. Have you had any issues with the navigation not showing up?

      • http://codyhouse.co Claudia Romano

        Hi guys, thanks for the heads-up! Fixed now ;)

  • Sriram Sadineni

    is it possible to keep auto heights for sections,i am designing a website using bootstrap ,i need slider in one section and rest in other section

  • Antonio Amaranth Gison

    It doesn’t work correctly.
    I means, it’s possible add just h2, if I wont add or it will show just the first row of default section

  • Sweetty Sadaria

    Hello Claudia
    Great work!
    but need help to fix issue in Firefox on key event.

    • http://codyhouse.co Claudia Romano

      Thanks for the heads-up! fixed it now ;)

      • Sweetty Sadaria

        Hello Claudia
        Thanks for fixing…
        but I think F5 and other keys not working..
        can you please help me?

        • Septimus

          Hi ! Thanks Claudia, it’s an amazing plugin =)

          Quick fix here to allow keys like F5 to work, without generating multiple sliding bugs:
          – go in main.js, find the binEvents function
          – replace the keydown event by the one on the screenshot below

          You may want to keep the “event.preventDefault();” for safety, but you’ll need to add some exceptions for each key you want to enable. ( ex: “if(event.keyCode!=’116′){event.preventDefault();}” for F5 )

          I hope this will help you ;)

          • http://codyhouse.co Claudia Romano

            Thanks @disqus_pMrSz8GU5V:disqus!

  • http://osprymedia.com Justin Doyle

    How can I implement this on a WordPress home page?

    • Tofanelli

      you can use a plugin where you could add a custom code, or use a wordpress bootstrap based theme… so to implement this on it is easy piece =)

  • Tanto Jasa Desain Web

    Great CSS efect

  • Luis Capelo

    I noticed that on the very first 6 lines of the CSS a block will render “desktop” on the DOM. Here is the block I am referring to:

    @media only screen and (min-width: 1050px) {
    body::before {
    /*never visible – this is used in jQuery to check the current MQ */
    content: ‘desktop';
    }
    }

    I added display: none; to that block to fix that issue. I hope it’s useful.

  • Lansana Camara

    Pretty sure there’s a problem with your Facebook share button.

    • http://codyhouse.co Claudia Romano

      Thanks for the heads-up, should be fixed now!

  • Ryan Brant

    I would like to add this effect to a section of my site and not the entire site, as seen here: hugeinc.com. How would I modify the script to achieve this effect?

    • http://codyhouse.co Claudia Romano

      Hi Ryan, the .cd-section class is used to target the sections that have to be animated. You can try not to assign this class to the remaining sections. Hope this helps.

      • Ryan Brant

        Thanks for the reply. I tried this, however when the body is set to hijack scrolling the content below these elements disappears.

        • http://inkm.pl Paweł Bystrzan

          Most simply way to do hugeinc style main section and jacking slider is to detect last top offset and remove the hijacking data atribute && i oposite way detect when slider is again in our offset position.
          Second way to do this is just make overflow in last section – that’s the fix from fullpage.js
          Third way – http://projects.lukehaas.me/scrollify/

  • Matthias

    Nice One! Just one question, is it possible to use this in a simple way with animate.css?

  • Hamid Afarinesh Far

    Hello Claudia, great work!
    Thanks for sharing.

    How can I implement this work with full vertical navigation?

    You have an example of vertical navigation( http://codyhouse.co/demo/vertical-fixed-navigation/ ), but i don’t know how to mix them.

    • http://www.performatric.com.br André

      me too

  • Swapnil Kumar

    Hey Claudia, I am trying to use the above mentioned code in my wordpress site but the code is not working properly. I am simply adding the code in the custom css . If you could help me in this matter, it would be a great help.

  • Ali Sheikhpour

    Thank you. How can I simulate going to a specific section by clicking on anchor link?

    • http://www.performatric.com.br André

      +1

    • Daniel

      Hi Claudia. Many thanks for your work, its a great layout mini-library :)

      My Fix for scroll to sections with mause wheel + nav with anchor links:

      1. Add “Scrollify” plugin — http://projects.lukehaas.me/scrollify/#home — to your project
      2. HTML:
      3. CSS: body {overflow:hidden;} or SCRIPT: scrollbars: false, on $.scrollify configuration

  • Pavel Kupka

    Hello Claudia, great work!

    Thank you for sharing this, but I have question. Is it possible change it to horizontal (mouse wheel like now) scroll with same effects and anchors?

  • Umanga Shrestha

    Hello Claudia, great library.
    I am having a trouble. My navigation on the top is being pushed back. I have a menu in the top and after that a div which contains slider.
    The slider covers the whole section and blocks my navigation menu.

  • youjoomlav5

    Seems like Safari and Opera do not play along anymore

    http://prntscr.com/85apwt

    http://prntscr.com/85aq20

    • http://codyhouse.co Claudia Romano

      @youjoomlav5:disqus @ruslan_georgiev:disqus just tested it in Safari (Mac – 8.0.8) and it’s working fine. Which effect are you having problem with? and which version of Safari? Thanks

      • Adrian

        Hi Claudia! In Safar 7.0.6 doesn’t work fixed effect. Only first section is visible. Any ideas?

  • Ruslan Georgiev

    I have the same problem in Safari. Any suggestions please?

  • http://www.aw-advertising.be Wouter Vandamme

    Hello, is it possible to add text ontop of the full screen pictures along with the title
    I’m trying to setup a website where every section is a page with some additional text on it.

    • http://codyhouse.co Claudia Romano

      Hi, you maa try inserting your text inside the wrapped in the .cd-section element (you can assign a height:100vh to the and remove the line-height from the element). Hope this helps!

  • quatreplusquatre

    Great, good job Claudia. By cons in navigation, if I add the button to shortcut to the first image and the last. As I do?

    Because I have tried many thing but I fail to point the first or the last. it just changes from image to image.

    Thank you to put me on the track.

  • Felipe Santos

    Hello, first of all, thanks for the code!
    I have a question.

    Is is possible to disable the hijacking after the last section so I have have normal scrolling content and re-enable the hijacking once I scroll back into the hijack section?

  • Lachlan Harris

    Hello, Thanks for this great effect.
    Is it possible to add a home button in between the navigation arrows and have it link back to the first page?
    i have tried a number of things but cannot get it to scroll back to the top.
    Thank you to anyone that can help

  • moneer

    Hello Claudia, great work!

    Thank you for sharing this, but I have question. can i use parallax effect on sections with different heights if so what should i edit

  • Usama Alshihabi

    it’s amazing claudia. can i apply transition in navbar. for example, if the user clicks over “Contact us” in navbar, this should scroll to the last section.
    i hope that i make my idea clear enough. thanx.

  • https://englishextra.github.io/ englishextra

    Hi can this be rewritten since Velocity oesnt need jquery

  • William van Dijk

    Hi Claudia,

    I want the action, scroll div to top and then make te next div start small and then zoom in to viewport.

    Is this possible? Actually it’s the https://codyhouse.co/demo/page-scroll-effects/scaledown.html reversed…

    Hope you could help me?

  • Nguyên Đào

    Can we go a specific section with an anchor link? I’m going to add a pagination for this.

  • Brian Edelman

    The demo (nor my local version) appears to be working on firefox for the fixed version. Safari is also a bit buggy but it works. Suggestions?

  • Marco Novara

    Thanks for the code Claudia, great work!!! I have a question i am not expert much in coding, but usually if i spend some time i get to do what i want…

    i am trying to add my own contents (images) to the pages and I can’t find the way… h-ref won’t work, and background image url seems to don’ recognise the directory…. any suggestions please?!? sorry for the basic question…. :P thanks

    • Angel Morales

      Hi! I think I could help you if you let me see that part of your code.

      • Marco Novara

        Hi Angel, thanks no worry i have solve the problem. It is a great code but not responsive….

  • Guilhem Combescure

    Hey,

    Neat job!

    I’m trying to link a button on an other page to a specific section in this scroll effect page.
    Like going directly into section 3 from a other html page.

    Do you think someone can help me?

    Thank you,
    Guilhem

    • Emile

      Did you ever figure this one out?

      • Guilhem Combescure

        not yet but when i find i will post it here

        • http://emilebrand.com Emile

          Thank you! Ill also work on it and see if i get it, thx

  • Merab Gvantseladze

    What does it means [data-animation=”parallax”]

  • http://cauealmeida.com Cauê Almeida

    Great job, thanks

  • Francine Jones

    I just want to know how the on scroll works + adding in the animation. At the moment I have a single application website and the event listener is on click to change the background image. But i want the image to have the fixed effect shown on the demo. The downloaded version is too confusing can someone point me in the right direction?

  • Stella Papantou

    Thank you for sharing this nice work! I’m working on animation with opacity and I wonder if the “visible” section could stay a bit longer active while scrolling, before next section comes up? Thanks in advance!

  • Abu Musa

    Great Job. I’m curious how we can show a header/nav, a footer and few other content below those sections. Any idea?

    Thanks
    Musa

  • Will Mo

    any idea how to insert a grid inside in for one of the cd-section:nth-of-types?

    im interested in having one of the pages a grid of tiles displaying different links.

    Does anyone know of a suitable framework grid system i could insert this into ? Should i use CSS3? If so, where would i insert this effecitvely? ive been experimenting and it keeps bugging out…

    So then i just get really frustrated. Because i live in Rome, i ususally go and eat loads of Pasta to make me feel better

  • sandeep sharma

    Great Job Dear

  • YURE

    Can I create an anchor link for href btn? Because when I putting an anchor on section it doesn’t works…

  • Роман

    Good afternoon the developer of this plugin.
    I have a problem. On Mac Book, when scrole site, flips through several pages.
    Please help to solve this problem !!!!
    Very necessary!!!