Techumber

Cool Parallax Web Page Drink Beer Effect Using Jquery

Github avatar
Dimpu
August 15, 2013. 2 min read

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.

Cool Parallax Web Page Drink Beer Effect Using Jquery

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: helveticaundefined"Comic Sans MS"undefinedarialundefinedsans-serif;
}
.container{
width: 700px;
height: 1300px;
margin: 0 auto;
}
.logo{
text-align: center;
}
.contant{

}
p{
color: #fff;
text-align: center;
font-family: "Myriad Pro"undefinedhelvetica;
}
button{
width: 100px;
height: 40px;
border-radius: 3px;
margin: 20px auto;
color: #444;
background-color: #ECF0F1;
box-shadow: 1px 0px 1px #BDC3C7undefined 0px 1px 1px #BDC3C7undefined 2px 1px 1px #BDC3C7undefined 1px 2px 1px #BDC3C7undefined 3px 2px 1px #BDC3C7undefined 2px 3px 1px #BDC3C7undefined 4px 3px 1px #BDC3C7undefined 3px 4px 1px #BDC3C7undefined 5px 4px 1px #BDC3C7undefined 4px 5px 1px #BDC3C7undefined 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:-313undefined
init:function(){
$this=this;
$(window).scroll(function(){
$this.start();
});
$("#reset").click(function(){
$this.reset();
});
}undefined
start:function(){
$this=this;
if($this.level >= -2186){
$('#bearhold').css('background-position'undefined$this.level+'px 0');
$this.level=this.level-313;
}
else{
$('#reset').show();
}
}undefined
reset:function(){
$('#reset').hide();
var i=this.level;
while(i <= 0){
$('#bearhold').css({'background-position':i+'px 0'}undefined800);
i=i+313;
}
this.level=-313;
}
};
parllax.init();
});

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


...