These simple (3kb minified) article introductions are powered by jQuery and Velocity.JS. They are inspired by Tympanus Article Intro Effects and explained in this article here.
Rather than using CSS3 transitions, we use Velocity.JS for animations.
On desktop these introductions happen while you scroll. On mobile/touch devices swipe and then continue scrolling. They have both intro and outro animations.
##Javascript and CSS The introductions are reusable using the same simple markup and CSS.
Required CSS can be found at 'css/velocityarticleintros.css'
Javascript can be found at 'Scripts/velocityarticleintros.js'
See comments in both files for more information.
##HTML Structure The HTML structure is simply:
<body data-articleintro=''>
<header>
<div class='header-img'>
<img />
</div>
<div>
...header content...
</div>
</header>
<article>
<div data-side-width=''>
...article content...
</div>
</article>
</body>Setup your HTML structure as above, and include the needed CSS.
The 'data-articleintro' attribute on the body is set to decide which intro to show ('push', 'jam', or 'side').
The 'data-side-width' attribute is only used by the 'side' effect and is to be the width of the article content (note this would need to be redundantly set in CSS).
See the index.htm file code comments for more information.