<div class="container">
    <div class="first">
    	<h1>Scroll the page</h1>
    </div>
   	<div class="row">
   		<div class="col-md-4" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"><img src="https://cdn.dribbble.com/users/69311/screenshots/3439494/easter_1x.jpg"></div>
   		<div class="col-md-4" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"><img src="https://cdn.dribbble.com/users/69311/screenshots/3419656/friday-dribbble_1x.jpg"></div>
   		<div class="col-md-4" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"><img src="https://cdn.dribbble.com/users/69311/screenshots/3411074/cyclist-dribbble_1x.jpg"></div>
   	</div>

   	<div class="row">
   		<div class="col-md-4" data-move-x="-500px" data-rotate="90deg"><img src="https://cdn.dribbble.com/users/69311/screenshots/3439494/easter_1x.jpg"></div>
   		<div class="col-md-4" data-move-y="-500px" data-rotate="90deg"><img src="https://cdn.dribbble.com/users/69311/screenshots/3419656/friday-dribbble_1x.jpg"></div>
   		<div class="col-md-4" data-move-x="500px" data-rotate="-90deg"><img src="https://cdn.dribbble.com/users/69311/screenshots/3411074/cyclist-dribbble_1x.jpg"></div>
   	</div>

   	<div class="row">
   		<div class="col-md-4" data-rotate-y="270deg" data-move-x="-150%"><img src="https://cdn.dribbble.com/users/69311/screenshots/3439494/easter_1x.jpg"></div>
   		<div class="col-md-4" data-rotate-y="270deg" data-move-x="100%"><img src="https://cdn.dribbble.com/users/69311/screenshots/3419656/friday-dribbble_1x.jpg"></div>
   		<div class="col-md-4" data-rotate-y="270deg" data-move-x="150%"><img src="https://cdn.dribbble.com/users/69311/screenshots/3411074/cyclist-dribbble_1x.jpg"></div>
   	</div>

    <div class="row">
   		<div class="col-md-4" data-scale="3" data-skew="90deg,90deg"><img src="https://cdn.dribbble.com/users/69311/screenshots/3439494/easter_1x.jpg"></div>
   		<div class="col-md-4" data-scale="0.2" ><img src="https://cdn.dribbble.com/users/69311/screenshots/3419656/friday-dribbble_1x.jpg"></div>
   		<div class="col-md-4" data-scale="0.2" data-skew="90deg,90deg""><img src="https://cdn.dribbble.com/users/69311/screenshots/3411074/cyclist-dribbble_1x.jpg"></div>
   	</div>
   </div>
.row{
			margin-top: 200px;
			margin-bottom: 300px;
		}
		.first{
			background:url(http://colorlisa.com/pictures/188_1.jpg) center center;
			background-size: cover;
			background-repeat: no-repeat;
			height: 800px;
		}
		h1{
			color: #fff;
			font-size: 5em;
			text-align: center;
			padding-top: 80px;
		}
$('.col-md-4').smoove({
    		offset:'40%'
    	});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.9/jquery.smoove.min.js