nckprsn / scrollme

A jQuery plugin for adding simple scrolling effects to web pages.
1.47k stars 318 forks source link

Conditionally load scrollme #32

Open sheriffderek opened 8 years ago

sheriffderek commented 8 years ago

We're working on a project where we only want to load scrollme for your 'desktop' type size screens and not for small-screen/phones. Because the plugin seems to be init be default in the way that you configure in html / what would be the best way to do this, or to check a few different things to conditionally load?

Thanks.

joeyfromspace commented 8 years ago

The easiest way to implement this I can think of is to use a different class than scrollme and/or animateme, like scrollme-desktop or animateme-desktop, then for desktop users switch the classes and call scrollme.init() on page load.

A library like isMobile would work well here. Here's a rough example using jquery:

$(document).ready(function() {
  var $scrollThese = $('.scrollme-desktop');
  var $animateThese = $('.animateme-desktop');

  // If user is on mobile, exit the function
  if (isMobile.any) {
    return;
  }

  // Initialize scrollme if desktop client detected
  $scrollThese.removeClass('scrollme-desktop').addClass('scrollme'); 
  $animateThese.removeClass('animate-desktop').addClass('animateme');
  scrollme.init();
});
sheriffderek commented 8 years ago

@joeyfromspace Thanks for that. I hadn't thought of it that way.

It would be cool to terminate or destroy too ---