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. 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Animated Landscape Using CSS and jQuery</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="inner"> <div id="cloudone"><img src="images/clud1.png"></div> <div id="cloudtwo"><img src="images/clud2.png"></div> <div id="cloudthree"><img src="images/clud1.png"></div> <div id="boat"><img src="images/boat.png"></div> </div> </div> </body> </html>
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.
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.
$(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); }
Check Out DEMO
44 Responses to “Animated Landscape Using CSS and jQuery”
Leave a Reply
Your logo design at Logomyway
-
HTML5 Website Layout Tutorials and Inspiration
71 Comments
-
65 Well Designed Ecommerce website for Design Inspiration
50 Comments
-
Create Portfolio Website With CSS/jQuery
50 Comments
-
40 Free Black Wordpress Themes
49 Comments
-
15 Ways to Improve Freelance Creativity
45 Comments
-
Letterpress Text Effect Using Photoshop and CSS
45 Comments
-
Animated Landscape Using CSS and jQuery
44 Comments
-
117 Social Network Icon Set To Spice Your Web
42 Comments
-
70 Dazzling Light Effect Photoshop Tutorials
40 Comments
-
25 Flash Website Galleries for Inspiration
39 Comments
[...] Após o lançamento do web designer jQuery muitas pessoas que enfrentam problema com javascript agora se mudou para jQuery por causa da vasta gama de suporte de várias efeito jQuery. Jquery é um dos principais quadro JavaScript está disponível agora. Apenas uma base de JavaScript é necessário para começar a usar o jQuery e implementação de grande efeito com o [pouco. . . ] URL do artigo original http://acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery/ [...]
Social comments and analytics for this post…
This post was mentioned on Twitter by CreativityGeek: Acris Design – Animated Landscape Using CSS and jQuery http://bit.ly/9dIfpv…
[...] more: Animated Landscape Using CSS and jQuery | AcrisDesign If you enjoyed this article please consider sharing [...]
[...] See the article here: Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign Tags: are-writing, beautiful, beautiful-tutorial, create-animated, css, jquery-, [...]
[...] Tras el lanzamiento del diseñador web jQuery muchas personas que enfrentan problemas con javascript jQuery ahora se mudó a causa de amplia gama de Compatibilidad con efectos diversos de jQuery. JQuery es una de las principales marco JavaScript disponible. Sólo una base de Javascript se requiere para empezar a usar jQuery y aplicar algunos efectos muy bien con poco [. . . ] URL del artículo original http://acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery/ [...]
[...] Animated Landscape Using CSS аחԁ jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
Helpful guide Vikas. Many thanks TeD.
[...] Nach dem Start von jQuery viele Web-Designer, mit dem Problem konfrontiert javascript jetzt zog wegen der breiten Palette von verschiedenen Effekt Unterstützung von jQuery jQuery. JQuery ist eines der führenden JavaScript-Framework zur Verfügung. Nur eine grundlegende von JavaScript ist erforderlich, um das mit jQuery und Umsetzung einige große Wirkung mit wenig [. . . ] URL des Original-Artikel http://acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery/ [...]
[...] Read this article: Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Visitar: acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery [...]
You don’t need to use setTimeout() inside the document ready function. You can simply call your functions to get their loops started. Also, you might save some CPU power by making your loops work like this -
function boat(){
$(”#boat”).animate({right:”+=1000px”},20000,function(){ $(this).css(’right’,-200); boat(); });
}
Instead of using setTimeout() to wait and call your loop, you could use the animate() callback function. Using css() requires less typing and makes more sense reading it back rather than an animate with a duration of 0. Hope that helps.
Nice and simple, rookies gonna love it
huhuhuhu any boat can landing with script aw aw aw
its cool
[...] Animated Landscape Using CSS and jQuery [...]
[...] Animated Landscape Using CSS and jQuery [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
Animated Landscape Using CSS and jQuery…
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….
Animated Landscape Using CSS and jQuery…
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….
Just bookmarked your site, thanks for sharing!
[...] Animated Landscape Using CSS and jQuery [...]
Wow, excellent post! I am intrigued.
thank you for the great tut.
Now all we need is for the sun to rise and set! THAT would be awesome… hook it up to the time on the client machine, so whatever time it is for them, you show the sun/moon at the right spot!!!
Love it! Gonna play with this over the weekend. Thanks!
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
Nice article!
You can do the same using only CSS3, demos here (webkit only): http://projets.geekfg.net/?/10
Hey! Just had to respond. I truly enjoyed this article. Keep up the outstanding effort.
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery By Vikas Ghodke, April 20th, 2010 Site: AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery | AcrisDesign [...]
[...] Animated Landscape Using CSS and jQuery [...]
[...] con CSS y jQueryCreando imagenes interactivas con jQueryCrear un Image Rotator con CSS y jQueryPaisajes animados con CSS y jQueryCrear un portfolio con CSS/jQueryVentanas inline con CSS y jQueryMenús desplegables con jQuery y [...]
Very nice tutorial! I will be sharing this with my jr developers!
Thanks
[...] Animated Landscape Using CSS and jQuery By Vikas Ghodke, April 20th, 2010 Site: AcrisDesign [...]
[...] 4.Animated Landscape Using CSS and jQuery [...]
[...] Animated Landscape Using CSS and jQuery Animated Landscape Using CSS and jQuery Tags: ajax ui, autocomplete using jquery, design ideas, dojo jquery, event design, file upload using jquery, form design, form validation using jquery, free download jquery, free jquery, jquery, jquery 1.3, jquery accordian, jquery ajax, jquery alert, jquery block ui, jquery blog, jquery component, jquery contextmenu, jquery css, jquery datagrid, jquery date picker, jquery display, jquery div, jquery document ready, jquery dom, jquery drag and drop, jquery example, jquery examples, jquery fancybox, jquery form, jquery framework, jquery get, jquery google, jquery hide, jquery html, jquery innerhtml, jquery jcarousel, jquery js download, jquery jsf, jquery jsp, jquery mootools, jquery news, jquery object, jquery offset, jquery onmouseover, jquery pdf, jquery php, jquery prototype, jquery refresh, jquery reorder, jquery script, jquery select, jquery slide down, jquery text, jquery timer, jquery toggle, jquery treetable, jquery tutorial, jquery tutorials, jquery ui, jquery ui 1.6 the user interface library for jquery, jquery ui 1.7, jquery ui ajax, jquery ui core, jquery ui form, jquery ui modal, jquery ui themeroller, jquery ui.layout, jquery value, jquery xml, js design, jsp ui, pagination using jquery, popup window using jquery, rails jquery, simple jquery, using jquery, using jquery ui, validation using jquery, value design Comments RSS feed [...]
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.
I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind.
hmmm…wow… very good link this is most article good
[...] months ago we have created an animated landscape using Photoshop and jQuery. So today we just decided to create some what same effect with pure CSS3 technology. Below is the [...]