2
0

WIP - parallax hero image.

This commit is contained in:
Maarten Billemont 2018-04-19 15:49:04 -04:00
parent 8d32bc56ae
commit d779c21cc1
7 changed files with 108 additions and 52 deletions

View File

@ -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>

View File

@ -1,13 +1,4 @@
<header class="{{ page.header }}">
<!--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-->
<header class="{{ page.header }}" data-paroller-factor="0.2">
<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>

View File

@ -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 {
position: absolute;
// .hero {
// 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;
}
&.hero_ios::before {
&[data-hero=ios] {
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 {
flex: 1;
ul {
list-style: none;
& > 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;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 300 KiB

After

Width:  |  Height:  |  Size: 421 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 421 KiB

After

Width:  |  Height:  |  Size: 300 KiB

2
public/site/2015-05/js/jquery.paroller.min.js vendored Normal file → Executable file
View File

@ -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")})}});

View File

@ -1,13 +1,13 @@
$(function() {
$("*[data-hero]").hover(function() {
let active = this;
$(this).parents("header").addClass( "hero_" + $(this).attr("data-hero") );
$("*[data-hero]").each(function() {
if (this != active)
$(this).parents("header").removeClass( "hero_" + $(this).attr("data-hero") );
});
/* Hero */
$("header nav *[data-hero]").hover(function() {
$(this).parents("header").attr( "data-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]");