glasses-logo

<dominikgorecki> Web development on the Microsoft Stack <dominikgorecki>

Flow Up

A jQuery plugin that makes content flow up as you scroll down. This plugin is based on Eric Wenn’s implementation but it has important fixes and improvements.

Check out the demo.

Documentation

Plug and Play

Running this plugin is very easy. Ensure you have jQuery and you run the following after page load (hence the $(document).ready… in this example

$(document).ready(function() {
    $("CONTAINER-SELECTOR").flowUp("FLOW-UP-ELEMENTS-SELECTOR");
 });

This will not affect any element that is visible so to test it out, ensure you have enough elements to go beyond the fold.

Customizing with JS

So you want to customize this effect a little? No problem. I give you the option of customizing the effect with javascript and with the CSS.

You can pass in the following in the options JSON for $(“#container”).flowUp(“.articles”, options-json);

translateY [integer](pixels): The amount of pixels that each element will be below the active window. I recommend leaving this as it is, but play around with it for various effects. The larger this integer, the longer the delay between displaying the element on screen.

duration [float](seconds):

    
$(document).ready(function() {
    $("CONTAINER-SELECTOR").flowUp("FLOW-UP-ELEMENTS-SELECTOR", { transalteY: 350, duration: 1 });
 });

 

Download

Can be downloaded from GitHub

 

Open Menu Button

Menu