CODEWITHSUNDEEP
javascripthtmlcssscroll
roostaamir
roostaamir

Reputation: 1968

How to recreate page scroll behavior in Google’s inbox page?

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).

Upvotes: 4

Views: 1025

Answers (2)

Cary Bondoc
Cary Bondoc

Reputation: 2986

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

Upvotes: 3

Alexander
Alexander

Reputation: 171

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

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

Upvotes: 0

Related Questions