Scroll indicator

Pure CSS

by MvVijfeijken

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Scroll indicator</title>
 
<!--[if lt IE 9]>
   <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
<body>
  <div class="wrapper">
    <main>
      <div class="content">
        <h1>Scroll indicator</h1>
        <h2>Geeft de positie op de  pagina aan (bv. voor leestijd)</h2>
        <p class="lead">
         <span>Het resultaat is een soort voortgangsindicator waardoor je als bezoekers weet hoe ver je bent met het lezen van de pagina.</span>
        </p>

        <div class="scroll-indicator-icon">
          <span class="fa fa-chevron-down"></span>
        </div>
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

        <h2>Header Level 2</h2>
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non...

CSS

body {
  padding: 0;
  margin: 0;
  font-size: calc(16px + 1vw);
  line-height: calc(1.1em + 0.5vw); }
  body .wrapper {
    border: 1px solid #eee;
    border-width: 0 1px;
    margin: 0em 5em;
    padding: 1em 0; }

@supports (height: 100vh) {
  body {
    background: linear-gradient(to right top, #0089f2 50%, #fff 50%);
    background-size: 100% calc(100% - 100vh);
    background-position: 0 5px;
    background-repeat: no-repeat; }

  body:before {
    content: "";
    position: fixed;
    top: 5px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white; } }
h1 {
  font-size: calc(20px + 1.5vw);
  line-height: calc(1.0em + 0.5vw); }

h2 {
  font-size: 1.2em; }

h3 {
  font-size: 1em; }

.lead {
  font-size: calc(18px + 1vw);
  display: inline;
  line-height: calc(1.2em + 1vw); }
  .lead span {
    padding: 0em;
    box-shadow: -0.2em 0 0 rgba(182, 211, 255, 0.5), 0.2em 0 0 rgba(182, 211, 255, 0.5);
    background-color: rgba(182, 211, 255, 0.5);
    border-bottom: 1px solid rgba(182, 211, 255, 0.9);
    box-decoration-break: clone; }

@media (min-width: 50em) {
  h1 {
    font-size: 50px; } }
.scroll-indicator-icon {
  position: relative;
  height: 1.6em; }
  .scroll-indicator-icon span {
    display: block;
    position: absolute;
    left: 50%;
    font-size: 30px;
    color: orangered;
    -webkit-animation: bounce 1s infinite;
    animation: bounce 1s infinite; }

@-webkit-keyframes bounce {
  0% {
    top: 15%; }
  50% {
    top: 50%; }
  100% {
    top: 15%; } }
@keyframes bounce {
  0% {
    top: 15%; }
  50% {
    top: 50%; }
  100% {
    top: 15%; } }