FF3+ IE9+ Chrome

DD Scroll Boxes

Author: Dynamic Drive

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!

Demo #1: Scroll down the page at 35% or more to see an opt-in box appear. PS: Go ahead and sign up, it's a real newsletter!

Change fx:

After closing:

Demo #2: Scroll up the page at 100% or less from the top to see a header bar appear. In other words, whenever you scroll up.

Change fx:

After closing:

Directions: Developer's View

Step 1: Add the below code to the <HEAD> section of your page:

Select All

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):

Select All

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">
<span class="scrollboxclose" onClick="scrollbox1.hide()">x</span>

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:

var scrollbox1 = new scrollBox({
	elementid: 'newsletter',
	dir: 'down' // <-- No comma after last option

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'


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


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" 

Pass a Boolean value of true to dismiss the box for an entire user session, so reloading the page won't show the box until the user closes and relaunches the browser. The cookie used to create the session is site wide, so a scroll box across multiple pages with the same ID will be affected.

<span class="scrollboxclose" 
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.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post

Dynamic Drive Newsletter

Sign up for our FREE newsletter to get early access to new scripts!

DDWhois Free Domain Whois and Research Tool. Always free, always anonymous. x