Skip to content

HTML5 data-* attributes support #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
grisendo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

HTML5 data-* attributes support #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 29 additions & 40 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<p id="console"></p>

<div class="scrollblock" id="intro">
<h1 id="title">scrollorama</h1>
<p id="author">
<h1 id="title" data-animate="true" data-duration="300" data-property="zoom" data-end="8">scrollorama</h1>
<p id="author" data-animate="true" data-duration="20" data-property="z-index" data-end="0">
created by <a href="http://twitter.com/johnpolacek">John Polacek</a>
<a href="https://twitter.com/johnpolacek" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Expand All @@ -39,22 +39,26 @@ <h1 id="title">scrollorama</h1>

<div class="scrollblock" id="examples-transition">
<h2>Transitions</h2>
<h3 id="fade-in">Fade In</h3>
<h3 id="fly-in">Fly In</h3>
<h3 id="rotate-in">Rotate In</h3>
<h3 id="zoom-in">Zoom In</h3>
<p id="any"><small><span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span></small></p>
<h3 id="fade-in" data-animate="true" data-delay="400" data-duration="300" data-property="opacity" data-start="0">Fade In</h3>
<h3 id="fly-in" data-animate="true" data-delay="400" data-duration="300" data-property="left" data-start="-1400" data-end="0">Fly In</h3>
<h3 id="rotate-in" data-animate="true" data-duration="800" data-property="rotate" data-start="720">Rotate In</h3>
<h3 id="zoom-in" data-animate="true" data-delay="200" data-duration="600" data-property="zoom" data-start="8">Zoom In</h3>
<p id="any" data-animate="true" data-delay="700" data-duration="200" data-property="opacity" data-start="0">
<small data-animate="true" data-delay="800" data-duration="200" data-property="letter-spacing" data-start="18">
<span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span>
</small>
</p>
</div>

<div class="scrollblock" id="examples-pin">
<h2>Pin It</h2>
<h3 id="unpin">&#9733; Then unpin it &#9733;</h3>
<h3 id="unpin" data-animate="true" data-duration="500" data-property="padding-top" data-start="400" data-pin="true">&#9733; Then unpin it &#9733;</h3>
</div>

<div class="scrollblock" id="examples-parallax">
<h2 id="parallax1">Parallax</h2>
<h3 id="parallax2">Parallax</h3>
<h3 id="parallax3">Parallax</h3>
<h3 id="parallax2" data-animate="true" data-delay="400" data-duration="600" data-property="top" data-start="800" data-end="-800">Parallax</h3>
<h3 id="parallax3" data-animate="true" data-delay="200" data-duration="1200" data-property="top" data-start="500" data-end="-500">Parallax</h3>
</div>

<div class="scrollblock" id="examples-easing">
Expand All @@ -81,34 +85,39 @@ <h1>How To Use</h1>
scrollorama.animate('#example1',{
duration:400, property:'opacity'
})</pre></blockquote></p>
<p class="divider">&#9733; &#9733; &#9733;</p>
<p>Or specify data-animate="true" and data-* HTML5 attributes on that element.</p>
<p><blockquote><pre>
&lt;div id="#example-1" data-animate="true" data-duration="400" data-property="opacity"&gt;&lt;/div&gt;
</pre></blockquote></p>
<p id="instructions-animation">The animation parameters you can use are:</p>
<ul class="param-list">
<li>
<span class="param">duration</span>
<span class="param">duration (data-duration in HTML)</span>
<span class="param-def">number of pixels of scrolling the animation lasts</span>
</li>
<li>
<span class="param">delay</span>
<span class="param">delay (data-delay in HTML)</span>
<span class="param-def">number of pixels of scrolling before the animation starts<small>(animation is set to begin when the top of the scroll block is at the bottom of browser window)</small></span>
</li>
<li>
<span class="param">property</span>
<span class="param">property (data-property in HTML)</span>
<span class="param-def">css property being animated <small>(must be numeric)</small></span>
</li>
<li>
<span class="param">start</span>
<span class="param">start (data-start in HTML)</span>
<span class="param-def">value of the css property at the start of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
</li>
<li>
<span class="param">end</span>
<span class="param">end (data-end in HTML)</span>
<span class="param-def">value of the css property at the end of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
</li>
<li>
<span class="param">pin</span>
<span class="param">pin (data-pin in HTML)</span>
<span class="param-def">set to true if you want the scroll block to be pinned during its animations <small>(note: block will be pinned for all its element&rsquo;s animations)</small></span>
</li>
<li>
<span class="param">easing</span>
<span class="param">easing (data-easing in HTML)</span>
<span class="param-def">'bounce baby, bounce.' use the same easing equations you're used to.
<small>(if unassigned, will be a linear transition)</small></span>
</li>
Expand Down Expand Up @@ -148,7 +157,7 @@ <h1>Credits</h1>

// 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;
Expand All @@ -163,33 +172,13 @@ <h1>Credits</h1>
.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')
Expand Down Expand Up @@ -226,4 +215,4 @@ <h1>Credits</h1>

</script>

</body></html>
</body></html>
24 changes: 22 additions & 2 deletions js/jquery.scrollorama.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down Expand Up @@ -588,4 +608,4 @@ function uaMatch(ua) {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
}
}