Parallax Template

by Luca De Nardi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<div class="container-fluid">
  <div id="parallax-1" class="parallax">
    <img src="https://static.pexels.com/photos/147485/pexels-photo-147485.jpeg" />
    <div id="title" class="col-xs-12">
    Titolo evento
    </div>
  </div>
  <div id="scroll-down">
  
  </div>
    <div id="body">
    <div class="col-xs-6">
      <h1 class="columnTitle">
      Descrizione
      </h1>
      <hr class="separator" />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam placerat euismod dapibus. Etiam non varius leo. Cras nec lectus id mi egestas ultrices. Aliquam aliquet ultrices augue, non rutrum tellus. Integer euismod libero tellus, id semper lorem tincidunt quis. Proin non leo eros. Nullam sit amet orci non libero viverra euismod. Sed semper egestas erat quis sagittis. Proin facilisis id purus a aliquam. Cras at urna at enim condimentum venenatis sed non risus.

Nunc placerat ipsum vel orci bibendum egestas id eget libero. Pellentesque ac diam at dui vulputate vulputate. Mauris a fringilla ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ligula rutrum, tincidunt quam in, hendrerit velit. Donec tristique odio in pulvinar vestibulum. Aenean porttitor ipsum nec nisl porttitor, pharetra faucibus mauris pharetra. Vestibulum id mi in enim faucibus gravida. Fusce sit amet nulla mi. Sed laoreet vestibulum tellus at congue. Nulla vitae sollicitudin turpis.</div>
    <div class="col-xs-4 col-xs-offset-2">
      <h1 class="columnTitle">
        Contatti
      </h1>
      <hr class="separator" />
      <div class="row">
          <ul>
            <li>Telefono: +39 1234567</li>
            <li>Email: [email protected]</li>
           ...

CSS

html, body{
  width: 100%;
  overflow-x: hidden;
}
.container-fluid{
  padding: 0;
}

.parallax{
  postion: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}
.parallax img{
  height: 110vh;
  width: 110vw;
  position: absolute;
}
#body{
  position: relative;
  height: 100vh;
  z-index: 100;
}

#body{
  background: #FEFEFE;
  padding: 15px;
}
#scroll-down{
  z-index: -1;
  cursor: pointer;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:...

JavaScript

function parallax(){
	$('.parallax').each(function(x, el){
		el = $(el).children('img');
		var height = el.height();
    var scroll = $(window).scrollTop();
    debugger;
		switch(x){
			case 0:{
				el.css('top', el.position().top + (0.75 * scroll - el.offset().top) + "px");
        el.css('filter', 'blur(' + ((scroll - 100) * 5 / height) + 'px)');
        $('#scroll-down')/*.css('opacity', 0.8 - (scroll / height))*/.css('bottom', 25 - (scroll / height * 150) + "px");
			}break;
      case 1:{
      	el.css('top', el.position().top + (0.75 * scroll - el.offset().top * 0.75) + "px");
        el.css('filter', 'blur(' + ((scroll - height * 1.65) * 5 / height) + 'px)')
      }break;
		}
	})
}
$('#scroll-down').click(function(){
	$('html, body').stop().animate({
	  scrollTop: $('#body').offset().top - $('#body').height() / 20
  })
})
$(window).scroll(function(){
	parallax();
})
parallax();