Skrollr Parallax Scrolling Javascript Library (Mobil-Web)

Stand-alone parallax scrolling library for mobile (Android, iOS, etc.) and desktop in about 12k minified. No jQuery. Just plain JavaScript (and some love) :)

Designer friendly. No JavaScript skills needed. Just plain CSS and HTML.

Actually, skrollr is much more than "just" parallax scrolling. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3 ;-)

Source : GitHub Page

Plugins

skrollr-menu - Hash navigation
skrollr-ie - IE < 9 CSS fixes
skrollr-stylesheets - Keyframes inside CSS files
skrollr-colors - Mix and match hex, rgb and hsl colors.
skrollr-decks - Fullpage presentation decks.

Abstract

skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.

Other libraries require you to write JavaScript in order to define your animations. This introduces two main problems:

• Animation and element are not at one place. In order to find out if any animations are defined for a given element, you have to scroll through many (sometimes thousands) of lines of JavaScript.
• You have to learn a new syntax which is often very verbose and limited at the same time.

With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS).

Let's get serious

First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the head if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).

<script type=''text/javascript'' src=''skrollr.min.js''>

var s = skrollr.init();

Let's change the background-color of a div starting at #00f when the scrollbar is at the top and ending with #f00 when the user scrolled 500 pixels down

<div data-0=''background-color:rgb(0,0,255);'' data-500=''background-color:rgb(255,0,0);''>WOOOT<'/div>

View in browser

---

Bir Front-End developer olarak tavsiye edebileceğim, masaüstü ve mobilide kullanımı destekleyen oldukça kullanışlı bir javascript kütüphanesi. Tasarım trendleri artık tek sayfalık, sade ve anlaşırlılık açısından büyük tasarım unsurlarının kullanımını yaygınlaştırmıştır. Bu tip kütüphaneler ile elinizdeki tasarımı kullanıcıya daha güzel ifade edebilirsiniz. Dümdüz gelen bir fotoğraf ile hafif dönerek (animasyonlu) gelen bir fotoğraf arasında kullanıcının gözüne hitap açısından oldukça büyük farklılıklar vardır.

GitHub Sayfası : İndir

Peki bu Skrollr nedir? ne işe yarar?

Skrollr adından da anlaşılacağı gibi parallax bir scroll kütüphanesidir. Avantajlarından en önemlileri arasından boyutunun küçük (12kb) olması ve jQuery kütüphanesine ihtiyaç duymamasıdır. Böylelikle javascript bilginiz ile geliştiricininde dediği gibi sevginizi birleştirerek oldukça görsel arayüzler çıkartabilirsiniz :)

Kullanımı

İndirdiğiniz skrollr.min.js dosyasını sayfanıza;

<script type=''text/javascript'' src=''skrollr.min.js''>

şeklinde eklemelisiniz. Ardından sayfanızın herhangi bir yerinde;

var s = skrollr.init();

şeklinde skrollr ı çağırmalısınız.

Geriye artık tasarım elemanlarının içerisine yazacağınız kontroller ile yapacağınız animasyonları kodlamak kalıyor.

Ufak Bir Örnek

Div elemanının arkaplan rengini sayfa kaydırıldığında (div sayfanın en üstüne yapıştığında) maviden kırmızıya geçiş olacak şekilde değiştirelim. Yapmamız gereken div nesnesine " data-POZISYON " ile tanımlamalar yapmak.

<div data-0=''background-color:rgb(0,0,255);'' data-500=''background-color:rgb(255,0,0);''>WOOOT<'/div>

data-0=''background-color:rgb(0,0,255);''

Div nesnesi ekrana ilk geldiğinde data-0 işlem görecektir (mavi arkaplan)

data-500=''background-color:rgb(255,0,0);''

Sayfa 500px kaydırıldığında işlenecek bölüm (kırmızı arkaplan)

Burada işlem gören aslında 0 ve 500 değerleri değil. İşlem gören bölüm 0 ile 500 arasındaki tüm bölümlerdir. Dikkat edecek olursanız Div nesnesinin arkaplan rengi direkt olarak maviden kırmızıya geçmiyor. Farklı renk tonları ile animasyonlu bir geçiş oluyor.

Test Et

Yukarıda data- bölümüne verebileceğiniz kontrol değerlerinin listelendiği ve nerelerde işlem gördüğüne ilişkin bir cheatsheet yer almaktadır.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---