Skip to content

Instantly share code, notes, and snippets.

@Anita-JO

Anita-JO/index.html

Forked from anonymous/index.html
Created October 31, 2017 19:29
Show Gist options
  • Save Anita-JO/852f258dd7fe93cf009420febdfe9173 to your computer and use it in GitHub Desktop.
Save Anita-JO/852f258dd7fe93cf009420febdfe9173 to your computer and use it in GitHub Desktop.
Download ZIP
Scrollspy with animated scroll and focus
Raw
index.html
<body data-spy="scroll" data-target="#scroll-spy">
<!-- Navigation - Fixed Top -->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-home" href="#home" role="button">
<svg class="lnr lnr-home"><use xlink:href="#lnr-home"></use></svg>
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#scroll-spy" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="material-icons">&#xE5D2;</i>
</button>
<!-- <a class="navbar-brand" href="#home">Boom Scroll
<i class="material-icons">mouse</i>
</a> -->
</div>
<!-- Collect the nav links, forms for toggling -->
<div class="collapse navbar-collapse" id="scroll-spy">
<!-- navbar-nav -->
<ul class="nav navbar-nav ">
<li><a href="#about">About</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#howto">How to</a></li>
</ul><!-- /.navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.fixed navigation -->
<section id="home">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="mouse"></div>
<h1>ScrollSpy</h1>
<h4>by Boomer</h4>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
<p>Best implementation of Bootstraps Scroll Spy for animated scrolling and page location</p>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<a class="tutorials-link" href="" role="button">Watch Videos</a>
</div>
</div>
</div><!-- /.container -->
</section><!-- /#home -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="section-header">
About
</div>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
<p>ScrollSpy.js highlights page position by applying an 'active' class to the Navigation link within a Bootstrap nav component. It does this by monitoring the #target element of the nav link within the window, waiting for it to reach a given 'Y' position, usually zero.</p>
<p><highlight>This example</highlight> demonstrates some rich, additional features including <strong>animated scrolling</strong>, <strong>focus events</strong> as well as how to offset with a fixed navigation bar.</p>
<p>It also shows how to ensure that the 'last' #target element is able to scroll to the top for a better user experience (UX)</p>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#about -->
<section id="demo">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="section-header">
Demo
</div>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="video-roll--container col-xs-12">
<ul class="video-roll">
<li><a href="https://youtu.be/kLiMpaMKal8" target="_blank"></a></li>
<li><a href="https://youtu.be/aVFYHGtf6So" target="_blank"></a></li>
<li><a href="https://youtu.be/OKxASY7ABfs" target="_blank"></a></li>
</ul>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12 text-center">
<a class="tutorials-link" href="https://www.youtube.com/channel/UCydykDsTWRIVnxKHW3SHPQA" role="button">Watch Videos</a>
<h4>Check out my YouTube tutorials</h4>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<section id="features">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="section-header">
Features
</div>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="feature-container col-xs-12">
<div class="row">
<div class="feature col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0 text-center">
<svg class="lnr lnr-magic-wand"><use xlink:href="#lnr-magic-wand"></use></svg>
<h4>Animated Scroll</h4>
<p>Smooth, animated scroll between navigation links</p>
</div><!-- /.feature -->
<div class="feature col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 text-center">
<svg class="lnr lnr-map-marker"><use xlink:href="#lnr-map-marker"></use></svg>
<h4>Page Location</h4>
<p>Track page locations when scrolling</p>
</div><!-- /.feature -->
<div class="feature col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0 text-center">
<svg class="lnr lnr-bullhorn"><use xlink:href="#lnr-bullhorn"></use></svg>
<h4>Focus Events</h4>
<p>Draw user attention to navigated sections</p>
</div><!-- /.feature -->
</div><!-- /.row -->
</div><!-- /.feature-container -->
</div><!-- /.row -->
</div><!-- /.container -->
<div class="container-fluid">
<div class="banner row">
<div class="banner-child bc-left col-sm-6">
<div class="section-sub-header">
Animated Scroll
</div>
<div class="animated-scroll">
<div class="scroll-header">
<div class="scroll-nav sn-1"></div>
<div class="scroll-nav sn-2"></div>
<div class="scroll-nav sn-3"></div>
<svg class="cursor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><path d="M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"/></svg>
</div><!-- /.scroll-header -->
<div class="scroll-body">
<div class="scroll-child sc-1"></div>
<div class="scroll-child sc-2"></div>
<div class="scroll-child sc-3"></div>
<div class="scroll-child sc-back-to-top"></div>
</div><!-- /.scroll-body -->
</div><!-- /.animated scroll -->
</div><!-- /.banner-child -->
<div class="banner-child bc-right col-sm-6">
<div class="section-sub-header">
Focus Events | UX
</div>
<div class="focus-events">
<div class="scroll-header">
<div class="scroll-nav sn-1"></div>
<div class="scroll-nav sn-2"></div>
<svg class="cursor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve"><path d="M7,2l12,11.2l-5.8,0.5l3.3,7.3l-2.2,1l-3.2-7.4L7,18.5V2"/></svg>
</div><!-- /.scroll-header -->
<div class="scroll-body">
<div class="scroll-child sc-1">
<div class="header"></div>
<div class="sub-header"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
</div>
<div class="scroll-child sc-2">
<div class="header"></div>
<div class="sub-header"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
</div>
</div><!-- /.scroll-body -->
</div><!-- /.animated scroll -->
</div><!-- /.banner-child -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</section><!-- /#features -->
<section id="howto">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="section-header">
How To
</div>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<div class="section-sub-header">
Offest a Fixed Navbar
</div>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body</span> <span class="na">data-spy=</span><span class="s">"scroll"</span> <span class="na">data-target=</span><span class="s">"#navbar-example"</span> <span class="na">data-offset=</span><span class="s">"70"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/body&gt;</span></code></pre>
</figure>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span>
<span class="na">offset</span><span class="p">:</span> <span class="s1">offsetHeight</span> <span class="c1">/*A numeric representing pixel count*/</span>
<span class="p">})</span></code></pre>
</figure>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<div class="section-sub-header">
Ensure last #target scrolls to top
</div>
<p>A common problem I see with scrollspy implementations is when the last navigation target doesn't navigation to the top of the screen. This causes issues for scrollspy as well as confusing the user if the target they clicked is half way down the page.</p>
<p>The problem is simple, the document isn't long enough to allow it to scroll to the top.</p>
<p>A simple solution is to dynamically add padding-bottom to the body via JQuery, which increases the height to the pixel perfect minimum. We need to do this both at render/page load and if the window is resized. The below code is a simplified and calculates the height of all sibling elements (after the target) to calculate</p>
</div><!-- /.col -->
</div><!-- /.row -->
<div class="row">
<div class="col-xs-12">
<figure class="highlight"><pre><code class="language-js" data-lang="js">
<span class="kd">var</span> <span class="vg">height</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#targetId'</span><span class="p">).</span><span class="nx">innerHeight</span><span class="p">(</span><span class="p">)</span>
<span class="kd">var</span> <span class="vg">windowHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">window</span><span class="p">).</span><span class="nx">height</span><span class="p">(</span><span class="p">)</span>
<span class="kd">var</span> <span class="vg">navHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'nav.navbar'</span><span class="p">).</span><span class="nx">innerHeight</span><span class="p">(</span><span class="p">)</span>
<span class="kd">var</span> <span class="vg">siblingHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#targetId'</span><span class="p">).</span><span class="nx">nextAll</span><span class="p">(</span><span class="p">).</span><span class="nx">innherHeight</span><span class="p">(</span><span class="p">)</span>
<span class="nx">if</span><span class="p">(</span><span class="nx">height </span><span class="nx">&lt;</span><span class="nx"> windowHeight</span><span class="p">)</span><span class="p">(</span><span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="na">"padding-bottom"</span><span class="p">,</span> <span class="nx">windowHeight</span><span class="p">-</span><span class="nx">navHeight</span><span class="p">-</span><span class="nx">height</span><span class="p">-</span><span class="nx">siblingHeight</span> <span class="p">+</span> <span class="p">"</span><span class="s1">px</span><span class="p">"</span><span class="p">)</span>
<span class="p">}</span>
</code></pre>
</figure>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4>
This is a footer
</h4>
</div>
</div>
</div>
</footer>
<a href="#home" role="button" class="scrollTop">
<svg class="lnr lnr-chevron-up"><use xlink:href="#lnr-chevron-up"></use></svg>
</a>
</body>
Raw
script.js
$(document).ready(function(){
// Scrollspy initiation
$('body').scrollspy({
target: '#scroll-spy',
offset: 70
});
// On render, adjust body padding to ensure last Scroll target can reach top of screen
var height = $('#howto').innerHeight();
var windowHeight = $(window).height();
var navHeight = $('nav.navbar').innerHeight();
var siblingHeight = $('#howto').nextAll().innerHeight();
if(height < windowHeight){
$('body').css("padding-bottom", windowHeight-navHeight-height-siblingHeight + "px");
}
// On window resize, adjust body padding to ensure last Scroll target can reach top of screen
$(window).resize(function(event){
var height = $('#howto').innerHeight();
var windowHeight = $(window).height();
var navHeight = $('nav.navbar').innerHeight();
var siblingHeight = $('#howto').nextAll().innerHeight();
if(height < windowHeight){
$('body').css("padding-bottom", windowHeight-navHeight-height-siblingHeight + "px");
}
});
$('nav.navbar a, .scrollTop').click(function(event){
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Ensure no section has relevant class
$('section').removeClass("focus");
// Add class to target
$(hash).addClass("focus");
// Remove thy class after timeout
setTimeout(function(){
$(hash).removeClass("focus");
}, 2000);
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top - 69
}, 600, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
// Collapse Navbar for mobile view
$(".navbar-collapse").collapse('hide');
}
});
$(window).scroll(function(){
var scrollPos = $('body').scrollTop();
if(scrollPos > 0){
$('.navbar').addClass('show-color');
$('.scrollTop').addClass('show-button');
} else{
$('.navbar').removeClass('show-color');
$('.scrollTop').removeClass('show-button');
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
scrollspy-with-animated-scroll-and-focus.markdown

Scrollspy with animated scroll and focus

#WIP - Building a fake landing page

Fixed Header using Bootstraps Scrollspy with animated scroll and a focus class assigned by JQuery. A setTimeout function removes the focus class from the target element after x seconds, allowing you to apply CSS styles to focus the users attention on as desired.

Focus class only fires when a navigation link is clicked as a user is 'generally' aware of where they're scrolling. As soon as you scroll for them, that's when you need a focus class.

The CSS :target selector isn't approriate here, as you'll see in the JS, the script I referenced from CSS Tricks essentially hijack the :target, as does any offset or animated scrolling. Thus, generally speaking, the :target selector is not good for a landing page section scroller like this one.

P.S I use a container in each section for landing pages as gives more flexibility.

A Pen by Boomer on CodePen.

License.

Raw
style.sass
// Variables ==========================
$font-family: "Open Sans", Helvetica, Arial, sans-serif
$primary: #907dda
$primary-dark: darken(#907dda,4%)
$accent: #e5e4ea
$font-light: #e7e6f1
$font-dark: #333
$grey: #BDC4D0
$background-light: #F3F4F8
$background-dark: #2F3032
$border-light: darken($background-light, 2%)
$border-dark: darken($background-dark, 2%)
// Mixins =============================
=absolute($top, $left, $right, $bottom)
position: absolute
top: $top
left: $left
right: $right
bottom: $bottom
=translate($x,$y)
-webkit-transform: translate($x,$y)
-webkit-transform: translate3d($x,$y,0)
-ms-transform: translate($x,$y)
-ms-transform: translate3d($x,$y,0)
transform: translate($x,$y)
transform: translate3d($x,$y,0)
// Base ===============================
div,h1,h2,h3,h4,h5,h6,p
font-family: $font-family
html
height: 100%
font:
size: 14px
@media (min-width: 768px)
font:
size: 16px
body
position: relative
min-height: 100%
background: $background-dark
box-shadow: inset 0 0 200px rgba(0,0,0,0.1), inset 0 0 20px rgba(0,0,0,0.08)
// prevent margin collapse
h1,h2,h3,h4,h5,h6
margin-top: 0
h1
font:
size: 2rem
weight: 300
line-height: 2.5rem
letter-spacing: 4px
@media (min-width: 768px)
font:
size: 2.375rem
line-height: 2.75rem
p
margin-bottom: 20px
font:
size: 1rem
weight: 300
letter-spacing: 0.5px
line-height: 1.6rem
highlight
font:
weight: 600
// size: 1.2rem
color: $primary
&:last-child
margin-bottom: 0
code
font:
size: 0.875rem
// Styles ================================
nav.navbar
height: 70px
background: transparent
border: none
transition: background-color 0.3s
will-change: transform
// Class based state
&.show-color
background: white
box-shadow: 0px 6px 16px -2px rgba(0,0,0,0.3)
.navbar-home
visibility: visible
+translate(100%,0)
opacity: 1
.navbar-home
visibility: hidden
display: flex
flex:
direction: column
align-items: center
justify-content: center
+absolute(0px,0px,null,null)
height: 70px
width: 10%
+translate(100%,-50%)
transition: transform 0.2s ease-in, opacity 0.2s ease-in, visibilit 0.2s ease-in
opacity: 0
svg
width: 20px
height: 20px
fill: $grey
.navbar-brand
position: relative
height: 70px
padding: 0 28px 0 15px
padding: 0 28px 0 45px
font:
size: 20px
weight: 300
line-height: 80px
letter-spacing: 1px
color: $font-light
vertical-align: middle
// Pseudo Elements --------
&:before
display: block
content: ''
+absolute(50%,0,null,null)
height: 44px
width: 28px
background: none
border: 2px solid white
border-radius: 16px
+translate(0,-50%)
// CSS States ======
&:hover, &:focus
color: white
i.material-icons
position: absolute
top: 50%
right: 0
transform: translate(0,-50%)
.navbar-toggle
height: 70px
margin: 0
padding: 0 20px
color: white
border: none
&.collapsed
color: $font-light
.navbar-collapse
@media (max-width: 767px)
background: $accent
ul.navbar-nav
color: $font-dark
@media (min-width: 768px)
display: flex
flex:
direction: row
align-items: center
justify-content: center
float: none
text-align: center
color: $grey
> li
@media (min-width: 768px)
float: none
display: inline-block
> a
padding: 0 20px
font:
size: 14px
weight: 400
text:
transform: uppercase
line-height: 70px
letter-spacing: 1px
color: currentColor
// CSS States ========
&:hover
background: rgba(0,0,0,0.15)
&:focus
background: rgba(0,0,0,0.20)
> li.active
@media (max-width: 767px)
background: rgba(0,0,0,0.10)
@media (min-width: 768px)
color: $primary
background: rgba(255,255,255,0.15)
box-shadow: inset 0 -3px 0 0 $primary
> a
// CSS States ========
&:hover, &:focus
background: none
section
position: relative
// min-height: 80vh
padding: 30px 0 50px
background: white
&:last-of-type
min-height: 20vh
&.focus
.page-header
color: $primary
&:after
visibility: visible
opacity: 1
.section-header
position: relative
margin-bottom: 40px
font:
size: 26px
weight: 400
color: #333
text:
align: center
line-height: 60px
letter-spacing: 1px
&:after
content: ''
display: block
+absolute(null,50%,null,0)
width: 70px
height: 2px
background: $primary
+translate(-50%,0)
.section-sub-header
position: relative
margin-bottom: 40px
font:
size: 22px
weight: 300
text:
align: center
line-height: 60px
letter-spacing: 1px
.banner
.banner-child
padding: 25px 15px
height: 500px
.bc-left
color: $font-light
background: $primary
.bc-right
color: $font-dark
background: $background-light
.page-header
position: relative
margin-top: 0
margin-bottom: 50px
letter-spacing: 1px
color: $font-dark
transition: color 0.2s ease-in
// CSS Pseudo elements ==========
&:after
visibility: hidden
display: block
content: "Boom!!! got your focus now ay :-)"
position: absolute
top: 100%
padding-top: 25px
font:
size: 16px
transition: opacity 0.2s ease-in, visibility 0.2s ease-in
opacity: 0
footer
min-height: 240px
position: relative
padding: 50px 0 150px
font:
size: 22px
text:
align: center
letter-spacing: 1px
color: $font-light
background: $background-dark
a.tutorials-link
display: block
position: relative
width: 180px
margin: 0 auto 25px
padding: 15px 0
font:
size: 0.875rem
weight: 600
text:
align: center
transform: uppercase
decoration: none
letter-spacing: 2px
color: $primary
border: 2px solid $primary
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease
// CSS state ----
&:hover
color: $font-light
background: $primary
box-shadow: 0 6px 12px -4px rgba(0,0,0,0.3)
.scrollTop
display: flex
flex:
direction: column
align-items: center
justify-content: center
position: fixed
right: 20px
bottom: 20px
width: 44px
height: 44px
text:
decoration: none
padding: 0
color: $font-light
background: $primary
border: none
border-radius: 100%
box-shadow: 2px 2px 12px rgba(0,0,0,0.2)
+translate(0,80px)
transition: transform 0.2s ease-in
opacity: 0.7
&:hover
color: $font-light
opacity: 1
&.show-button
+translate(0,0)
svg
width: 20px
height: 20px
fill: currentColor
#home
display: flex
flex:
direction: column
align-items: center
justify-content: center
position: relative
min-height: 400px
height: 60vh
padding: 50px 0
// Media queries ----
@media (min-width: 768px)
height: 80vh
min-height: 640px
&:before
content: ''
display: block
position: fixed
top: 0
left: 0
width: 100%
min-height: 400px
height: 60vh
background:
image: url('https://hd.unsplash.com/photo-1457365050282-c53d772ef8b2') //Old version backup
image: url('https://images.unsplash.com/photo-1457365050282-c53d772ef8b2')
size: cover
position: center bottom
will-change: transform
z-index: 0
// Media queries ----
@media (min-width: 768px)
height: 80vh
min-height: 640px
// Pseudos ----
&:after
content: ''
display: block
+absolute(0,0,0,0)
background:
image: radial-gradient(transparent, rgba(0,0,0,0.4))
z-index: 0
/* Layering due to Psuedo overlay */
.container
z-index: 1
.mouse
position: relative
width: calc(28px * 2)
height: calc(44px * 2)
margin: 0 auto 20px
background: none
border: 2px solid white
border-radius: calc(16px * 2)
z-index: 1
// Media queries ----
@media (min-width: 768px)
width: calc(28px * 4)
height: calc(44px * 4)
margin: 0 auto 30px
background: none
border: 2px solid white
border-radius: calc(16px * 4)
&:after
display: block
content: ''
+absolute(10px,50%,null,null)
width: calc(5px * 2)
height: calc(5px * 2)
background: none
border: 2px solid white
border-radius: 100%
animation:
name: scrollWheel
duration: 1.4s
fill-mode: forwards
iteration-count: infinite
timing-function: ease
will-change: transform
// Media queries ----
@media (min-width: 768px)
+absolute(25px,50%,null,null)
width: calc(5px * 4)
height: calc(5px * 4)
h1
text:
align: center
shadow: 0px 0px 20px rgba(0,0,0,0.5)
color: $font-light
h4
font:
size: 14px
weight: 600
text:
align: center
transform: uppercase
shadow: 0px 0px 20px rgba(0,0,0,0.5)
letter-spacing: 2px
color: $primary
p
margin: 0
padding: 25px 0
text:
align: center
shadow: 0px 0px 40px rgba(0,0,0,0.5), 1px 1px 3px rgba(0,0,0,0.3)
line-height: 26px
color: $font-light
#about
p
text:
align: center
color: #333
#demo
background: $background-light
h4
margin-bottom: 20px
margin-bottom: 0px
font:
size: 0.875rem
weight: 400
text:
transform: uppercase
line-height: 24px
letter-spacing: 1px
color: $grey
.video-roll--container
padding: 0
@media (min-width: 768px)
padding: 0 15px
.video-roll
display: flex
flex:
direction: row
wrap: wrap
align-items: center
position: relative
width: 100%
max-width: 1000px
// height: 240px
margin: 0 auto 80px
padding: 25px 0 0
list-style: none
@media (min-width: 768px)
margin: 0 auto 120px
// Pseudo -------
&:after
content: ''
display: block
width: 30%
height: 14px
margin: -90px auto 0
margin: -20px auto 0
background: transparent
border-radius: 50%
box-shadow: 0 50px 40px rgba(0,0,0,0.4)
@media (min-width: 768px)
margin: 0px auto 0
li
display: flex
flex:
direction: column
grow: 0
shrink: 1
align-items: stretch
align-content: stretch
position: relative
background: transparent
// Pseudo -------------
&:before
content: ''
display: block
padding-top: 56.25%
&:after
content: ''
display: block
+absolute(null,50%,null,0px)
width: 60%
height: 14px
margin: -90px auto 0
background: transparent
border-radius: 50%
box-shadow: 0 50px 40px rgba(0,0,0,0.25)
+translate(-50%,0)
// nth Child -----------
&:first-child
visibility: hidden
flex:
basis: 10%
+translate(50%,0)
opacity: 0
@media (min-width: 768px)
visibility: visible
flex:
basis: 30%
opacity: 1
a
background:
image: url('https://i.ytimg.com/vi/kLiMpaMKal8/maxresdefault.jpg')
transform-origin: left center
&:nth-child(2)
flex:
basis: 80%
z-index: 2
@media (min-width: 768px)
flex:
basis: 40%
&:after
display: none
a
flex:
grow: 1
background:
image: url('https://i.ytimg.com/vi/aVFYHGtf6So/maxresdefault.jpg')
transform-origin: center center
&:last-child
visibility: hidden
flex:
basis: 10%
+translate(-50%,0)
opacity: 0
@media (min-width: 768px)
visibility: visible
flex:
basis: 30%
opacity: 1
a
background:
image: url('https://i.ytimg.com/vi/OKxASY7ABfs/maxresdefault.jpg')
transform-origin: right center
a
+absolute(0,0,0,0)
background:
// image: url('https://i.ytimg.com/vi/kLiMpaMKal8/maxresdefault.jpg')
size: cover
position: center center
// box-shadow: 0px 6px 10px -2px rgba(0,0,0,0.2)
+translate(0,0)
transition: transform 0.2s ease-out
will-change: transform
&:hover
+translate(0,-4px)
#features
padding-bottom: 0
color: #333
.feature-container
margin-bottom: 80px
@media (min-width: 768px)
margin-bottom: 80px
.feature
padding: 25px 0
@media (min-width: 768px)
padding: 50px 0
svg
width: 40px
height: 40px
margin-bottom: 15px
fill: currentColor
@media (min-width: 768px)
width: 60px
height: 60px
h4
font:
size: 14px
weight: 600
text:
transform: uppercase
line-height: 24px
letter-spacing: 2px
color: $primary
p
font:
size: 14px
weight: 300
color: $grey
letter-spacing: 1px
.animated-scroll
display: flex
flex:
direction: column
position: relative
width: 80%
max-width: 450px
height: 315px
margin: 0 auto
border: 4px solid $primary-dark
border-bottom-color: transparent
border-radius: 6px
overflow: hidden
.scroll-header
display: flex
flex:
direction: row
grow: 0
shrink: 0
basis: 60px
align-items: center
justify-content: center
background: $primary-dark
.scroll-nav
width: 15%
height: 8px
margin-right: 5%
border-radius: 4px
.sn-1
animation:
name: scrollColor-1
iteration-count: infinite
timing-function: linear
duration: 5s
// direction: alternate
fill-mode: forwards
.sn-2
animation:
name: scrollColor-2
iteration-count: infinite
timing-function: linear
duration: 5s
// direction: alternate
fill-mode: forwards
.sn-3
margin-right: 0
animation:
name: scrollColor-3
iteration-count: infinite
timing-function: linear
duration: 5s
// direction: alternate
fill-mode: forwards
svg.cursor
+absolute(28px,50%,null,null)
width: 20%
height: 20px
animation:
name: scrollCursor
iteration-count: infinite
timing-function: linear
duration: 5s
fill-mode: forwards
z-index: 2
.scroll-body
display: flex
flex:
direction: column
grow: 1
shrink: 1
basis: auto
padding-top: 20px
overflow: hidden
.scroll-child
flex:
grow: 0
shrink: 0
basis: 150px
width: 90%
margin: 0 auto 20px
fill: lighten($font-dark, 5%)
background: rgba(255,255,255,0.2)
border-radius: 4px
animation:
name: scrollDemo
iteration-count: infinite
timing-function: linear
duration: 5s
fill-mode: forwards
.sc-back-to-top
flex:
basis: 40px
width: 40px
margin: 0 auto
border-radius: 100%
animation:
name: scrollBackToTop
iteration-count: infinite
timing-function: linear
duration: 5s
fill-mode: forwards
z-index: 0
.focus-events
display: flex
flex:
direction: column
position: relative
width: 80%
max-width: 450px
height: 315px
margin: 0 auto
border: 4px solid darken($background-light, 4%)
border-bottom-color: transparent
border-radius: 6px
overflow: hidden
.scroll-header
display: flex
flex:
direction: row
grow: 0
shrink: 0
basis: 60px
align-items: center
justify-content: center
background: darken($background-light, 4%)
.scroll-nav
width: 15%
height: 8px
margin-right: 5%
border-radius: 4px
// background: darken($background-light, 12%)
.sn-1
animation:
name: focusColor-1
iteration-count: infinite
timing-function: linear
duration: 4s
fill-mode: forwards
.sn-2
animation:
name: focusColor-2
iteration-count: infinite
timing-function: linear
duration: 4s
fill-mode: forwards
svg.cursor
+absolute(28px,50%,null,null)
width: 20%
height: 20px
animation:
name: focusCursor
iteration-count: infinite
timing-function: linear
duration: 4s
fill-mode: forwards
z-index: 2
.scroll-body
display: flex
flex:
direction: column
grow: 1
shrink: 1
basis: auto
padding-top: 20px
overflow: hidden
.scroll-child
flex:
grow: 0
shrink: 0
basis: 150px
width: 90%
margin: 0 auto 20px
padding: 10% 5%
background: rgba(0,0,0,0.05)
background: darken($background-light, 2%)
border-radius: 4px
animation:
name: focusDemo
iteration-count: infinite
timing-function: ease-in
duration: 4s
fill-mode: forwards
.header
height: 14px
width: 50%
margin: 0 auto 8px
border-radius: 8px
background: darken($background-light, 7%)
.sub-header
height: 10px
width: 40%
margin: 0 auto 22px
border-radius: 6px
background: darken($background-light, 5%)
.body
width: 70%
height: 8px
margin: 0 auto 8px
background: darken($background-light, 6%)
.sc-2
.header
animation:
name: focusHeaderColor
iteration-count: infinite
timing-function: linear
duration: 4s
fill-mode: forwards
#howto
@keyframes scrollWheel
from
+translate(-50%,0)
opacity: 1
to
+translate(-50%,20px)
opacity: 0
@media (min-width: 768px)
from
+translate(-50%,0)
opacity: 1
to
+translate(-50%,40px)
opacity: 0
@keyframes scrollDemo
from, 30%
+translate(0,0px)
40%, 60%
+translate(0,-170px)
70%, 90%
+translate(0,-340px)
to
+translate(0,0px)
@keyframes scrollColor-1
from, 39.9%
background: rgba(255,255,255,0.7)
40%, to
background: $primary
@keyframes scrollColor-2
from, 24%
background: $primary
24.2%, 28%
background: lighten($primary, 10%)
28.2%, 39.9%
background: $primary
40%, 69.9%
background: rgba(255,255,255,0.7)
70%, to
background: $primary
@keyframes scrollColor-3
from, 53.8%
background: $primary
54%, 57.8%
background: lighten($primary, 10%)
58%, 69.9%
background: $primary
70%, 99.9%
background: rgba(255,255,255,0.7)
to
background: $primary
@keyframes scrollBackToTop
from, 30%
+translate(0,0px)
background: rgba(255,255,255,0.2)
40%, 60%
+translate(0,-170px)
70%, 90%
+translate(0,-340px)
84.8%
background: rgba(255,255,255,0.2)
85%, 88.8%
background: rgba(255,255,255,0.5)
89%
background: rgba(255,255,255,0.2)
to
+translate(0,0px)
background: rgba(255,255,255,0.2)
@keyframes scrollCursor
from
+translate(-50%, 236px)
15%, 30%
+translate(-50%,0)
35%, 65%
+translate(50%,0)
78%, to
+translate(-50%, 236px)
@keyframes focusDemo
from, 30%
+translate(0,0px)
40%, to
+translate(0,-170px)
@keyframes focusColor-1
from, 39.9%
background: darken($background-light,10%)
40%, to
background: $background-light
@keyframes focusColor-2
from, 24%
background: $background-light
24.2%, 28%
background: darken($background-light,7%)
28.2%, 40%
background: $background-light
40.1%, to
background: darken($background-light,10%)
@keyframes focusHeaderColor
from, 40%
background: darken($background-light, 7%)
40.2%, 70%
background: $primary
75%, to
background: darken($background-light, 7%)
@keyframes focusCursor
from
+translate(-50%, 200px)
opacity: 0
10%
opacity: 1
15%, 30%
opacity: 1
+translate(-10%, 0)
45%, to
opacity: 0
.highlight
padding: 9px 14px
margin-bottom: 14px
background-color: #f7f7f9
border: 1px solid #e1e1e8
border-radius: 4px
.highlight pre
padding: 0
margin-top: 0
margin-bottom: 0
word-break: normal
white-space: nowrap
background-color: transparent
border: 0
.highlight pre code
font-size: inherit
color: #333 /* Effectively the base text color */
.highlight pre code:first-child
display: inline-block
padding-right: 45px
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://codepen.io/CodeBoomer/pen/PzgWYp" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment