jQuery.slideBox
A simple light-weight jQuery plugin that makes a <div>
(or another block
element) moving from outside the page to one side of your choice when scrolling to a specific point.
Demo
Please check this link to see this plugin in action.
Releases
- v0.1 - 31/07/2015
Requirements
jQuery.slideBox
requires the latest version of jQuery
.
Features
- uses
.animate()
with callback function - all directions are customizable
- can be triggered when any DOMElement is visible or at any specific offset
- closing option for the whole session on the page available
Usage
- HTML
First of all, you would need to design your slideBox. Here is a short exemple of what you can do:
<div id="slidebox"> <h3> Follow us! <small style="float: right;"> <a href="#" id="close">close</a> </small> </h3> <p style="margin-bottom: 50px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p class="text-align: center;"> <img src="http://lorempixel.com/50/50/" alt="social_icons"/> </p> </div>
- CSS
Do a bit of styling:
#slidebox { width: 300px; height: 250px; background-color: white; border: 1px solid black; padding: 20px; -webkit-box-shadow: -10px -10px 50px 5px #A6A6A6; box-shadow: -10px -10px 50px 5px #A6A6A6; }
- jQuery
The syntax of jQuery.slideBox
's initialization is the following:
jQuery(function($) { $('#slidebox').slideBox({ position: 'bottom right', // can be [bottom|middle|top] and [left|center|right] appearsFrom: 'right', // can be [left|top|right|bottom] slideDuration: 500, // animation duration in ms target: 'h2', // can be a string (jQuery selector) or an integer (offset in px) closeLink: '#close' // a string that is the jQuery selector of the closing element }).on('sb.hidden', function() { alert('hidden'); }).on('sb.shown', function() { alert('shown'); }); });
Options
Name | Type | Default | Description |
---|---|---|---|
position | string | 'bottom right' | The position where the box will appears. The string is a two-element space-separated list where the first element can be 'bottom|middle|top' and the second can be 'left|center|right'. |
appearsFrom | string | 'right' | The side where the box will slide from. This string can be 'left|top|right|bottom'. |
slideDuration | integer | 1500 | The duration of the sliding animation for both showBox and hideBox events (in ms ) |
target | integer|string | 1250 | This represents what is triggering both events. Can be a integer (offset in px ) or a string (jQuery selector) |
closeLink | string | (none) | A string representating the jQuery selector of the DOMElement that will trigger the hideBox event |
Events
Name | Description |
---|---|
sb.shown | This is triggered when the show animation is completed. |
sb.hidden | This is triggered when the hide animation is completed. |
Licence
Copyright (c) 2015 Steve David
Licensed under the MIT license.