Cool Parallax Web Page Drink Beer Effect Using Jquery

Published on August 15, 2013

Parallax web design is a new trend in web development. In this post we have a very simple web page design to understand Parallax desing concept. In general we use Parallax design in single web page designs. In the follwoing example we created a simple beer drink effect using jquery. Logic behid this is not complex. Here, we use sprite image with different bear glasses filled with different levels of beer. When we scroll the web page shows different images.

Demo

Download

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" ></link>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="parllexbeer.js"></script>
</head>
<body>
<div class="container">
<header>
<h1 class="logo">
<a href="//techumber.com">
<img src="../asserts/img/logostd.png" alt="techumber logo" title="techumber logo" />
</a>
</h1>
</header>
<section class="contant">
<p>Scroll Down Slowly to drink beer.</p>
<p>
<button id="reset">Give Me More</button>
</p>
<div id="bearhold"></div>
</section>
</div>
</body>
</html>

Style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  background: #000;
  font-family: helvetica, 'Comic Sans MS', arial, sans-serif;
}
.container {
  width: 700px;
  height: 1300px;
  margin: 0 auto;
}
.logo {
  text-align: center;
}
.contant {
}
p {
  color: #fff;
  text-align: center;
  font-family: 'Myriad Pro', helvetica;
}
button {
  width: 100px;
  height: 40px;
  border-radius: 3px;
  margin: 20px auto;
  color: #444;
  background-color: #ecf0f1;
  box-shadow: 1px 0px 1px #bdc3c7, 0px 1px 1px #bdc3c7, 2px 1px 1px #bdc3c7, 1px 2px 1px #bdc3c7,
    3px 2px 1px #bdc3c7, 2px 3px 1px #bdc3c7, 4px 3px 1px #bdc3c7, 3px 4px 1px #bdc3c7,
    5px 4px 1px #bdc3c7, 4px 5px 1px #bdc3c7, 6px 5px 1px #bdc3c7;
}
#bearhold {
  background: url('beer_sprite.jpg') no-repeat;
  width: 315px;
  height: 600px;
  margin: 0 auto;
}
#reset {
  display: none;
}

parllexbeer.js

$(function() {
  var parllax = {
    level: -313,
    init: function() {
      $this = this;
      $(window).scroll(function() {
        $this.start();
      });
      $('#reset').click(function() {
        $this.reset();
      });
    },
    start: function() {
      $this = this;
      if ($this.level >= -2186) {
        $('#bearhold').css('background-position', $this.level + 'px 0');
        $this.level = this.level - 313;
      } else {
        $('#reset').show();
      }
    },
    reset: function() {
      $('#reset').hide();
      var i = this.level;
      while (i <= 0) {
        $('#bearhold').css({ 'background-position': i + 'px 0' }, 800);
        i = i + 313;
      }
      this.level = -313;
    },
  };
  parllax.init();
});

This simple jquery code change the image background position so that it will create parallax illusion.