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 id="scene" class="container-fluid">
  <div id="parallax-1" class="parallax">
    <img class="layer" data-depth="0.7" src="https://static.pexels.com/photos/52559/pexels-photo-52559.jpeg" />
    <img class="layer fog" data-depth="0.85" src="http://www.pngall.com/wp-content/uploads/2017/01/Fog-PNG-HD.png" />
    </div>
    <div class="textContainer layer col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" data-depth="0.3">
      <div id="title">
        EXPLORE
      </div>
      <div id="description">
      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.
<div class="row">
  <a id="button" href="#" class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
  
    Scopri di più
  </a>

</div>
      </div>
      </div>
  </div>

CSS

*{
  font-family: Lato;
}
html, body{
  overflow: hidden;
}
.parallax{
  width: 100vw;
  height: 100vh;
}
.parallax img{
  position: absolute;
  object-fit: cover;
  height: 120vh;
  width: 120vw;
  left: -10vw !important;
  top: -5vw !important;
}
.textContainer{
  padding: 0 !important;
  border: 5px solid white;
  position: absolute;
  top: 25% !important;
  color: white;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}
#title{
  background: white;
  color: black;
  text-align: center;
  width: 100%;
  font-size: 50px;
  font-weight: 100;
}
#description{
  font-size: 16px;
  font-weight: 300;
  padding: 15px;
  background: rgba(0, 0, 0, 0.4);
}
#button{
  margin-top: 50px;
  border: 3px solid white;
  color: white;
  border-radius: 0;
  padding: 10px;
  pointer-events: all;
  text-align: center;
  text-decoration: none;
  transition: .25s all ease-in-out;
}
#button:hover{
  color: black;
  background: white;
}
@-webkit-keyframes tilt {
  0% {
    -webkit-transform: translateX(-10%);
    -moz-transform: translateX(-10%);
    transform: translateX(-10%); }
  100% {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%); } }
.fog{
  width: 150vw !important;
  animation: tilt 15s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

JavaScript

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Parallax=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();var _raf=require("raf");var _raf2=_interopRequireDefault(_raf);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var helpers={propertyCache:{},vendors:[null,["-webkit-","webkit"],["-moz-","Moz"],["-o-","O"],["-ms-","ms"]],clamp:function clamp(value,min,max){return min<max?value<min?min:value>max?max:value:value<max?max:value>min?min:value},data:function data(element,name){return...