0

I saw a really cool feature on a site and I want to try to replicate it, but I am having issues figuring out how I could structure it. If you go to the link I provided, you will see that if you scroll your mouse one time it will go to the next div and the previous one will animate out and then then the new one in. I am sure I could figure out the animation, but what I can't figure out is how I would make the window recognize that a scroll means go to the next div. Usually you have to scroll quite a ways for an animation like this to take place.

view it here

Does anyone know how I could do this?

Paul
  • 3,180
  • 2
  • 20
  • 50
  • 2
    As I usually tell people that want to replicate what another site already does: look at the source code. This script is the one that drives everything: http://isadoradesign.com/js/expertise-animation.js But it relies on several other plugins. – Draco18s no longer trusts SE Jan 15 '16 at 16:59

1 Answers1

1

The site utilizes the Multiscroll plugin from here.

It's a neat look, I'd suggest using the plugin before attempting to write a fresh one!

An easy way to detect mobile views in Javascript, taken from this SO answer:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}

You can then load/not load the plugin appropriately depending on the result of this check.

Community
  • 1
  • 1
Glen Despaux Jr
  • 794
  • 3
  • 18
  • Awesome! Perfect, thanks. I had no idea what it was called. – Paul Jan 15 '16 at 17:03
  • I'm not sure if you know, but what if I want to disable it for a mobile view? Could I do that via css or would I have to do it with JS? Do you think making each side have a 100% width would override it? – Paul Jan 15 '16 at 17:06
  • 1
    I don't think CSS is sufficient as the plugin would continue to fire, causing unknown effects. I'll update my answer with a suggestion for this! – Glen Despaux Jr Jan 15 '16 at 17:28