"
Team:UT-Dallas
From 2014.igem.org
| Line 4: | Line 4: | ||
<script src="https://2014.igem.org/Team:UT-Dallas/jquery.js?action=raw&ctype=text/javascript"></script> | <script src="https://2014.igem.org/Team:UT-Dallas/jquery.js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2014.igem.org/Team:UT-Dallas/jquery.scrollmagic.min.js?action=raw&ctype=text/javascript"></script> | <script src="https://2014.igem.org/Team:UT-Dallas/jquery.scrollmagic.min.js?action=raw&ctype=text/javascript"></script> | ||
| - | + | <section id="titlechart"> | |
| + | <div id="description"> | ||
| + | <h1>Parallax Sections</h1> | ||
| + | <h2>The most common parallax application</h2> | ||
| + | <p> | ||
| + | To create a classic parallax page effect simply add sections with background pictures between your content section.<br> | ||
| + | Then use ScrollScenes to animate the background image's position down. | ||
| + | </p> | ||
| + | <p> | ||
| + | The DOM is very straight forward and consists of consecutive containers. | ||
| + | </p> | ||
| + | <p> | ||
| + | <b>Please Note:</b> For brevity reasons this example uses fixed durations.<br> | ||
| + | This means the parallax movement won't exactly fit anymore, if the user resizes the window.<br> | ||
| + | To learn how to use dynamic durations, please check out the expert example <a href="../expert/responsive_duration.html">Responsive Duration</a>. | ||
| + | </p> | ||
| + | <a href="#" class="viewsource">view source</a> | ||
| + | </div> | ||
| + | </section> | ||
<section class="demo"> | <section class="demo"> | ||
<div id="trigger1" class="spacer s0"></div> | <div id="trigger1" class="spacer s0"></div> | ||
Revision as of 18:33, 17 October 2014
To create a classic parallax page effect simply add sections with background pictures between your content section.
The DOM is very straight forward and consists of consecutive containers.
Please Note: For brevity reasons this example uses fixed durations. Content 1 Content 2Parallax Sections
The most common parallax application
Then use ScrollScenes to animate the background image's position down.
This means the parallax movement won't exactly fit anymore, if the user resizes the window.
To learn how to use dynamic durations, please check out the expert example Responsive Duration.
