Code for video number 6

DevTips · May 8, 2015 · 51919fb · 51919fb
1 parent 30ecdb2
commit 51919fb
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 2 deletions.
diff --git a/css/layout1.sass b/css/layout1.sass
@@ -123,3 +123,47 @@ img
     attachment: fixed
   margin-top: 100px
   border-radius: 50%
+  position: relative
+
+  .window-tint
+    background-color: rgba(0,0,0,0.5)
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    border-radius: 50%
+    display: flex
+    justify-content: center
+    align-items: center
+    opacity: 0
+
+
+  .promo-text
+    color: white
+    font-weight: 100
+    font-size: 50px
+    line-height: 1.2
+
+    strong
+      display: block
+      font-size: 30px
+
+    span
+      font:
+        weight: 300
+        size: 18px
+        style: italic
+      color: rgba(255,255,255,0.6)
+
+    .window-cta
+      font-size: 20px
+      text-decoration: none
+      color: white
+      border: 1px solid white
+      padding: 10px 20px
+      transition: all 0.3s ease-in-out
+
+      &:hover
+        background: white
+        color: black
diff --git a/css/style.css b/css/style.css
@@ -953,4 +953,40 @@ img {
   background-repeat: repeat-y;
   background-attachment: fixed;
   margin-top: 100px;
-  border-radius: 50%; }
+  border-radius: 50%;
+  position: relative; }
+  .large-window .window-tint {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0; }
+  .large-window .promo-text {
+    color: white;
+    font-weight: 100;
+    font-size: 50px;
+    line-height: 1.2; }
+    .large-window .promo-text strong {
+      display: block;
+      font-size: 30px; }
+    .large-window .promo-text span {
+      font-weight: 300;
+      font-size: 18px;
+      font-style: italic;
+      color: rgba(255, 255, 255, 0.6); }
+    .large-window .promo-text .window-cta {
+      font-size: 20px;
+      text-decoration: none;
+      color: white;
+      border: 1px solid white;
+      padding: 10px 20px;
+      transition: all 0.3s ease-in-out; }
+      .large-window .promo-text .window-cta:hover {
+        background: white;
+        color: black; }
diff --git a/index.html b/index.html
@@ -60,7 +60,11 @@ <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="large-window"></div>
+        <div class="large-window">
+          <div class="window-tint">
+            <div class="promo-text">Fall Suits<strong><span>from</span> $99</strong><a href="" class="window-cta">Shop Now</a></div>
+          </div>
+        </div>
       </article>
       <div style="height: 2000px"></div>
     </section>

diff --git a/index.jade b/index.jade
@@ -80,6 +80,10 @@ html(lang="en")
         hr
 
         .large-window
+          .window-tint
+            .promo-text Fall Suits
+              strong <span>from</span> $99
+              a(href="").window-cta Shop Now
 
 
       div(style="height: 2000px")

diff --git a/js/functions.js b/js/functions.js
@@ -25,4 +25,14 @@ $(window).scroll(function(){
 
   }
 
+  if(wScroll > $('.large-window').offset().top - $(window).height()){
+
+    $('.large-window').css({'background-position':'center '+ (wScroll - $('.large-window').offset().top) +'px'});
+
+    var opacity = (wScroll - $('.large-window').offset().top + 400) / (wScroll / 5);
+
+    $('.window-tint').css({'opacity': opacity});
+
+  }
+
 });
diff --git a/readme.md b/readme.md
@@ -46,6 +46,13 @@ 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.4).
 
 
+
+## Video 6 - "Promo-Scope"
+
+<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>
+
+- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5).
+
 ---