Put Your Best Face ForwardA Background Scroll Effects for Dreamweaver Tutorial

Buy Now ($95) | BSE Home | View Finished Page

Put your best face forward...

Learn...

Learn how to use Background Scroll Effects to craft a really cool animation. In the process, learn how to build an equally cool page around it using our Harmony Page Builder, while also learning a few neat tricks and workflows along the way.

What you need...

This tutorial assumes you have acquired and installed PVII Background Scroll Effects. The page you will build also uses the Harmony Page Builder and Scroll to Element tools. If you are a non-coder, it will be most helpful if you have those products installed.

Before we begin...

If you haven't already done so, please view the finished page.

Now you have an idea of what you'll be building! As you go through the tutorial, you'll learn some neat tricks, so do pay attention.

Download the assets

We've prepared a zip file for you. Download it now. Save the file inside a Dreamweaver defined local site. Inside, you'll find the following files and folders:

You can simply open the finished.htm document and review the code to see how the page was built, or you can follow along with our simple tutorial.

Open the provided workpage

Open working.htm, which is in the root of the file folder you downloaded. Switch to code view and view the markup. The page is already linked to the CSS and script files needed for the page to work. Stay in code view for the next step.

Adding Navigation

Locate the opening body tag and make a new line below it:

<body>
[new line]

Paste in the following code:

<div class="paginate"> <ul> <li class="back"><a href="home.htm" class="back">Home</a></li> <li><a href="#s-1" class="p7STE-scroll-to-element"><i>Section 1</i></a></li> <li><a href="#s-2" class="p7STE-scroll-to-element"><i>Section 1</i></a></li> <li><a href="#s-3" class="p7STE-scroll-to-element"><i>Section 1</i></a></li> <li><a href="#s-4" class="p7STE-scroll-to-element"><i>Section 1</i></a></li> </ul> </div>

You just coded a paginator bar. Good job! The code is pretty straightforward. The first link is an ordinary link. You can remove it or set it to a page of your choice. The next 4 links use our Scroll to Element widget to smoothly scroll the page to the element whose ID is carried in the link's HREF value. In the next tutorial section, you'll build the rest of the page layout and assign the relevant IDs. For now, switch to design view and you'll see that the code you entered has resulted in a paginator bar across the top of your page.

Laying out the rest of the page with Harmony

Switch to code view. Make a new line below the paginate DIV's closing </div> tag.

Open the Harmony interface

We're going to create five Harmony columns.

Use the slideshow below as a guide to Harmony settings and options for each of your five columns. Use the round paginator circles above the image to navigate through the slides.

1
1
1
1
1

Note: All panels are set to Vertical Center. The footer panel is set to Content Align Center. Do not forget to enter the User Classes shown in the screen captures!

Click OK.

The new markup added to your page will look like this:

<div id="p7HMY_1" class="p7HMY hmy-noscript" data-hmy-max-width="100,%"> <div class="hmy-section" data-hmy-basis="100,%,1"> <div class="hmy-content-wrapper hmy-vertical-center panel"> <div class="hmy-content hmy-left"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div> </div> <div class="hmy-section" data-hmy-basis="100,%,1"> <div class="hmy-content-wrapper hmy-vertical-center panel theater"> <div class="hmy-content hmy-left"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit...</p> </div> </div> </div> <div class="hmy-section" data-hmy-basis="100,%,1"> <div class="hmy-content-wrapper hmy-vertical-center panel"> <div class="hmy-content hmy-left"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div> </div> <div class="hmy-section" data-hmy-basis="100,%,1"> <div class="hmy-content-wrapper hmy-vertical-center panel closing-text"> <div class="hmy-content hmy-left"> <h3>Column 4</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div> </div> <div class="hmy-section" data-hmy-basis="100,%,1"> <div class="hmy-content-wrapper hmy-vertical-center footer"> <div class="hmy-content hmy-center"> <p>Footer</p> </div> </div> </div> </div>

Assign a BSE Effect to the first panel

In design view, place your cursor in the first content panel (Column 1) and open the BSE UI.

Use the above screen capture as a guide. Do make sure you select the hmy-content-wrapper as the target element (Apply to Element).

Switch to code view. Your hmy-content-wrapper DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="hmy-content-wrapper hmy-vertical-center panel bse-bg" data-bse="1,0,2,75,10,20,65,1,1800">

Add an ID of s-1 to the content-wrapper DIV:

<div id="s-1" class="hmy-content-wrapper hmy-vertical-center panel bse-bg" data-bse="1,0,2,75,10,20,65,1,1800">

Assign a BSE Effect to the third panel

In design view, place your cursor in the third content panel (Column 3) and open the BSE UI.

Use the above screen capture as a guide. Do make sure you select the hmy-content-wrapper as the target element (Apply to Element).

Switch to code view. Your hmy-content-wrapper DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="hmy-content-wrapper hmy-vertical-center panel bse-bg" data-bse="2,0,6,60,10,20,65,1,1200">

Add an ID of s-3 to the content-wrapper DIV:

<div id="s-3" class="hmy-content-wrapper hmy-vertical-center panel bse-bg" data-bse="2,0,6,60,10,20,65,1,1200">

Assign a BSE Effect to the fourth panel

In design view, place your cursor in the fourth content panel (Column 4) and open the BSE UI.

Use the above screen capture as a guide. Do make sure you select the hmy-content-wrapper as the target element (Apply to Element).

Switch to code view. Your hmy-content-wrapper DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="hmy-content-wrapper hmy-vertical-center panel closing-text bse-bg" data-bse="3,0,6,40,10,20,72,1,1200">

Add an ID of s-3 to the content-wrapper DIV:

<div id="s-4" class="hmy-content-wrapper hmy-vertical-center panel closing-text bse-bg" data-bse="3,0,6,40,10,20,72,1,1200">

Create the Stage

Now it's time to get the show on the road.

In design view, place your cursor inside the second panel (Column 2).

Switch to code view.

Locate the relevant hmy-content element. Inside, you will find a level 3 heading and a paragraph:

<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>

Delete both the heading and the paragraph. In their place, paste in the stage markup:

<section class="stage"> <div class="actor face"> </div> <div class="actor left-eye"> </div> <div class="actor right-eye"> </div> <div class="actor lips"> </div> <div class="stage-info"> <p class="caption">Put your best face forward</p> </div> </section>

Assign animations to the actors

You can stay in code view for this task.

Actor: "face"

Place your cursor inside the first actor DIV (face):

<div class="actor face"> </div>

Open the BSE UI:

Use the above screen capture as a guide.

Switch to code view. Your face DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="actor face bse-bg" data-bse="4,0,6,40,10,20,65,1,1200"> </div>

Actor: "left-eye"

Place your cursor inside the second actor DIV (left-eye):

<div class="actor left-eye"> </div>

Open the BSE UI:

Use the above screen capture as a guide.

Switch to code view. Your left-eye DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="actor left-eye bse-bg" data-bse="5,0,3,100,10,20,65,0,1200"> </div>

Actor: "right-eye"

Place your cursor inside the second actor DIV (left-eye):

<div class="actor right-eye"> </div>

Open the BSE UI:

Use the above screen capture as a guide.

Switch to code view. Your left-eye DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="actor right-eye bse-bg" data-bse="6,0,4,100,10,20,65,0,1200"> </div>

Actor: "lips"

Place your cursor inside the second actor DIV (left-eye):

<div class="actor lips"> </div>

Open the BSE UI:

Use the above screen capture as a guide.

Switch to code view. Your lips DIV now has a new class (bse-bg) and a data-bse attribute to carry the options you just set.

<div class="actor lips bse-bg" data-bse="7,0,6,100,10,20,65,1,1200"> </div>

That's a wrap!

CSS Notes

The included CSS file: bse-face.css is commented in great detail. We highly recommend opening the file and reading the notes (comments). The information is likely to prove quite valuable.