From e64ca2c46bcf5a9a42abcf1f6a97c617a7313a85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Jos=C3=A9=20Cruz=20Romanos?= Date: Wed, 5 Feb 2014 15:28:11 +0100 Subject: [PATCH] HTML5 data-* attributes support --- index.html | 69 +++++++++++++++++----------------------- js/jquery.scrollorama.js | 24 ++++++++++++-- 2 files changed, 51 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 0489e97..fda9a4b 100644 --- a/index.html +++ b/index.html @@ -22,8 +22,8 @@

-

scrollorama

-

+

scrollorama

+

created by John Polacek @@ -39,22 +39,26 @@

scrollorama

Transitions

-

Fade In

-

Fly In

-

Rotate In

-

Zoom In

-

★ Any numeric CSS property ★

+

Fade In

+

Fly In

+

Rotate In

+

Zoom In

+

+ + ★ Any numeric CSS property ★ + +

Pin It

-

★ Then unpin it ★

+

★ Then unpin it ★

Parallax

-

Parallax

-

Parallax

+

Parallax

+

Parallax

@@ -81,34 +85,39 @@

How To Use

scrollorama.animate('#example1',{ duration:400, property:'opacity' })

+

★ ★ ★

+

Or specify data-animate="true" and data-* HTML5 attributes on that element.

+ 

+<div id="#example-1" data-animate="true" data-duration="400" data-property="opacity"></div>
+

The animation parameters you can use are:

  • - duration + duration (data-duration in HTML) number of pixels of scrolling the animation lasts
  • - delay + delay (data-delay in HTML) number of pixels of scrolling before the animation starts(animation is set to begin when the top of the scroll block is at the bottom of browser window)
  • - property + property (data-property in HTML) css property being animated (must be numeric)
  • - start + start (data-start in HTML) value of the css property at the start of the animation (if unassigned, will be the element’s current property value)
    (also can be a function that returns a value for dynamic heights)
  • - end + end (data-end in HTML) value of the css property at the end of the animation (if unassigned, will be the element’s current property value)
    (also can be a function that returns a value for dynamic heights)
  • - pin + pin (data-pin in HTML) set to true if you want the scroll block to be pinned during its animations (note: block will be pinned for all its element’s animations)
  • - easing + easing (data-easing in HTML) 'bounce baby, bounce.' use the same easing equations you're used to. (if unassigned, will be a linear transition)
    • @@ -148,7 +157,7 @@

    Credits

    // initialize the plugin, pass in the class selector for the sections of content (blocks) var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); - + // assign function to add behavior for onBlockChange event scrollorama.onBlockChange(function() { var i = scrollorama.blockIndex; @@ -163,33 +172,13 @@

    Credits

    .css('display','block') .css('float','left'); $('.char9').css('padding-left','6px'); - - // animate the title letters to explode - scrollorama - .animate('#title',{ duration: 300, property:'zoom', end: 8 }) - .animate('#author',{ duration: 10, property:'z-index', end: 0 }); - + $('#title span').each(function() { scrollorama .animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 }) .animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 }); }); - // animate some examples - scrollorama - .animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true }) - .animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 }) - .animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 }) - .animate('#rotate-in',{ duration: 800, property:'rotate', start:720 }) - .animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 }) - .animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 }) - .animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 }); - - // animate the parallaxing - scrollorama - .animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 }) - .animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 }); - // animate some easing examples var $easing = $('#easing'), $clone = $easing.clone().appendTo('#examples-easing') @@ -226,4 +215,4 @@

    Credits

    - \ No newline at end of file + diff --git a/js/jquery.scrollorama.js b/js/jquery.scrollorama.js index 6c42d25..53e602c 100644 --- a/js/jquery.scrollorama.js +++ b/js/jquery.scrollorama.js @@ -408,7 +408,27 @@ }; init(); - + + scrollorama.settings.blocks.find('*[data-animate]').each( + function() { + var element = $(this); + if ($.trim(element.attr('data-animate')).toLowerCase() === 'true') { + scrollorama.animate( + element, + { + duration: element.attr('data-duration') ? parseInt(element.attr('data-duration')) : undefined, + delay: element.attr('data-delay') ? parseInt(element.attr('data-delay')) : undefined, + property: element.attr('data-property'), + start: element.attr('data-start') ? (isNaN(element.attr('data-start')) ? element.attr('data-start') : parseInt(element.attr('data-start'))) : undefined, + end: element.attr('data-end') ? (isNaN(element.attr('data-end')) ? element.attr('data-end') : parseInt(element.attr('data-end'))) : undefined, + pin: element.attr('data-pin') ? (($.trim(element.attr('data-pin').toLowerCase()) === 'true') ? true : false) : undefined, + easing: element.attr('data-easing') + } + ); + } + } + ); + return scrollorama; }; @@ -588,4 +608,4 @@ function uaMatch(ua) { browser: match[ 1 ] || "", version: match[ 2 ] || "0" }; -} \ No newline at end of file +}