WIP - parallax hero image.

public/site/2015-05/_includes/head.html

@@ -9,7 +9,4 @@
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
-
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-  <script src="/js/main.js"></script>
 </head>

public/site/2015-05/_includes/header.html

@@ -1,13 +1,4 @@
-<header class="{{ page.header }}">
+<header class="{{ page.header }}" data-paroller-factor="0.2">
-    <!--div class="hero">
-        <img class="ios" src="/img/hero_ios.jpg" />
-        <img class="android" src="/img/hero_android.jpg" />
-        <img class="mac" src="/img/hero_mac.jpg" />
-        <img class="desktop" src="/img/hero_desktop.jpg" />
-        <img class="cli" src="/img/hero_cli.jpg" />
-        <img class="web" src="/img/hero_web.jpg" />
-    </div-->
-
     <nav>
         <a href="/">Master Password</a>
         <div class="flex-auto">
@@ -21,6 +12,19 @@
         <a href="http://help.masterpasswordapp.com">Support</a>
     </nav>
 
+        <!--
+    <div class="hero" data-paroller-factor="0.2" data-paroller-type="foreground">
+        <img class="main" src="/img/hero_main.jpg" />
+        <img class="ios" src="/img/hero_ios.jpg" />
+        <img class="android" src="/img/hero_android.jpg" />
+        <img class="mac" src="/img/hero_mac.jpg" />
+        <img class="desktop" src="/img/hero_desktop.jpg" />
+        <img class="cli" src="/img/hero_cli.jpg" />
+        <img class="web" src="/img/hero_web.jpg" />
+        <div class="img"></div>
+    </div>
+        -->
+
     <div class="flex-auto"></div>
 
     <nav>

public/site/2015-05/_sass/_layout.scss

@@ -84,51 +84,97 @@ header {
     display:                flex;
     position:               relative;
     overflow:               hidden;
-    min-height:             30%;
+    min-height:             40%;
 
     flex-direction:         column;
     justify-content:        stretch;
     align-items:            stretch;
 
-    &::before, &::after {
+//    .hero {
-        position:           absolute;
+//        position: absolute;
+//        z-index: -2;
+//        left: 0;
+//        right: 0;
+//        top: 0;
+//        bottom: 0;
+//
+//        .img {
+//            position: absolute;
+//            top: 0;
+//            left: 0;
+//            bottom: 0;
+//            right: 0;
+//            margin: 0;
+//
+//            background-color:   black;
+//            background-size:    cover !important;
+//            background:         url('../img/hero_main.jpg') center top;
+//        }
+//    }
+//    &[data-hero=ios] .img {
+//                background:         url('../img/hero_ios.jpg') center center;
+//            }
+//    &[data-hero=android] .img {
+//                background:         url('../img/hero_android.jpg') center center;
+//            }
+//    &[data-hero=mac] .img {
+//                background:         url('../img/hero_mac.jpg') center top;
+//            }
+//    &[data-hero=desktop] .img {
+//                background:         url('../img/hero_desktop.jpg') center bottom;
+//            }
+//    &[data-hero=cli] .img {
+//                background:         url('../img/hero_cli.jpg') center bottom;
+//            }
+//    &[data-hero=web] .img {
+//                background:         url('../img/hero_web.jpg') center center;
+//            }
+//    .hero img.main {
+//        display: block;
+//        z-index: -1;
+//    }
+//    &[data-hero=ios] .hero img.ios {
+//        display: block;
+//    }
+//    &[data-hero=android] .hero img.android {
+//        display: block;
+//    }
+//    &[data-hero=mac] .hero img.mac {
+//        display: block;
+//    }
+//    &[data-hero=desktop] .hero img.desktop {
+//        top: auto;
+//        bottom: -90px;
+//        display: block;
+//    }
+//    &[data-hero=cli] .hero img.cli {
+//        display: block;
+//    }
+//    &[data-hero=web] .hero img.web {
+//        display: block;
+//    }
+
+
         background-color:   black;
         background-size:    cover !important;
-        opacity:            0;
-        transition:         0.3s opacity;
-        z-index:            -1;
-        width:              100%;
-        height:             100%;
-        content:            '';
-    }
-    &::after {
-        z-index:            -2;
         background:         url('../img/hero_main.jpg') center top;
-        opacity:            1;
+    &[data-hero=ios] {
-    }
-    &.hero_ios::before {
         background:         url('../img/hero_ios.jpg') center center;
-        opacity:            1;
     }
-    &.hero_android::before {
+    &[data-hero=android] {
         background:         url('../img/hero_android.jpg') center center;
-        opacity:            1;
     }
-    &.hero_mac::before {
+    &[data-hero=mac] {
         background:         url('../img/hero_mac.jpg') center top;
-        opacity:            1;
     }
-    &.hero_desktop::before {
+    &[data-hero=desktop] {
         background:         url('../img/hero_desktop.jpg') center bottom;
-        opacity:            1;
     }
-    &.hero_cli::before {
+    &[data-hero=cli] {
         background:         url('../img/hero_cli.jpg') center bottom;
-        opacity:            1;
     }
-    &.hero_web::before {
+    &[data-hero=web] {
         background:         url('../img/hero_web.jpg') center center;
-        opacity:            1;
     }
     h1 {
         height:             1em;
@@ -189,17 +235,26 @@ section {
     font-size:              1.2em;
 }
 footer {
-    display:                flex;
     padding:                2em 100px;
 
     background:             rgba(240, 240, 240, 1);
 
-    div {
+    & > div {
+        display:                flex;
+
+        & > div {
             flex:               1;
+
             ul {
                 list-style:     none;
             }
         }
+    }
+
+    p {
+        font-size:          smaller;
+        color:             rgba(180, 180, 180, 1);
+    }
 }
 input {
     margin:                 0 0.3ex;

public/site/2015-05/js/jquery.paroller.min.js

@@ -1 +1 @@
-!function($){"use strict";var r=$("[data-paroller-factor]"),t={bgVertical:function(r,t){return r.css({"background-position":"center "+-t+"px"})},bgHorizontal:function(r,t){return r.css({"background-position":-t+"px center"})},vertical:function(r,t){return r.css({"-webkit-transform":"translateY("+t+"px)","-moz-transform":"translateY("+t+"px)",transform:"translateY("+t+"px)"})},horizontal:function(r,t){return r.css({"-webkit-transform":"translateX("+t+"px)","-moz-transform":"translateX("+t+"px)",transform:"translateX("+t+"px)"})}};$.fn.paroller=function(o){var a=$(window).height(),n=$(document).height(),o=$.extend({factor:0,type:"background",direction:"vertical"},o);r.each(function(){var r=$(this),e=r.offset().top,i=r.outerHeight(),c=r.data("paroller-factor"),l=r.data("paroller-type"),s=r.data("paroller-direction"),u=c?c:o.factor,f=l?l:o.type,d=s?s:o.direction,p=Math.round(e*u),h=Math.round((e-a/2+i)*u);"background"==f?"vertical"==d?t.bgVertical(r,p):"horizontal"==d&&t.bgHorizontal(r,p):"foreground"==f&&("vertical"==d?t.vertical(r,h):"horizontal"==d&&t.horizontal(r,h)),$(window).on("scroll",function(){var o=$(this).scrollTop();p=Math.round((e-o)*u),h=Math.round((e-a/2+i-o)*u),"background"==f?"vertical"==d?t.bgVertical(r,p):"horizontal"==d&&t.bgHorizontal(r,p):"foreground"==f&&n>o&&("vertical"==d?t.vertical(r,h):"horizontal"==d&&t.horizontal(r,h))})})}}(jQuery);
+!function(r){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=r(require("jquery")):r(jQuery)}(function($){"use strict";var r={bgVertical:function(r,t){return r.css({"background-position":"center "+-t+"px"})},bgHorizontal:function(r,t){return r.css({"background-position":-t+"px center"})},vertical:function(r,t,o){return"none"===o?o="":!0,r.css({"-webkit-transform":"translateY("+t+"px)"+o,"-moz-transform":"translateY("+t+"px)"+o,transform:"translateY("+t+"px)"+o,transition:"transform linear","will-change":"transform"})},horizontal:function(r,t,o){return"none"===o?o="":!0,r.css({"-webkit-transform":"translateX("+t+"px)"+o,"-moz-transform":"translateX("+t+"px)"+o,transform:"translateX("+t+"px)"+o,transition:"transform linear","will-change":"transform"})}};$.fn.paroller=function(t){var o=$(window).height(),n=$(document).height(),t=$.extend({factor:0,type:"background",direction:"vertical"},t);return this.each(function(){var a=!1,e=$(this),i=e.offset().top,c=e.outerHeight(),l=e.data("paroller-factor"),s=e.data("paroller-type"),u=e.data("paroller-direction"),f=l?l:t.factor,d=s?s:t.type,h=u?u:t.direction,p=Math.round(i*f),g=Math.round((i-o/2+c)*f),m=e.css("transform");"background"==d?"vertical"==h?r.bgVertical(e,p):"horizontal"==h&&r.bgHorizontal(e,p):"foreground"==d&&("vertical"==h?r.vertical(e,g,m):"horizontal"==h&&r.horizontal(e,g,m));var b=function(){a=!1};$(window).on("scroll",function(){if(!a){var t=$(this).scrollTop();n=$(document).height(),p=Math.round((i-t)*f),g=Math.round((i-o/2+c-t)*f),"background"==d?"vertical"==h?r.bgVertical(e,p):"horizontal"==h&&r.bgHorizontal(e,p):"foreground"==d&&n>=t&&("vertical"==h?r.vertical(e,g,m):"horizontal"==h&&r.horizontal(e,g,m)),window.requestAnimationFrame(b),a=!0}}).trigger("scroll")})}});

public/site/2015-05/js/main.js

@@ -1,13 +1,13 @@
 $(function() {
-    $("*[data-hero]").hover(function() {
+    /* Hero */
-        let active = this;
+    $("header nav *[data-hero]").hover(function() {
-        $(this).parents("header").addClass( "hero_" + $(this).attr("data-hero") );
+        $(this).parents("header").attr( "data-hero", $(this).attr("data-hero") );
-        $("*[data-hero]").each(function() {
-            if (this != active)
-                $(this).parents("header").removeClass( "hero_" + $(this).attr("data-hero") );
-        });
     });
 
+    /* Paroller */
+    $("*[data-paroller-factor]").paroller();
+
+    /* Widget: Calculator */
     $.each($(".widget_calculator"), function(i, calculator) {
         calculator = $(calculator);
         var display = calculator.find("input[type=text]");