LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Scroll Indicator

An animated scroll button.

robsawyer.me

Content Section

The purpose of this arrow demo is to indicate that there is further content down the page. While studies have generally shown that users do, in fact, scroll (thus killing the worries about page fold), it still has become somewhat fashionable to indicate scroll intent.

A subtle animation triggered after a period of time draws attention to the scroll indicator. Some jQuery hides the indicator after the user begins scrolling.

The CSS

.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:-5em;
  margin-left:-5em;
  background:#111;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 3em 3em 0 3em;
  border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 3em 3em 0 3em;
  border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}
    

Animation

Be sure to use the correct vendor-prefixes

  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }
    

Read more at robsawyer.me

CSS
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height:100%;
}


body {
  margin:0;
  background:#14b5d1;
  font-size:1.3em;
  color:#333;
  font-family:'Open Sans', sans-serif;
}

section {
  float:left;
  width:100%;
  background:#fff;
  position:relative;
  box-shadow:0 0 5px 0px #333;
}


/* the important styles */

.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:-5em;
  margin-left:-5em;
  background:#111;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
  box-shadow:0px 0px 5px 0px #333;
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}


.hint {
  position:absolute;
  top:0.6em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}


.arrow-wrap:hover .hint {
  opacity:1;
}


  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }





/*  this is the unimportant CSS used just to layout the content  */



header {
  float:left;
  width:100%;
  padding:2em 4em;
  color:#fff;
  height:calc(100% - 3em);
}

header h1 {
  margin:0;
}
header h3 {
  margin:0;
  color: #56dcee ;
}

header a {
  color:#56dcee;
  opacity:0.5;
  text-decoration:none;
}

header a:hover {
  color:#333;
  opacity:1;
}


.content {
  float:left;
  width:70%;
  margin:0 15%;
  padding:2em 0;
}

h1 {
  font-family:'Maven Pro', sans-serif;
  font-weight:300;
  font-size:2.4em;
}

h2, h3 {
  font-family:'Maven Pro', sans-serif;
  font-weight:300;
  font-size:1.5em;
  margin-top:2em;
}

pre {
  background:#ededed;
  padding:1em;
}

p {
  color:#555;
  font-size:0.9em;
}

p a {
  color:#14b5d1;
  text-decoration:none;
}
JS
//this is where we apply opacity to the arrow
$(window).scroll( function(){

  //get scroll position
  var topWindow = $(window).scrollTop();
  //multipl by 1.5 so the arrow will become transparent half-way up the page
  var topWindow = topWindow * 1.5;
  
  //get height of window
  var windowHeight = $(window).height();
      
  //set position as percentage of how far the user has scrolled 
  var position = topWindow / windowHeight;
  //invert the percentage
  position = 1 - position;

  //define arrow opacity as based on how far up the page the user has scrolled
  //no scrolling = 1, half-way up the page = 0
  $('.arrow-wrap').css('opacity', position);

});






//Code stolen from css-tricks for smooth scrolling:
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Description

A simple, animated down arrow to indicate scroll intent. More info at robsawyer.me
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv