WIP - parallax hero image.
This commit is contained in:
Maarten Billemont
parent
8d32bc56ae
commit
d779c21cc1
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,18 +235,27 @@ 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;
|
||||
|
||||
|
||||
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
2
public/site/2015-05/js/jquery.paroller.min.js
vendored
Normal file → Executable 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")})}});
|
||||
@ -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]");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user