ahmedam55/index.html

## index.html
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
 <script src="scripts.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
div{
  height:200px;
  overflow:hidden;
  position: relative;
}
img{
  position: absolute;
  bottom:0;
  left:50%
}
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<div>
  <img src="http://www.awwwards.com/awards/gallery/2015/09/6-web-design-trends-awwwards-image05.png" alt="">
</div>
  <div></div>
   <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

   </body>
   </html>

## scripts.js
(function ($) {
    $.fn.parallax = function () {
      var window_width = $(window).width();
      // Parallax Scripts
      return this.each(function(i) {
        var $this = $(this);
        $this.addClass('parallax');
        function updateParallax(initial) {
          var container_height;
          if (window_width < 601) {
            container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
          }
          else {
            container_height = ($this.height() > 0) ? $this.height() : 500;
          }
          var $img = $this.children("img").first();
          var img_height = $img.height();
          var parallax_dist = img_height - container_height;
          var bottom = $this.offset().top + container_height;
          var top = $this.offset().top;
          var scrollTop = $(window).scrollTop();
          var windowHeight = window.innerHeight;
          var windowBottom = scrollTop + windowHeight;
          var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
          var parallax = Math.round((parallax_dist * percentScrolled));
          if (initial) {
            $img.css('display', 'block');
          }
          if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
            $img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
          }
        }
        // Wait for image load
        $this.children("img").one("load", function() {
          updateParallax(true);
        }).each(function() {
          if(this.complete) $(this).load();
        });
        $(window).scroll(function() {
          window_width = $(window).width();
          updateParallax(false);
        });
        $(window).resize(function() {
          window_width = $(window).width();
          updateParallax(false);
        });
      });
    };
}( jQuery ));

$('div').parallax();
	<!DOCTYPE html>
	<html>
	<head>

	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<script src="scripts.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
	div{
	height:200px;
	overflow:hidden;
	position: relative;
	}
	img{
	position: absolute;
	bottom:0;
	left:50%
	}
	</style>
	</head>
	<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div>
	<img src="http://www.awwwards.com/awards/gallery/2015/09/6-web-design-trends-awwwards-image05.png" alt="">
	</div>
	<div></div>
	<div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

	</body>
	</html>
	(function ($) {
	$.fn.parallax = function () {
	var window_width = $(window).width();
	// Parallax Scripts
	return this.each(function(i) {
	var $this = $(this);
	$this.addClass('parallax');
	function updateParallax(initial) {
	var container_height;
	if (window_width < 601) {
	container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
	}
	else {
	container_height = ($this.height() > 0) ? $this.height() : 500;
	}
	var $img = $this.children("img").first();
	var img_height = $img.height();
	var parallax_dist = img_height - container_height;
	var bottom = $this.offset().top + container_height;
	var top = $this.offset().top;
	var scrollTop = $(window).scrollTop();
	var windowHeight = window.innerHeight;
	var windowBottom = scrollTop + windowHeight;
	var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
	var parallax = Math.round((parallax_dist * percentScrolled));
	if (initial) {
	$img.css('display', 'block');
	}
	if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
	$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
	}
	}
	// Wait for image load
	$this.children("img").one("load", function() {
	updateParallax(true);
	}).each(function() {
	if(this.complete) $(this).load();
	});
	$(window).scroll(function() {
	window_width = $(window).width();
	updateParallax(false);
	});
	$(window).resize(function() {
	window_width = $(window).width();
	updateParallax(false);
	});
	});
	};
	}( jQuery ));

	$('div').parallax();