diff --git a/index.html b/index.html index 0a07d59..9825fea 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + jQuery Parallax Plugin Demo @@ -16,8 +16,8 @@ //xPosition - Horizontal position of the element //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport - $('#intro').parallax("50%", 0.1); - $('#second').parallax("50%", 0.1); + $('#intro').parallax("50%", 0.1); + $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); @@ -63,18 +63,20 @@

What Happens When JavaScript is Disabled?

-
-

Check out my new plugin Sequence.js for parallax effects and a whole lot more!

- -

Ian Lunn

- - -

This demo is based on the Nikebetterworld.com website.

- +
+ + +
diff --git a/style.css b/style.css index 3c5d8dd..3c3eb7d 100755 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Plugin: jQuery Parallax Version 1.1.3 -Author: Ian Lunn +Author: Ian Lunn Twitter: @IanLunn Author URL: http://www.ianlunn.co.uk/ Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/ @@ -15,7 +15,7 @@ License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike body{ margin: 0; min-width: 980px; - padding: 0; + padding: 0; } p{ @@ -29,6 +29,14 @@ p, ul{ font-style:normal; } +ul { + text-align: left; +} + +li { + list-style: none; +} + img{ border: 0; } @@ -47,6 +55,35 @@ h2{ font-style:normal; } +a { + transition: color 0.3s ease-in-out; +} + +a, a:visited { + color: #666; +} + +a:hover { + color: #111; +} + +article { + width: 25%; + height: 280px; + text-align: center; + float: left; + background-color: #fff; + padding: 0 20px; +} + +article:not(:first-child) { + margin-left: 5%; +} + +article:nth-child(2) p:first-child { + padding-top: 20px; +} + #header h1, #pixels{ color: #48941A; } @@ -65,7 +102,7 @@ h2{ font-size: 2.5em; padding: 80px 0 0 0; text-align: center; -} +} #nav{ list-style: none; @@ -116,7 +153,7 @@ h2{ } #fifth{ - background: #ccc; + background: #ddd; height: 400px; margin: 0 auto; padding: 40px 0 0 0; @@ -133,4 +170,4 @@ h2{ padding: 100px 0 0 0; position: relative; width: 350px; -} +}