Animated Landscape Using CSS and jQuery

After the launch of jQuery many web designer who face problem with javascript now moved to jQuery because of vast range of various effect support from jQuery including its compatibility with different website hosting. Jquery is one of the leading JavaScript framework available now. Just a basic of javascript is required to start using jQuery and implementing some great effect with little knowledge. Since some weeks we are writing jquery tutorials for our readers and today we created this beautiful tutorial and in the end of this tutorial we will learn to Create Animated Landscape using CSS and Jquery. So lets start learning it.

CHECK OUT DEMO

STEP 1 : ORGANIZE FILES

First of all we need to setup all our files which required in this tutorial, create one HTML file, CSS file and image folder which holds all our images

STEP 2 : HTML DOCUMENT

Here we need to write our html document first, which contains wrapper with fixed height and width and within it one container which holds all the elements of our page. Check out the code below

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png" alt="" /></div>
<div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
<div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
<div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>

Final HTML Code

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png" alt="" /></div>
<div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
<div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
<div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>


STEP 3 : CSS STYLING

Now some css styling is required. Important thing to keep in mind is to have overlay hidden for container(#inner) and position absolute for all the moving images. Here we will keep our moving images like clouds and boat out of the container with the help of negative left and right margin so that while using jquery we would have a nice effect. Check out the below CSS codes.

#wrapper {
    width:800px;
    height:600px;
       /* main background image with sky, sun, river and ground */
    background-image:url(images/Untitled-3.jpg);
    background-repeat:no-repeat;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
    border: 10px solid #666;
}
#inner {
    position:relative;
    overflow:hidden;
    width:800px;
    height:600px;
    margin:0px;
}
#cloudone {
    position:absolute;
    margin-top:2px;
    margin-left:-200px;
    filter:alpha(opacity=80);
  /* CSS3 standard */
        opacity:0.8;
}
#cloudtwo {
    position:absolute;
    margin-top:80px;
    margin-left:-300px;
    filter:alpha(opacity=60);
  /* CSS3 standard */
        opacity:0.6;
}
#cloudthree {
    position:absolute;
    margin-top:60px;
    margin-left:-600px;
    filter:alpha(opacity=70);
  /* CSS3 standard */
        opacity:0.7;
}
#boat {
    margin-top:360px;
    position:absolute;
    margin-left:800px;

STEP 4 : JQUERY

First of all we need to tag below lines to the head of our html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="landscape.js" type="text/javascript"><!--mce:1--></script>

Here we will using double animate function to animate clouds and boat. And to rotate clouds and boat will create one function to do this job. Check out below codes first.

Prepare yourself for world Top IT Certification with Selftest Engine, outstanding exam practice software

provide you everything that you require for Exams practice. If you’re interested to pass 050-728 and

HIO-301 exams. I recommend you to use practice exams.

function cloudone(){
    $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
    setTimeout("cloudone()",10000);
}

In above codes, here we moved class id cloudone to +=1200px which means image will move 1200px of its right and to give sliding effect we used .animate function and the time taken to complete the slide would be 10 second. Now another .animate function will move the image to original position in time interval 0 sec and to start the rotation again we have sum the time intervals of both the animate functions and using setTimeout function we started the rotation loop again. This way animate all the images which you want to slide on the canvas. Check out below codes for more clarification.

function cloudone(){
   $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
   setTimeout("cloudone()",10000);
}
function cloudtwo(){
   $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
   setTimeout("cloudtwo()",15000);
}
function cloudthree(){
   $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
   setTimeout("cloudthree()",20000);
}
function boat(){
   //This time we need to move boat to left side so we put the margin to 1000px
   $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
   setTimeout("boat()",20000);
}

Now we need to trigger all our functions ( cloudone(), cloudtwo(), cloudthree() ) the animation will begin as soon as the page load. Check out below codes.

For additional PC related image capturing devices, such as a DVR or security cameras that can be attached to, consider reviewing a security camera system from 123-cctv.com.

$(document).ready(function() {
    setTimeout("cloudone()",10);
    setTimeout("cloudtwo()",10);
    setTimeout("cloudthree()",10);
    setTimeout("boat()",10);
});

Final Codes

$(document).ready(function() {
    setTimeout("cloudone()",10);
    setTimeout("cloudtwo()",10);
    setTimeout("cloudthree()",10);
    setTimeout("boat()",10);
});
function cloudone(){
    $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
    setTimeout("cloudone()",10000);
}
function cloudtwo(){
    $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
    setTimeout("cloudtwo()",15000);
}
function cloudthree(){
    $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
    setTimeout("cloudthree()",20000);
}
function boat(){
    $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
    setTimeout("boat()",20000);
}


Other types of images can be viewed from the web. These images can be collected when triggered by a home security camera system. For more information please contact Central Security Systems.

CHECK OUT DEMO

Try once our warm exam product like 350-001 study guide, 640-802 dumps, VCP-410 questions and answers product, 220-701 braindumps, and 70-646 dumps which will definitely prove helpful tool.