<h1 class="arrowD">Scroll Image Reveal (Uses Waypoints.js)</h1>                 
                      
<p>Illo sit scelerisque phasellus reprehenderit accumsan voluptas, aute cursus, nostrum, felis diam hic tincidunt fusce montes auctor, consequatur, illo? Porro! Habitasse habitant potenti pretium? Dolorem voluptate felis neque repudiandae id, facilis ex, dis wisi provident? Reiciendis? Lobortis quis? Explicabo nostrum, ultrices iste ipsa parturient nulla justo eum consectetur consequuntur! Quasi? Imperdiet curabitur pretium eius dignissim eu non purus lorem lorem venenatis. Rhoncus tempore, penatibus! Recusandae quidem, lectus modi repellendus litora sint numquam soluta interdum adipisicing, lobortis, aspernatur eveniet! Commodi deleniti at, culpa harum augue? Ex, cupiditate saepe? Minus pharetra justo? Iure porta vitae laboriosam pede, accumsan, autem blandit saepe quia.</p> 

<p>Quas cubilia nostrud cumque! Praesent eius, wisi minim minus curae, error impedit. Molestias consectetur. Litora orci nunc do nisl mattis pulvinar alias porro commodi. Adipisicing in sequi wisi occaecat minim, nec dapibus aliquip iste blandit class, enim ve niam auctor hic curabi tur augue tempora exercitationem suspendisse! Elementum aliquip perspiciatis, eleife nd nul lam n atus  odio soluta vivamus lectus autem? Voluptas do, animi iaculis ligula aut perspiciatis ma em ultrices numquam. Non autem doloremque ad amet vivamus itaque viverra quas lobortis, distinctio maecenas! Iste dignissimos? Irure fugiat ad praesent, esse repellendus.</p>

<p>Dignissim facilisis adipisci atque perferendis adipiscing aptent, reiciendis, cupiditate metus, occaecati eiusmod. Curabitur, in eleifend natus, occaecati sed facilisi anim. Adipisci, maiores iusto facilisis, ultricies perferendis! Proin velit odio magnam. Anim, consequat, ullamcorper feugiat? Eius pretium enim, venenatis eum incidunt? Quibusdam rhoncus veniam, qui arcu ornare conubia fringilla, do mi? Temporibus consectetuer facilisis fermentum habitant orci aperiam natoque praesentium maiores sapien! Expedita blandit nihil. Incididunt molestie! Corrupti doloribus lorem diam ducimus dolores, morbi facilisis repellat! Eiusmod dolor curae, proin aliquet hac bibendum repellat magnis a dis eveniet nihil incidunt expedita! Maxime ultrices! Consequuntur ipsam! Tempore porro? Tincidunt, quidem felis natoque.</p>

 <h2>Left</h2> 
<div class="box box1 onEnter">     
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/500x200.jpg">                   
</div> 
   
<p>Illo sit scelerisque phasellus reprehenderit accumsan voluptas, aute cursus, nostrum, felis diam hic tincidunt fusce montes auctor, consequatur, illo? Porro! Habitasse habitant potenti pretium? Dolorem voluptate felis neque repudiandae id, facilis ex, dis wisi provident? Reiciendis? Lobortis quis? Explicabo nostrum, ultrices iste ipsa parturient nulla justo eum consectetur consequuntur! Quasi? Imperdiet curabitur pretium eius dignissim eu non purus lorem lorem venenatis. Rhoncus tempore, penatibus! Recusandae quidem, lectus modi repellendus litora sint numquam soluta interdum adipisicing, lobortis, aspernatur eveniet! Commodi deleniti at, culpa harum augue? Ex, cupiditate saepe? Minus pharetra justo? Iure porta vitae laboriosam pede, accumsan, autem blandit saepe quia.</p>

<p>Quas cubilia nostrud cumque! Praesent eius, wisi minim minus curae, error impedit. Molestias consectetur. Litora orci nunc do nisl mattis pulvinar alias porro commodi. Adipisicing in sequi wisi occaecat minim, nec dapibus aliquip iste blandit class, enim veniam auctor hic curabitur augue tempora exercitationem suspendisse! Elementum aliquip perspiciatis, eleifend nullam natus odio soluta vivamus lectus autem? Voluptas do, animi iaculis ligula aut perspiciatis magnam ridiculus, fringilla vel fames placeat sem! Quasi veniam etiam orci reprehenderit, animi doloribus lorem ultrices numquam. Non autem doloremque ad amet vivamus itaque viverra quas lobortis, distinctio maecenas! Iste dignissimos? Irure fugiat ad praesent, esse repellendus.</p>

<p>Dignissim facilisis adipisci atque perferendis adipiscing aptent, reiciendis, cupiditate metus, occaecati eiusmod. Curabitur, in eleifend natus, occaecati sed facilisi anim. Adipisci, maiores iusto facilisis, ultricies perferendis! Proin velit odio magnam. Anim, consequat, ullamcorper feugiat? Eius pretium enim, venenatis eum incidunt? Quibusdam rhoncus veniam, qui arcu ornare conubia fringilla, do mi? Temporibus consectetuer facilisis fermentum habitant orci aperiam natoque praesentium maiores sapien! Expedita blandit nihil. Incididunt molestie! Corrupti doloribus lorem diam ducimus dolores, morbi facilisis repellat! Eiusmod dolor curae, proin aliquet hac bibendum repellat magnis a dis eveniet nihil incidunt expedita! Maxime ultrices! Consequuntur ipsam! Tempore porro? Tincidunt, quidem felis natoque.</p>  

 <h2>Up</h2>
<div class="box box2 onEnter up"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/400x300.jpg"> 
</div> 

<p>Illo sit scelerisque phasellus reprehenderit accumsan voluptas, aute cursus, nostrum, felis diam hic tincidunt fusce montes auctor, consequatur, illo? Porro! Habitasse habitant potenti pretium? Dolorem voluptate felis neque repudiandae id, facilis ex, dis wisi provident? Reiciendis? Lobortis quis? Explicabo nostrum, ultrices iste ipsa parturient nulla justo eum consectetur consequuntur! Quasi? Imperdiet curabitur pretium eius dignissim eu non purus lorem lorem venenatis. Rhoncus tempore, penatibus! Recusandae quidem, lectus modi repellendus litora sint numquam soluta interdum adipisicing, lobortis, aspernatur eveniet! Commodi deleniti at, culpa harum augue? Ex, cupiditate saepe? Minus pharetra justo? Iure porta vitae laboriosam pede, accumsan, autem blandit saepe quia.</p>

<p>Quas cubilia nostrud cumque! Praesent eius, wisi minim minus curae, error impedit. Molestias consectetur. Litora orci nunc do nisl mattis pulvinar alias porro commodi. Adipisicing in sequi wisi occaecat minim, nec dapibus aliquip iste blandit class, enim veniam auctor hic curabitur augue tempora exercitationem suspendisse! Elementum aliquip perspiciatis, eleifend nullam natus odio soluta vivamus lectus autem? Voluptas do, animi iaculis ligula aut perspiciatis magnam ridiculus, fringilla vel fames placeat sem! Quasi veniam etiam orci reprehenderit, animi doloribus lorem ultrices numquam. Non autem doloremque ad amet vivamus itaque viverra quas lobortis, distinctio maecenas! Iste dignissimos? Irure fugiat ad praesent, esse repellendus.</p>

<p>Dignissim facilisis adipisci atque perferendis adipiscing aptent, reiciendis, cupiditate metus, occaecati eiusmod. Curabitur, in eleifend natus, occaecati sed facilisi anim. Adipisci, maiores iusto facilisis, ultricies perferendis! Proin velit odio magnam. Anim, consequat, ullamcorper feugiat? Eius pretium enim, venenatis eum incidunt? Quibusdam rhoncus veniam, qui arcu ornare conubia fringilla, do mi? Temporibus consectetuer facilisis fermentum habitant orci aperiam natoque praesentium maiores sapien! Expedita blandit nihil. Incididunt molestie! Corrupti doloribus lorem diam ducimus dolores, morbi facilisis repellat! Eiusmod dolor curae, proin aliquet hac bibendum repellat magnis a dis eveniet nihil incidunt expedita! Maxime ultrices! Consequuntur ipsam! Tempore porro? Tincidunt, quidem felis natoque.</p>

<h2>Right</h2>
<div class="box box3 onEnter right"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/500x500.jpg">   
</div> 

<p>Illo sit scelerisque phasellus reprehenderit accumsan voluptas, aute cursus, nostrum, felis diam hic tincidunt fusce montes auctor, consequatur, illo? Porro! Habitasse habitant potenti pretium? Dolorem voluptate felis neque repudiandae id, facilis ex, dis wisi provident? Reiciendis? Lobortis quis? Explicabo nostrum, ultrices iste ipsa parturient nulla justo eum consectetur consequuntur! Quasi? Imperdiet curabitur pretium eius dignissim eu non purus lorem lorem venenatis. Rhoncus tempore, penatibus! Recusandae quidem, lectus modi repellendus litora sint numquam soluta interdum adipisicing, lobortis, aspernatur eveniet! Commodi deleniti at, culpa harum augue? Ex, cupiditate saepe? Minus pharetra justo? Iure porta vitae laboriosam pede, accumsan, autem blandit saepe quia.</p>

<p>Quas cubilia nostrud cumque! Praesent eius, wisi minim minus curae, error impedit. Molestias consectetur. Litora orci nunc do nisl mattis pulvinar alias porro commodi. Adipisicing in sequi wisi occaecat minim, nec dapibus aliquip iste blandit class, enim veniam auctor hic curabitur augue tempora exercitationem suspendisse! Elementum aliquip perspiciatis, eleifend nullam natus odio soluta vivamus lectus autem? Voluptas do, animi iaculis ligula aut perspiciatis magnam ridiculus, fringilla vel fames placeat sem! Quasi veniam etiam orci reprehenderit, animi doloribus lorem ultrices numquam. Non autem doloremque ad amet vivamus itaque viverra quas lobortis, distinctio maecenas! Iste dignissimos? Irure fugiat ad praesent, esse repellendus.</p>

<p>Dignissim facilisis adipisci atque perferendis adipiscing aptent, reiciendis, cupiditate metus, occaecati eiusmod. Curabitur, in eleifend natus, occaecati sed facilisi anim. Adipisci, maiores iusto facilisis, ultricies perferendis! Proin velit odio magnam. Anim, consequat, ullamcorper feugiat? Eius pretium enim, venenatis eum incidunt? Quibusdam rhoncus veniam, qui arcu ornare conubia fringilla, do mi? Temporibus consectetuer facilisis fermentum habitant orci aperiam natoque praesentium maiores sapien! Expedita blandit nihil. Incididunt molestie! Corrupti doloribus lorem diam ducimus dolores, morbi facilisis repellat! Eiusmod dolor curae, proin aliquet hac bibendum repellat magnis a dis eveniet nihil incidunt expedita! Maxime ultrices! Consequuntur ipsam! Tempore porro? Tincidunt, quidem felis natoque.</p>


<h2>Down</h2>
<div class="box box4 onEnter down"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/400x500.jpg">   
</div>    
 
<p>Illo sit scelerisque phasellus repre hend erit accu msan vol uptas, aute cursus, nostrum, felis diam hic tincidunt fusce montes auctor, consequatur, illo? Porro! Hab itasse habitant potenti pretium? Dolorem voluptate felis neque repudiandae id, facilis ex, dis wisi provident? Reiciendis? Lobortis quis? Explicabo nostrum, ultrices iste ipsa parturient nulla justo eum consectetur consequuntur! Quasi? Imperdiet curabitur pretium eius dignissim eu non purus lorem lorem venenatis. Rhoncus tempore, penatibus! Recusandae quidem, lectus modi repellendus litora sint numquam soluta interdum adipisicing, lobortis, aspernatur eveniet! Commodi deleniti at, culpa harum augue? Ex, cupiditate saepe? Minus pharetra justo? Iure porta vitae laboriosam pede, accumsan, autem blandit saepe quia.</p>

<p>Quas cubilia nostrud cumque! Praesent eius, wisi minim minus curae, error impedit. Molestias consectetur. Litora orci nunc do nisl mattis pulvinar alias porro commodi. Adipisicing in sequi wisi occaecat minim, nec dapibus aliquip iste blandit class, enim veniam auctor hic curabitur augue tempora exercitationem suspendisse! Elementum aliquip perspiciatis, eleifend nullam natus odio soluta vivamus lectus autem? Voluptas do, animi iaculis ligula aut perspiciatis magnam ridiculus, fringilla vel fames placeat sem! Quasi veniam etiam orci reprehenderit, animi doloribus lorem ultrices numquam. Non autem doloremque ad amet vivamus itaque viverra quas lobortis, distinctio maecenas! Iste dignissimos? Irure fugiat ad praesent, esse repellendus.</p>

<p>Dignissim facilisis adipisci atque perferendis adipiscing aptent, reiciendis, cupiditate metus, occaecati eiusmod. Curabitur, in eleifend natus, occaecati sed facilisi anim. Adipisci, maiores iusto facilisis, ultricies perferendis! Proin velit odio magnam. Anim, consequat, ullamcorper feugiat? Eius pretium enim, venenatis eum incidunt? Quibusdam rhoncus veniam, qui arcu ornare conubia fringilla, do mi? Temporibus consectetuer facilisis fermentum habitant orci aperiam natoque praesentium maiores sapien! Expedita blandit nihil. Incididunt molestie! Corrupti doloribus lorem diam ducimus dolores, morbi facilisis repellat! Eiusmod dolor curae, proin aliquet hac bibendum repellat magnis a dis eveniet nihil incidunt expedita! Maxime ultrices! Consequuntur ipsam! Tempore porro? Tincidunt, quidem felis natoque.</p>


<div class="backToTop btt3"></div>

// Need a height. For A: Waypoints to know when to fire., B: Doesn't push content down
.box1 { 
    height: 200px; 
    max-width: 500px; 
}
.box2 { 
    height: 300px; 
    max-width: 400px; 
}
.box3 { 
    height: 500px; 
    max-width: 500px; 
}
.box4 { 
    height: 400px; 
    max-width: 500px; 
}

.box {
    img { display: block; } // bottom spacing fix
    width: 0;
    margin: 0 0 50px;
    overflow: hidden;
    position: relative;
    // Try variations on these beziers
        transition: 2s cubic-bezier(0.86, 0, 0.07, 1); 
        // transition: 1.5s cubic-bezier(0.86, 0, 0.07, 1);
        // transition: 1.5s ease;
    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: #171717;
        outline: 1px solid #141414;
        // Try variations on the times and easings
            transition: 1.5s 1.1s cubic-bezier(0.77, 0, 0.175, 1); 
            // transition: 1.5s 1.5s cubic-bezier(0.86, 0, 0.07, 1);  
            // transition: 1s 1.5s ease; 
    }
    &.triggered {
        width: 100%; 
        &:before {
            transform: translateX(-100%);
        }
    }
    &.triggered.right {
        &:before {
            transform: translateX(100%);
        }
    }
    &.triggered.up {
        &:before {
            transform: translateY(-100%);
        }
    }
    &.triggered.down {
        &:before {
            transform: translateY(100%);
        }
    }
}


// --------------
// BTT button
// --------------

.backToTop {
  position: fixed;
  cursor: pointer;
  display: block;
  border: none;
  z-index: 999;
  transition: all .3s ease-in-out;
  &:focus {
    outline: 0 !important;
  }
  &:before {
    font-family: "FontAwesome";
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.btt3 {
  opacity: 0;
  height: 50px;
  width: 50px;
  font-size: 56px;
  bottom: 30px;
  font-size: 30px;
  left: initial;
  right: -200px;
  color: #fff;
  border-radius: 0;
  border: 1px solid #333;
    
  &.show {
    opacity: 1;
    color: #333;
    visibility: visible;
    right: 30px;
  }
  &:before {
    content: "\f0d8";
    transform: translateY(-1px);
  }
  &:hover {
    border-radius: 50%;
    color: #999;
    border: 1px solid #777;
    background: rgba(255,255,255, .05);
  }
}


// --------------
// Font Awesome arrow
// --------------

h1 { position: relative; }
h1:before {
    content: "";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #aaa;
    font-size: 38px;
    padding-right: 0.5em;
    position: relative;
    top: 8px;
    margin-left: -55px;
}
.arrowD:before {
    content: "\f063";
}

// --------------
// Decoration
// --------------

html {
    height: 100%;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

h1,
h2,
h3 {
    font-family: 'Crimson Text', sans-serif;
    font-weight: 100;
}

p {
    color: #666;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    background: #111;
    height: 100%;
    color: #aaa;
    padding: 100px 200px;
}

//-------------------------------------------- jQuery Waypoints v2.0.3

$(".onEnter").waypoint(function(){
		$(this).toggleClass('triggered');
	}, { 
		offset: 'bottom-in-view' 
});


//-------------------------------------------- Back To Top button
// Distance from top it appears -
var amountScrolled = 500;
$(window).scroll(function() {
  if ( $(window).scrollTop() > amountScrolled ) {
    $('.backToTop').addClass('show');
  } else {
    $('.backToTop').removeClass('show');
  }
});
$('.backToTop').click(function() {
  $('body,html').animate({
    scrollTop: 0
  }, 1000);
  return false;
});
// Got some more BTT buttons here:
// https://codepen.io/EricPorter/pen/zwQrGg