Some js to create a nifty clip rect effect with fixed position text.
A Pen by Stephen Scaff on CodePen.
Some js to create a nifty clip rect effect with fixed position text.
A Pen by Stephen Scaff on CodePen.
<main> | |
<section class="mast"> | |
<figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=1033)"></figure> | |
<header class="mast__header js-clippy"> | |
<h5 class="mast__pretitle">Scroll Fool</h5> | |
<h2 class="mast__title">Let's Get Clippy</h2> | |
<hr class="sep"> | |
</header> | |
</section> | |
<section class="mast"> | |
<figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=1008)"></figure> | |
<header class="mast__header js-clippy"> | |
<h5 class="mast__pretitle">Go On Mon</h5> | |
<h2 class="mast__title">Clip Rect In Effect</h2> | |
<hr class="sep"> | |
</header> | |
</section> | |
<section class="mast"> | |
<figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=945)"></figure> | |
<header class="mast__header js-clippy"> | |
<h5 class="mast__pretitle">We Done Son</h5> | |
<h2 class="mast__title">Getting All Recty</h2> | |
<hr class="sep"> | |
</header> | |
</section> | |
</main> | |
<div class="border-top"></div> | |
<div class="border-left"></div> |
/*--------------------------------------------- | |
Clippy Headings | |
- Creates a scrolling cliprect effect on fixed headings | |
----------------------------------------------*/ | |
(function($) { | |
var s, | |
clippy = { | |
settings: { | |
heading: $('.js-clippy'), | |
}, | |
init: function() { | |
s = this.settings; | |
this.bindEvents(); | |
}, | |
bindEvents: function(){ | |
$(window).on("load resize scroll", $.proxy(this.getClippy, this)); | |
}, | |
getClippy: function(){ | |
s.heading.each(function() { | |
var layerOffset = $(this).closest('article, section').offset(), | |
containerOffset = layerOffset.top - $(window).scrollTop(), | |
clippy = containerOffset - $(this).css("top").replace(/[^-\d\.]/g, '') - $(this).css("margin-top").replace(/[^-\d\.]/g, ''); | |
$(this).css('clip', 'rect('+ clippy +'px, auto, auto, auto)'); | |
}); | |
}, | |
}; | |
clippy.init(); | |
})(jQuery); |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
//---------------------------------------------- | |
// z_index_layers() | |
// @description: Creates increasing z-index layers, needed for clip rect effect | |
//---------------------------------------------- | |
@mixin z_index_layers($layers: 7){ | |
@for $i from 1 through $layers { | |
&:nth-child(#{$i}):not(.site-menu) { | |
z-index: 1 + $i; | |
} | |
} | |
} | |
//---------------------------------------------- | |
// little reset | |
//---------------------------------------------- | |
*, *:before, *:after { | |
box-sizing: border-box; | |
min-width: 0; | |
min-height: 0; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
margin: 0; | |
width: 100%; | |
font-family: "Source Sans Pro"; | |
font-weight: 400; | |
font-style: normal; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
text-rendering: optimizeLegibility; | |
} | |
//---------------------------------------------- | |
// Borders and animation | |
//---------------------------------------------- | |
.border-top { | |
width: 100%; | |
height: 0.75em; | |
top: 0; | |
width: 0; | |
animation: ani-width ease-in-out 0.5s 0s both; | |
&:after { | |
content: ''; | |
bottom: 0; | |
width: 100%; | |
height: 0.75em; | |
right: 0; | |
animation: ani-width ease-in-out 0.5s 1s both; | |
} | |
} | |
.border-left { | |
height: 100%; | |
width: 0.75em; | |
left: 0; | |
bottom: 0; | |
animation: ani-height ease-in-out 0.5s 1.5s both; | |
&:after { | |
content: ''; | |
right: 0; | |
top: 0; | |
height: 100%; | |
width: 0.75em; | |
animation: ani-height ease-in-out 0.5s 0.5s both; | |
} | |
} | |
.border-top, | |
.border-top:after, | |
.border-left, | |
.border-left:after { | |
position: fixed; | |
z-index: 9; | |
background-color: #fff; | |
} | |
h2{ | |
font-family: "Playfair Display"; | |
font-weight: 700; | |
font-size: 1.75em; | |
line-height: 1.2; | |
//font-size: 9vmin; | |
@media (min-width: 32em){ | |
font-size: 4em; | |
} | |
} | |
hr.sep{ | |
border: 0px; | |
height: 1px; | |
background: #fff; | |
margin: 1.4em auto; | |
width: 3em; | |
} | |
//---------------------------------------------- | |
// apply z-index mixin | |
//---------------------------------------------- | |
main > section, main > article{ | |
@include z_index_layers(3); | |
} | |
//---------------------------------------------- | |
// masts | |
//---------------------------------------------- | |
.mast{ | |
position: relative; | |
display:flex; | |
align-items:center; | |
height: 100vh; | |
width: 100%; | |
color: #fff; | |
margin-bottom: 1em; | |
&:after{ | |
content:''; | |
z-index: 0; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.7); | |
} | |
&__bg{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
margin: 0 auto; | |
padding: 0; | |
background-size: cover; | |
background-color: #111; | |
animation: fade-in 1s ease both; | |
} | |
&__header{ | |
z-index: 5; | |
position: fixed; | |
width: 100%; | |
top: 45%; | |
text-align:center; | |
animation: fade-in 2s 1.5s ease both; | |
} | |
&__pretitle{ | |
margin-bottom: 0.5em; | |
font-size: 1em; | |
font-weight: 400; | |
text-transform: uppercase; | |
letter-spacing: 0.15em; | |
} | |
} | |
//---------------------------------------------- | |
// animation: fade-in | |
//---------------------------------------------- | |
@keyframes fade-in{ | |
0%{ | |
opacity:0; | |
} | |
100%{ | |
opacity: 1; | |
} | |
} | |
//---------------------------------------------- | |
// animation: animate border width | |
//---------------------------------------------- | |
@keyframes ani-width { | |
0% { | |
width: 0; | |
} | |
100% { | |
width: 100%; | |
} | |
} | |
//---------------------------------------------- | |
// animation: animate border height | |
//---------------------------------------------- | |
@keyframes ani-height { | |
0% { | |
height: 0; | |
} | |
100% { | |
height: 100%; | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet" /> |