MGD 143 Web Motion Graphics Design I

All content is enclosed within a “main” div container with an id equals to “main” and a role equals to “main”. And within the main container we have five sections, each listed independently with their own styles.
- ```
<div id="main" role="main">
```
```

```
```
  <section id="one" class="journal" data-speed="8" data-type="background">
```
```
   <div class="titleScroll" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-10"></div>
```
```
   <article>
```
```
   <img src="img/tutorial-title.png" alt="Tutorial Title Image" width="300" height="86" />
```
```
    <p class="contentBox">U.S. Route 66 (US 66 or Route 66), also...</p>
```
```
    <p class="contentBox">The highway, which became one of the most...</p>
```
```
   </article>
```
```
  </section>
```
- The id=”one” calls from the stylesheet for the background image “VintageMapWesternUS.jpg” and the background is set to 50% 0 no-repeat fixed. The “Route 66″ banner is the image file “Route66.png” which is called from the class=”titleScroll”, and the “Tutorial” title is the image file “tutorial-title.png” called from the HTML as displayed in the snippet above. The three text content boxes in the first section are given a class of “contentBox” which is styled with the purple grain background, a border, border radius, and box-shadow effects.
In Section #2 we are sliding the background at a data speed equal to “5″ compared to the rest of the page. As this text box is scrolling at the same speed as the page, and faster than the background, it creates the charming parallax effect.
- ```

```
```
  <section id="two" class="journal" data-speed="5" data-type="background">
```
```
    <article>
```
```
      <h2>Background Slide</h2>
```
```
        <p>In this section we are...</p>
```
```
        <p>As this text box is...</p>
```
```
    </article>
```
```
  </section>
```
- The id=”two” in section #2 sets the background image “Route66California.jpg”. The class=”journal” sets the height to “1000px”, padding and margin to “0″, width to “100%”, maxwidth to “1920px”, position relative, margin to “0″ and “auto”, and includes styles for a border-top, border-bottom, and a box-shadow.

	Section 1 and 2
	All content is enclosed within a “main” div container with an id equals to “main” and a role equals to “main”. And within the main container we have five sections, each listed independently with their own styles. <div id="main" role="main"> <!-- Section #1 / Intro --> <section id="one" class="journal" data-speed="8" data-type="background"> <div class="titleScroll" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-10"></div> <article> <img src="img/tutorial-title.png" alt="Tutorial Title Image" width="300" height="86" /> <p class="contentBox">U.S. Route 66 (US 66 or Route 66), also...</p> <p class="contentBox">The highway, which became one of the most...</p> </article> </section> The id=”one” calls from the stylesheet for the background image “VintageMapWesternUS.jpg” and the background is set to 50% 0 no-repeat fixed. The “Route 66″ banner is the image file “Route66.png” which is called from the class=”titleScroll”, and the “Tutorial” title is the image file “tutorial-title.png” called from the HTML as displayed in the snippet above. The three text content boxes in the first section are given a class of “contentBox” which is styled with the purple grain background, a border, border radius, and box-shadow effects. In Section #2 we are sliding the background at a data speed equal to “5″ compared to the rest of the page. As this text box is scrolling at the same speed as the page, and faster than the background, it creates the charming parallax effect. <!-- Section #2 / Background Only --> <section id="two" class="journal" data-speed="5" data-type="background"> <article> <h2>Background Slide</h2> <p>In this section we are...</p> <p>As this text box is...</p> </article> </section> The id=”two” in section #2 sets the background image “Route66California.jpg”. The class=”journal” sets the height to “1000px”, padding and margin to “0″, width to “100%”, maxwidth to “1920px”, position relative, margin to “0″ and “auto”, and includes styles for a border-top, border-bottom, and a box-shadow.
	<<	>>