code for video number 7

DevTips · May 15, 2015 · 5716845 · 5716845
1 parent 51919fb
commit 5716845
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 4 deletions.
diff --git a/css/layout1.sass b/css/layout1.sass
@@ -122,6 +122,7 @@ img
     repeat: repeat-y
     attachment: fixed
   margin-top: 100px
+  margin-bottom: 100px
   border-radius: 50%
   position: relative
 
@@ -167,3 +168,24 @@ img
       &:hover
         background: white
         color: black
+
+
+// posts
+
+.blog-posts
+  margin-top: 100px
+
+  .post
+    border: 1px solid #e1e1e1
+    padding: 20px 20px 0
+    background: white
+    position: relative
+
+  .post-1
+    transform: translate(100px, 20px)
+
+  .post-2
+    z-index: 2
+
+  .post-3
+    transform: translate(-100px, 20px)
diff --git a/css/style.css b/css/style.css
@@ -953,6 +953,7 @@ img {
   background-repeat: repeat-y;
   background-attachment: fixed;
   margin-top: 100px;
+  margin-bottom: 100px;
   border-radius: 50%;
   position: relative; }
   .large-window .window-tint {
@@ -990,3 +991,17 @@ img {
       .large-window .promo-text .window-cta:hover {
         background: white;
         color: black; }
+
+.blog-posts {
+  margin-top: 100px; }
+  .blog-posts .post {
+    border: 1px solid #e1e1e1;
+    padding: 20px 20px 0;
+    background: white;
+    position: relative; }
+  .blog-posts .post-1 {
+    transform: translate(100px, 20px); }
+  .blog-posts .post-2 {
+    z-index: 2; }
+  .blog-posts .post-3 {
+    transform: translate(-100px, 20px); }
diff --git a/images/posts/one.jpg b/images/posts/one.jpg
diff --git a/images/posts/three.jpg b/images/posts/three.jpg
diff --git a/images/posts/two.jpg b/images/posts/two.jpg
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
     </header>
     <section class="content">
       <article>
-        <h1>Clothing Store</h1>
+        <h1>Unique Style</h1>
         <hr>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
         <hr>
@@ -56,7 +56,7 @@ <h1>Clothing Store</h1>
             </figure>
           </div>
         </div>
-        <h1>Clothing Store</h1>
+        <h1>Fine Tayloring</h1>
         <hr>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
         <hr>
@@ -65,6 +65,27 @@ <h1>Clothing Store</h1>
             <div class="promo-text">Fall Suits<strong><span>from</span> $99</strong><a href="" class="window-cta">Shop Now</a></div>
           </div>
         </div>
+        <h1>Rich History</h1>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
+        <hr>
+        <div class="blog-posts row">
+          <div class="post columns four post-1">
+            <h5>Post Title</h5><img src="/images/posts/one.jpg">
+            <p>Incididunt ut labore et dolore magna.</p>
+            <p><a href="" class="button">Read More</a></p>
+          </div>
+          <div class="post columns four post-2">
+            <h5>Post Title</h5><img src="/images/posts/two.jpg">
+            <p>Lorem ipsum dolor sit amet.</p>
+            <p><a href="" class="button">Read More</a></p>
+          </div>
+          <div class="post columns four post-3">
+            <h5>Post Title</h5><img src="/images/posts/three.jpg">
+            <p>Duis aute irure dolor in reprehenderit.</p>
+            <p><a href="" class="button">Read More</a></p>
+          </div>
+        </div>
       </article>
       <div style="height: 2000px"></div>
     </section>

diff --git a/index.jade b/index.jade
@@ -21,7 +21,7 @@ html(lang="en")
 
       article
 
-        h1 Clothing Store
+        h1 Unique Style
 
         hr
 
@@ -71,7 +71,7 @@ html(lang="en")
               figcaption BlackBird Trousers - <strong>$135</strong>
 
 
-        h1 Clothing Store
+        h1 Fine Tayloring
 
         hr
 
@@ -86,6 +86,36 @@ html(lang="en")
               a(href="").window-cta Shop Now
 
 
+
+        h1 Rich History
+
+        hr
+
+        p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
+
+        hr
+
+
+        .blog-posts.row
+
+          .post.columns.four.post-1
+            h5 Post Title
+            img(src="/images/posts/one.jpg")
+            p Incididunt ut labore et dolore magna.
+            p: a.button(href="") Read More
+
+          .post.columns.four.post-2
+            h5 Post Title
+            img(src="/images/posts/two.jpg")
+            p Lorem ipsum dolor sit amet.
+            p: a.button(href="") Read More
+
+          .post.columns.four.post-3
+            h5 Post Title
+            img(src="/images/posts/three.jpg")
+            p Duis aute irure dolor in reprehenderit.
+            p: a.button(href="") Read More
+
       div(style="height: 2000px")
 
     script(src="/js/jquery-2.1.3.min.js")

diff --git a/js/functions.js b/js/functions.js
@@ -35,4 +35,14 @@ $(window).scroll(function(){
 
   }
 
+  if(wScroll > $('.blog-posts').offset().top - $(window).height()){
+
+    var offset = Math.min(0, wScroll - $('.blog-posts').offset().top +$(window).height() - 350);
+
+    $('.post-1').css({'transform': 'translate('+ offset +'px, '+ Math.abs(offset * 0.2) +'px)'});
+
+    $('.post-3').css({'transform': 'translate('+ Math.abs(offset) +'px, '+ Math.abs(offset * 0.2) +'px)'});
+
+  }
+
 });
diff --git a/readme.html b/readme.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+</head>
+<body>
+<h1 id="parallaxontheweb-projectfiles">Parallax On The Web - Project Files</h1>
+
+<p>Video Series <a href="https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk"> for free on YouTube</a> on the <a href="https://www.youtube.com/user/DevTipsForDesigners">DevTips</a> Channel</p>
+
+<h2 id="releases">Releases</h2>
+
+<p>Releases correspond to the videos. Visit the releases page on this repo to find the specific state of the code base. In other words; if you are watching video 2 and want to grab the code form that point. You will want to look for that <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases">here</a>, or below.</p>
+
+<h2 id="video1-introtoparallaxontheweb">Video 1 - &#8220;Intro to Parallax on the Web&#8221;</h2>
+
+<p><a href="https://youtu.be/STwoa-9jxi0"><img src="https://i.ytimg.com/vi/STwoa-9jxi0/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>There is no code for this video, it&#8217;s an introductory video</li>
+</ul>
+
+<h2 id="video2-parallaxheader">Video 2 - &#8220;Parallax Header&#8221;</h2>
+
+<p><a href="https://youtu.be/WTZpNAbz3jg"><img src="https://i.ytimg.com/vi/WTZpNAbz3jg/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>This is where the project starts. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0">Get the code</a>.</li>
+<li>This is where the project stops at the end of this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1">Get the code</a>.</li>
+</ul>
+
+<h2 id="video3-landingelements">Video 3 - &#8220;Landing Elements&#8221;</h2>
+
+<p><a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.2">Get the code</a>.</li>
+</ul>
+
+<h2 id="video4-theperiscope">Video 4 - &#8220;The Periscope&#8221;</h2>
+
+<p><a href="https://youtu.be/uYPdA_SFSDw"><img src="https://i.ytimg.com/vi/uYPdA_SFSDw/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3">Get the code</a>.</li>
+</ul>
+
+<h2 id="video5-zoomingthumbnails">Video 5 - &#8220;Zooming Thumbnails&#8221;</h2>
+
+<p><a href="https://youtu.be/KzP7YXcHNcE"><img src="https://i.ytimg.com/vi/KzP7YXcHNcE/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.4">Get the code</a>.</li>
+</ul>
+
+<h2 id="video6-promo-scope">Video 6 - &#8220;Promo-Scope&#8221;</h2>
+
+<p><a href="https://youtu.be/zEXubVd_y_M"><img src="https://i.ytimg.com/vi/zEXubVd_y_M/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5">Get the code</a>.</li>
+</ul>
+
+<h2 id="video7-floatingelements">Video 7 - &#8220;Floating Elements&#8221;</h2>
+
+<p><a href="https://youtu.be/LoouHSB0BMM"><img src="https://i.ytimg.com/vi/LoouHSB0BMM/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6">Get the code</a>.</li>
+</ul>
+
+<hr />
+
+<p><em>If this stuff is helpful, consider subscribing to my <a href="https://www.youtube.com/user/DevTipsForDesigners">YouTube Channel</a></em></p>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -53,6 +53,15 @@ Releases correspond to the videos. Visit the releases page on this repo to find
 
 - Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5).
 
+
+
+## Video 7 - "Floating Elements"
+
+<a href="https://youtu.be/LoouHSB0BMM"><img src="https://i.ytimg.com/vi/LoouHSB0BMM/mqdefault.jpg"><br>Watch on YouTube</a>
+
+- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6).
+
+
 ---