Hey, I wanted to share two jQuery Plugins we created for the promotional website for Spritepad. We needded two things there:
###Displacement The starscape background and some elements of the page should scroll at a different speed as the page, to achieve a fake 3D effect.
###Reaction on user scrolling We wanted some elements to appear on screen at the moment the user scrolls far enough that they have moved into the view area.
The ScrollEvent plugin enables single elements on the page for three scroll events, namely scrollin, scrollout and scrollover.
To enable those events on one or more elements, do this:
$('.my-selector').scrollEvents();
Which enables the ScrollEvents plugin on the selected elements.
After enabling it, you can easily listen to the new events:
$('.my-element').on('scrollin', function(){
$(this).fadeIn(); //Fade it in, as soon as the element is on screen.
});
Thats it, nothing more to say about it.
Ah, one thing about the Events:
###ScrollIn
The scrollin-event is fired, when a elements position has moved into the viewport with the last scroll event, that hasn't been inside the viewpoprt before.
###ScrollOut
The scrollout-event is fired, when a elements position has moved out of the viewport with the last scroll event and has been inside the viewport before.
###ScrollOver
The scrollover-event is fired every time the user performs a scroll while the element stays inside the viewport.
This plugin has two features: Background image displacement and element position displacement.
It brings two functions for this features:
$('.my-element').background_displacement(value);
and
$('.my-element').position_displacement(value);
The effects are applied when the user scrolls vertically.
###Background displacement
Normally, a static background image will be moved on screen with the same speed as the page itself is being scrolled. The background_displacement() function changes that.
Give it a value greater than zero (its percental, so 100 is the original speed), to slow down or speed up the background image scrolling speed on the screen. The plugin tweaks the CSS value background-position for that purpose and actually moving the background image a bit up or down against the scrolling direction. Best results are achieved with repeating background images.
###Position displacement
This is meant to be used on absolutely positioned elements and will apply the same effect on their CSS top value, and will make them visually pop out in front of the rest of the page content.
If you want to displace many elements at once, give them the HTML attribute data-displacement and the plugin will parse their value automatically, so you will just have to call:
$('.my-group-of-elements').position_displacement();
Without any parameter.
##Download
Get the Plugins from Github:
As usual: we give no warranty for the plugins. Use them as you like to and if you notice any bugs, you can always send us a pull request for the fix :)
greetings, Chris