DD Scroll Boxes
Description: Scroll activated content have become very popular as a way to show opt in boxes, promotion headers and other important bits of information, as they are effective in capturing user's attention without being overly intrusive. Well, DD Scroll Box makes it a breeze to turn any DIV content on your page into a scroll box, animating them into view when the user scrolls up or down the page past a certain amount (ie: 90% for close to bottom of page). Choose from over 50 visual effects (powered by the excellent Animate.css) to further ensure all eyes are on the scroll boxes when they are revealed. Vanilla JavaScript and CSS3 powered, the script is smooth as butter and works on all major browsers (IE9+ for IE) and platforms!
Change fx:
After closing:
Change fx:
After closing:Step 1: Add the below code to the <HEAD> section of your page:
It references the following files, which you should download now:
Step 2:
Add the below sample two Scroll Boxes to the BODY section of your page,
followed by the initialization code. The ideal location is at the very end of
the page (right before the closing </body>
tag):
More Information
DD Scroll Boxes operates on any DIV container on the page with
an ID attribute, though it's usually best to position the element as "fixed
"
on the page. Here is the markup for the newsletter box:
<div id="newsletter" class="animated"> <h3>Dynamic Drive Newsletter</h3> <p>Sign up for our FREE newsletter to get early access to new scripts!</p> <form action="" method="post"> <input type="email" value="" name="EMAIL"> <input type="submit" value="Subscribe"> </form> <span class="scrollboxclose" onClick="scrollbox1.hide()">x</span> </div>
Notice besides the ID attribute, you should also add a
class="animated"
to the target container, which hides the container by
default, plus sets it up for CSS transition effects using
Animate.css.
The full style of the box can be found in the "demo" section of
ddscrollbox.css.
Always following the markup (such as at the very end of the
page) is where you should call new scrollBox()
to initialize the
script on the container and transform it into a Scroll Box:
<script> var scrollbox1 = new scrollBox({ elementid: 'newsletter', dir: 'down' // <-- No comma after last option }) </script>
where "scrollbox1
" should be an arbitrary but
unique variable for each instance of Scroll Box on your page. With this variable
you can then manually hide or "reactivate" the scroll box.
new scrollBox()
accepts a list of comma separated
settings, which are documented below:
Setting | Description |
elementid: 'string' Required |
The ID value of the scroll box container. |
dir: 'down|up' Defaults to 'down' |
The direction the user should scroll to reveal the scroll box ("down" or "up"). Defaults to "down". |
pctboundary: number Defaults to 'down' |
An integer between 0 and 100 (inclusive) that
sets the percentage of the document's total height the user has to
scroll before the scroll box is shown. When the "dir "
setting is "down ", a value of 30 displays the scroll box
once the user has scrolled the page 30% or more towards the bottom. A "dir "
setting of "up ", however, displays the scroll box
when the user scrolls up and reaches 30% or less towards the top of the
page. |
delaydismiss: Boolean Defaults to true |
Once a scroll box is visible, this setting
determines whether scrolling in the opposite direction continues to show
the box until the threshold set by the pctboundary setting
has been exceeded, or immediately dismiss the box. Setting
delaydismiss to false results in the later
behaviour. |
fxclass: "string" Defaults to 'rubberBand' |
The type of animation to use to reveal the scroll box. Refer to the drop down box in the Demo section for a list of supported keywords, or the Animate.css page. |
Scroll Box Methods
Upon initializing a Scroll Box, the following methods can be called to hide or reactivate the container:
method | Description |
instance.hide(Boolean)
|
Hides the scroll box. This method is called
most commonly inside the "close" button of the scroll box to allow users
to dismiss it on demand:<span class="scrollboxclose" onClick="scrollbox1.hide()">x</span> Pass a Boolean value of <span class="scrollboxclose" onClick="scrollbox1.hide(true)">x</span> |
instance.registerScroll() |
"Reactivates" a scroll box that was
previously hidden by calling the hide() method so it
behaves like one again. |
instance.deregisterScroll() |
"De-activates" the container so it no longer
acts like a scroll box. Unlike the hide() method above,
calling deregisterScroll() doesn't necessarily always hide
the container- if it was visible at the time of calling the method, the
container remains visible. |
Styling your Scroll Boxes
Inside ddscrollbox.css contains the definition for
two required classes of the script, "animated
" and "animatedvisible
".
The first class is used to hide any participating scroll boxes initially on the
page (with a visibility:hidden
definition), plus sets the stage to
utilize one of the included animation effects. The later class is added to the
containers by the script dynamically to make the scroll box visible at the right
time, using an inverse visibility:visible
definition. Both of these
classes should remain present in the CSS file or somewhere else in your CSS for
the page.
As mentioned, DD Scroll Boxes works on any container on the page with an ID
attribute present, which means the remainder of the CSS definitions inside
ddscrollbox.css are optional, and are simply there
to illustrate how you may wish to style your scroll boxes. Setting the boxes'
position to "fixed
" is recommended so your scroll boxes they remain
in view as the user scrolls. The rest of the style is up to you.