🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Slidein is a super tiny jQuery plugin that uses CSS and jQuery animate() function to smoothly slide elements into view, at a certain speed and from any position.

slide

Documentation

V1.0.0 Release Notes: The main thing you must remember is that if you want to have an animation that starts off unseen, you must give the tag you want animated a display: none in CSS.

Methods

All values are default values that you can change.

.slideInLeft

Description: Slide in from the left side.
Usage: $('tag').slideInLeft({speed:400, distance: '100px', startOpacity: 0, opacitySpeed: 400});
Run down of the settings:
speed: How fast the animation animates.
distance: How far away the animation begins.
startOpacity: How opaque the tag starts when the animation starts.
opacitySpeed: How fast the opacity changes during the animation.

.slideInRight

Description: Slide in from the right side.
Usage: $('tag').slideInRight({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400});
Run down of the settings:
speed: How fast the animation animates.
distance: How far away the animation begins.
startOpacity: How opaque the tag starts when the animation starts.
opacitySpeed: How fast the opacity changes during the animation.

.slideInDown

Description: Slide in from the top. Usage: $('tag').slideInDown({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, comeDown: true, comeUp: null});
Run down of the settings:
speed: How fast the animation animates.
distance: How far away the animation begins.
startOpacity: How opaque the tag starts when the animation starts.
opacitySpeed: How fast the opacity changes during the animation.
comeDown: Tells the animation to come from the top.
comeUp: Tells the animation to come from the bottom.

.slideInUp

Description: Slide in from the bottom.
Usage: $('tag').slideInUp({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, comeDown: true, comeUp: null});
Run down of the settings:
speed: How fast the animation animates.
distance: How far away the animation begins.
startOpacity: How opaque the tag starts when the animation starts.
opacitySpeed: How fast the opacity changes during the animation.
comeDown: Tells the animation to come from the top.
comeUp: Tells the animation to come from the bottom.

.slideInDiagonal

Description: Slide in from any corner.
Usage: $('tag').slideInDiagonal({speed: 400, distance: '100px', startOpacity: 0, opacitySpeed: 400, left: true, right: null comeDown: null, comeUp: null});
Note: You must choose either comeDown or comeUp for the animation to run. You can look at the example page to see an example of a diagonal animation.
Run down of the settings:
speed: How fast the animation animates.
distance: How far away the animation begins.
startOpacity: How opaque the tag starts when the animation starts.
opacitySpeed: How fast the opacity changes during the animation.
left: Tells the animation to come from the left portion of the tag.
right: Tells the animation to come from the right portion of the tag.
comeDown: Tells the animation to come from the top.
comeUp: Tells the animation to come from the bottom.

You May Also Like