Animated Landscape Using CSS and jQuery

Posted by on April 20th in Tutorials.

landscapejquery

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 codes.

<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.

Vikas ghodke, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

64 Comments

  1. its amazing.. Inspiring article, Keep rocking

  2. [...] Animated Landscape Using CSS and jQuery [...]

  3. Interesting tutorial. Thanks (I came up with some ideas for my projects) :) .

  4. Hi Vikas

    Thanks for sharing this.

    Andy

  5. could learn something new. i always love reading about new jquery approaches.

  6. Animated Landscape Using CSS and jQuery…

    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….

  7. I always wanted to learn jquery. Your nice code sample made me really inspired to develop something on my own. Thanks.

  8. [...] Paisaje animado usando CSS y jQuery [...]

  9. I am turn out to be your ultimate follower. Your articles are really good not just this animated Cloud and boat but other article on Jquery also..

    Love your Ideas…

  10. I’m studying web design and CSS layout at college and this really helped me. Thanks so much.

  11. About J query, I know that experience is not yet full. Now watch the challenge in this post also read. Thank you.

  12. [...] Menu Using JqueryHow To Create a Cool Animated Menu with jQueryCustom Animation Banner with jQueryAnimated Landscape Using CSS and jQueryEasily Animate Web Buttons/Objects using jQueryAnimated Sharing Bar With jQuery & CSSAnimated [...]


  13. MostElectrifyin

    I self-taught on CSS, JavaScript, and WordPress…so still a beginner, how would you add something like this to the header of a WordPress page without making it a plugin? Trying to make an animation in the header that wont need flash and will be seen on IE and IPAD. Any help would be greatly appreciated.

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.