4

What I am trying to achieve is that when the user scrolls the page using the mouse-wheel (as there is no scrollbar), the page slides down with an animation to the next section of the page and while the animation is being played, mouse-wheel won’t work (to tidy things up, which is a good act).

The behavior I want can be seen in http://google.com/inbox or http://www.luxaqua-design.com/.

The thing I liked in Google’s inbox website is that it has the same effects with touch screen devices and their scrolling mechanisms.

I only need some pointers about the events that happen in this kind of scrolling and how I can manage them (specially, I am looking to achieve the same functionality with touch devices).

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
roostaamir
  • 1,928
  • 5
  • 24
  • 51
  • Its called the parallax effect .. Google it or search youtube for tutorials ! – Alexander Dec 13 '14 at 09:48
  • 2
    http://alvarotrigo.com/fullPage/ – tinker Dec 13 '14 at 09:49
  • It is not actually parallax effects I am looking for, but rather what @sking showed me is the thing I want to do.And Actually I don't want a plugin that does this,I want to know get into the code of what is happening with the scroll events and triggers.and how to bind scrolling on and off with the animations – roostaamir Dec 13 '14 at 10:17
  • 1
    @user2078785 well.. then you can go throught the code at github here https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js – tinker Dec 13 '14 at 10:20
  • here is a simple one http://stackoverflow.com/questions/13281244/capturing-scroll-wheel-events – tinker Dec 13 '14 at 10:21

2 Answers2

3

That is a parallax website, and actually there are many ways to accomplish that. But I would like to suggest to you the FullPage.JS by Alvaro Trigo, you can also try Skrollr by Prinzhorn . Those are libraries that you can use to easily finish your goal.

By the way, you can also manually do that by creating a CSS that will make the images fit in every slide, then add JS so whenever you scroll it will go to another slide, but I tell you it is better to use libraries. :D

Cary Bondoc
  • 2,923
  • 4
  • 37
  • 60
  • 1
    how should I actually target the scroll events to achieve this? I mean how do I stop the scrolling from happening when the animation is running? – roostaamir Dec 13 '14 at 13:51
  • 1
    @user2078785 you can use the fullPage.js methods for it such as `setAllowScrolling` detailed [in the docs](https://github.com/alvarotrigo/fullPage.js#setautoscrollingboolean). – Alvaro Dec 14 '14 at 16:35
0

It is called Parallax scroll effect .. Here is a tutorial on how to make it!

https://www.youtube.com/watch?v=D75WTf_Y738

Alexander
  • 171
  • 2
  • 10