2

I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/

I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?

Thanks!

Rodrigo Parra
  • 243
  • 1
  • 3
  • 16

1 Answers1

2

In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.

This is what worked for me:

I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.

Benefits of using fullpage.js (among other things):

  • integration is quick and simple
  • allows a lot of customisation through options hash
  • provides callbacks when scroll to another section is triggered (before or after it happens)
  • enables you to manually trigger a scroll via 'methods'
  • works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that wasn't a requirement for my project.

Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.

For more advanced things:

If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.

It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.

FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.

EDIT: It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)

Let me know if you have any doubts or something is not clear in my answer.

Good luck!

Community
  • 1
  • 1
Michał Rakowski
  • 81
  • 1
  • 5
  • 1
    Just to clarify, Skrollr could work on fullPage.js when using the option `scrollBar:true` as [in this example](http://alvarotrigo.com/fullPage/examples/scrollBar.html). It is also explained in [fullPage.js FAQs](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frecuently-Answered-Questions). – Alvaro Dec 08 '14 at 18:18
  • @Alvaro Thanks for clarifying that, I somehow managed to miss it... I've edited my original answer with this info. And thanks for your library, it saved me a lot of work! – Michał Rakowski Dec 08 '14 at 18:50