![]() Starting with 0.6.22 there's experimental AMD support. The skrollr-body element might be configured within the init-options. That's why those elements need to be outside of the skrollr-body element. You can't have position:fixed or background-attachment:fixed inside elements which use CSS transforms as per CSS spec ( ). Or to put it differently: On mobile the skrollr-body element is moved using CSS transforms. static) elements, put the static ones inside the #skrollr-body element. If you need both fixed and non-fixed (i.e. In fact, the skrollr website doesn't include a #skrollr-body element. The only case where you don't need a #skrollr-body is when using position:fixed exclusively. That's the element we move in order to fake scrolling. ![]() ![]() Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. What you need in order to support mobile browsers When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms. When using skrollr on mobile you don't actually scroll. You just told me it doesn't work on mobile, but why does it? The answer is simple. skrollr on desktop uses a native scrollbar and you can scroll the way you want to (keyboard, mouse, etc.). It was an important requirement while I developed skrollr that I don't force you to scroll the way I want it. In short, that's the reason why many scrolling libraries either don't work on mobile devices or they come with their own scrollbar which is a usability nightmare on desktop. iOS in particular does this very aggressively and completely stops JavaScript. That's why mobile browsers delay the execution of JavaScript while you are scrolling. Some words on why this is an important milestone and why others failed: Mobile browsers try to save battery wherever they can. (If you're not interested in the details, just scroll down a bit to see what you need to do for mobile support.) Furthermore, mobile support has been rewritten from scratch for skrollr 0.6.0. Starting with version 0.5.0 skrollr officially supports mobile browsers including Android and iOS. If you're not a fan of data-attributes or if you're planning a big website where you want a better and more flexible structure, take a look at skrollr-stylesheets. The following sections will explain some more things in detail. Skrollr keyframes can either be absolute or relative.jQuery's ready event or even window.onload). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. skrollr-ie - IE ) and then call skrollr.init().By the way, skrollr leverages HTML5 and CSS3 -) Resources Plugins Official But I wanted to sound hip and use some buzz-words. In fact, you can use it and still have no parallax scrolling at all. It's a full-fledged scrolling animation library. Just plain CSS and HTML.Īctually, skrollr is much more than "just" parallax scrolling. ![]() Stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in about 12k minified.ĭesigner friendly. To be honest, mobile support always sucked (because mobile browsers are hard) and you shouldn't compromise UX for some fancy UI effects. Please consider this before using skrollr in production as problems with new browser versions, especially on mobile, will most definitely surface. Skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on ) and I don't have any plans for doing major changes to it.
0 Comments
Leave a Reply. |