End of Video 3 - Landing Elements

css/layout1.sass

@@ -67,3 +67,20 @@ img
   position: absolute
   left: 50%
   margin-left: -480px
+
+
+
+// Model Grid
+
+.clothes-pics
+
+  figure
+    margin-bottom: 20px
+    position: relative
+    opacity: 0
+    transform: translateX(20px)
+    transition: all 0.3s ease-in-out
+
+    &.is-showing
+      opacity: 1
+      transform: translateX(0px)

css/style.css

@@ -914,3 +914,13 @@ img {
   position: absolute;
   left: 50%;
   margin-left: -480px; }
+
+.clothes-pics figure {
+  margin-bottom: 20px;
+  position: relative;
+  opacity: 0;
+  transform: translateX(20px);
+  transition: all 0.3s ease-in-out; }
+  .clothes-pics figure.is-showing {
+    opacity: 1;
+    transform: translateX(0px); }

index.html

@@ -21,6 +21,23 @@ <h1>Clothing Store</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="clothes-pics">
+          <div class="row img-row">
+            <figure class="columns four"><img src="/images/model1.jpg"></figure>
+            <figure class="columns four"><img src="/images/model2.jpg"></figure>
+            <figure class="columns four"><img src="/images/model3.jpg"></figure>
+          </div>
+          <div class="row img-row">
+            <figure class="columns four"><img src="/images/model2.jpg"></figure>
+            <figure class="columns four"><img src="/images/model3.jpg"></figure>
+            <figure class="columns four"><img src="/images/model1.jpg"></figure>
+          </div>
+          <div class="row img-row">
+            <figure class="columns four"><img src="/images/model3.jpg"></figure>
+            <figure class="columns four"><img src="/images/model1.jpg"></figure>
+            <figure class="columns four"><img src="/images/model2.jpg"></figure>
+          </div>
+        </div>
       </article>
       <div style="height: 2000px"></div>
     </section>

index.jade

@@ -29,6 +29,39 @@ html(lang="en")
 
         hr
 
+        .clothes-pics
+
+          .row.img-row
+            figure.columns.four
+              img(src="/images/model1.jpg")
+
+            figure.columns.four
+              img(src="/images/model2.jpg")
+
+            figure.columns.four
+              img(src="/images/model3.jpg")
+
+          .row.img-row
+            figure.columns.four
+              img(src="/images/model2.jpg")
+
+            figure.columns.four
+              img(src="/images/model3.jpg")
+
+            figure.columns.four
+              img(src="/images/model1.jpg")
+
+          .row.img-row
+            figure.columns.four
+              img(src="/images/model3.jpg")
+
+            figure.columns.four
+              img(src="/images/model1.jpg")
+
+            figure.columns.four
+              img(src="/images/model2.jpg")
+
+
 
       div(style="height: 2000px")
 

js/functions.js

@@ -14,4 +14,15 @@ $(window).scroll(function(){
     'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
   });
 
+  if(wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) {
+
+    $('.clothes-pics figure').each(function(i){
+
+      setTimeout(function(){
+        $('.clothes-pics figure').eq(i).addClass('is-showing');
+      }, 150 * (i+1));
+    });
+
+  }
+
 });

readme.html

@@ -0,0 +1,39 @@
+<h1>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>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>Video 1 - &ldquo;Intro to Parallax on the Web&rdquo;</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&rsquo;s an introductory video</li>
+</ul>
+
+
+<h2>Video 2 - &ldquo;Parallax Header&rdquo;</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>Video 3 - &ldquo;Landing Elements&rdquo;</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>
+
+
+<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>

readme.md

@@ -21,6 +21,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find
 - This is where the project starts. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0).
 - This is where the project stops at the end of this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1).
 
+
+
+## Video 3 - "Landing Elements"
+
+<a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/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.2).
+
 ---
 
 _If this stuff is helpful, consider subscribing to my [YouTube Channel](https://www.youtube.com/user/DevTipsForDesigners)_