<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>1stwebdesigner - Graphic and Web Design Blog &#187; animation</title>
	<atom:link href="http://www.1stwebdesigner.com/tag/animation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.1stwebdesigner.com</link>
	<description>1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles.</description>
	<lastBuildDate>Sun, 12 Feb 2012 13:09:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Add Motion To Website: jQuery Animation Plugins From 2010</title>
		<link>http://www.1stwebdesigner.com/freebies/jquery-animation-motion-plugins-2010/</link>
		<comments>http://www.1stwebdesigner.com/freebies/jquery-animation-motion-plugins-2010/#comments</comments>
		<pubDate>Wed, 09 Jun 2010 21:00:23 +0000</pubDate>
		<dc:creator>Valters Bergspics</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=16476</guid>
		<description><![CDATA[In our niche it&#8217;s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily &#8211; using some advanced code snippets, plugins or hacks. jQuery possibilities are growing rapidly and there are many people who play with code and discover [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/resources/jquery-animation-motion-plugins-2010" target="_self"><img class="alignleft" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/title-jquery-animations-effects-plugins.jpg" alt="" width="150" height="150" /></a>In our niche it&#8217;s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily &#8211; using some advanced code snippets, plugins or hacks.</p>
<p>jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazing combinations achieving effects you have never seen before!</p>
<p>You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities &#8211; ready?!!!</p>
<p><span id="more-16476"></span></p>
<h2>1. <a href="http://plugins.jquery.com/project/ajax-zoom">AJAX-ZOOM &#8211; Image Zoom &#8211; Pan Gallery plugin</a></h2>
<p>AJAX-ZOOM is a sophisticated image zoom &amp; pan  gallery plugin based on jQuery and PHP. With over 250 options it is  very flexible and can be integrated into any website.</p>
<p><a href="http://plugins.jquery.com/project/ajax-zoom"><img class="alignnone size-full wp-image-16477" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/image-zoom-jquery-animations-effects-plugins.jpg" alt="" width="570" height="381" /></a></p>
<p><a href="http://www.ajax-zoom.com/index.php?cid=download">Download Now</a> | <a href="http://www.ajax-zoom.com/index.php?cid=examples">View Examples</a></p>
<h2>2. <a href="http://bugsoftware.co.uk/jQuery/ImgRotator/">Image Rotator</a></h2>
<p>Simply rotates an image by a certain degree or allows the user to rotate  an image by dragging around a central axis.</p>
<p><a href="http://bugsoftware.co.uk/jQuery/ImgRotator/"><img class="alignnone size-full wp-image-16511" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/image-rotator-jquery-animations-effects-plugins.jpg" alt="" width="412" height="412" /></a></p>
<p><a href="http://bugsoftware.co.uk/downloads/jQuery/ImgRotator.zip">Download Now</a> | <a href="http://bugsoftware.co.uk/jQuery/ImgRotator/">View Example</a></p>
<h2>3. <a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm">Cloud Zoom</a></h2>
<p>The Cloud Zoom  plugin is comparable to commercial image zoom products  such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is  smaller, has more features and more robust compatability across  browsers.</p>
<p><a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm"><img class="alignnone size-full wp-image-16493" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/cloud-zoom-jquery-animations-effects-plugins.jpg" alt="" width="509" height="335" /></a></p>
<p><a href="http://www.professorcloud.com/downloads/cloud-zoom.1.0.2.zip">Download Now</a> | <a href="http://www.professorcloud.com/mainsite/cloud-zoom.htm">View Example</a></p>
<h2>4. <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/">jQuery  Before/After Plugin</a></h2>
<p><a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/"><img class="alignnone size-full wp-image-16490" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/before-after-jquery-animations-effects-plugins.jpg" alt="" width="234" height="329" /></a></p>
<p><a href="http://www.catchmyfame.com/jquery/jquery.beforeafter.zip">Download Now</a> | <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/">View Example</a></p>
<h2>5. <a href="http://www.wizzud.com/jqDock/">jQDock</a></h2>
<p>Transform a set of images into a Mac-like Dock menu, horizontal or  vertical, with icons that expand on rollover, and optional labels.</p>
<p><a href="http://www.wizzud.com/jqDock/"><img class="alignnone size-full wp-image-16518" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jqdock-jquery-animations-effects-plugins.jpg" alt="" width="487" height="137" /></a></p>
<p><a href="http://plugins.jquery.com/files/jqDock.v1_4.zip">Download Now</a> | <a href="http://www.wizzud.com/jqDock/">View Example</a></p>
<h2>6. <a href="http://plugins.jquery.com/project/VisualLightbox">Visual Lightbox &#8211; Create fantastic lightbox-style galleries and  slideshows. jQuery LightBox Plugin.</a></h2>
<p><a href="http://plugins.jquery.com/project/VisualLightbox"><img class="alignnone size-full wp-image-16480" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/lightbox-jquery-animations-effects-plugins.jpg" alt="" width="570" height="574" /></a></p>
<p><a href="http://visuallightbox.com/#download">Download Now</a> | <a href="http://visuallightbox.com/demo/">View Examples</a></p>
<h2>7. <a href="http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm">Image Bubbles</a></h2>
<p>Image Bubbles is a cool Flash-like  effect that causes an image to bubble up and  expand whenever the mouse rolls over it from within a series of images.</p>
<p><a href="http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm"><img class="alignnone size-full wp-image-16521" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/image-bubbles-jquery-animations-effects-plugins.jpg" alt="" width="318" height="90" /></a></p>
<p><a href="http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm">Download Now</a> | <a href="http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm">View Example</a></p>
<h2>8. <a href="http://plugins.jquery.com/project/jquery-panel-magic">jQuery Panel Magic</a></h2>
<p>jQuery Panel Magic is a new take on website navigation.  Using a matrix  or grid style layout for your website, you can easily implement this  plugin for small websites and web applications.  It gives you more room  for your design and provides a cool new approach to a sitemap.</p>
<p><a href="http://plugins.jquery.com/project/jquery-panel-magic"><img class="alignnone size-full wp-image-16527" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/Panel-Magic-jquery-animations-effects-plugins.jpg" alt="" width="570" height="368" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery-panel-magic-1.0(2).zip">Download Now</a> | <a href="http://standardscompliance.com/development/jquery-panel-magic/panels.html#/page=extra8">View Example</a></p>
<h2>9. <a href="http://brynmosher.com/jquery.iCheckbox/">iCheckbox</a></h2>
<p>Convert a checkbox or multiple checkboxes into iphone style switches.</p>
<p><a href="http://brynmosher.com/jquery.iCheckbox/"><img class="alignnone size-full wp-image-16507" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/Checkbox-jquery-animations-effects-plugins.jpg" alt="" width="210" height="91" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.iCheckbox.0.1.zip">Download Now</a> | <a href="http://brynmosher.com/jquery.iCheckbox/">View Example</a></p>
<h2>10. <a href="http://workshop.rs/projects/jqfancytransitions/">jqFancyTransitions</a></h2>
<p>jqFancyTransitions is plugin for displaying your photos as slideshow  with fancy transition effects.</p>
<p><a href="http://workshop.rs/projects/jqfancytransitions/"><img class="alignnone size-full wp-image-16519" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jqFancyTransitions-jquery-animations-effects-plugins.jpg" alt="" width="519" height="385" /></a></p>
<p><a href="http://code.google.com/p/jqfancytransitions/downloads/list">Download Now</a> | <a href="http://workshop.rs/projects/jqfancytransitions/">View Example</a></p>
<h2>11. <a href="http://plugins.jquery.com/project/a-sexy">Images In All Size jQuery Plugin</a></h2>
<p><a href="http://plugins.jquery.com/project/a-sexy"><img class="alignnone size-full wp-image-16483" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/sexy-images-jquery-animations-effects-plugins.jpg" alt="" width="570" height="436" /></a></p>
<p><a href="http://plugins.jquery.com/files/a.sexy_0.0.4.zip">Download Now</a> | <a href="http://sexy.hohli.com/docs/demo00.html">View Example</a></p>
<h2>12. <a href="http://www.stevefenton.co.uk/cmsfiles/assets/File/texteffects.html">Text Effects</a></h2>
<p><a href="http://www.stevefenton.co.uk/cmsfiles/assets/File/texteffects.html"><img class="alignnone size-full wp-image-16529" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/text-jquery-animations-effects-plugins.jpg" alt="" width="570" height="172" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.texteffects.js_1.txt">Download Now</a> | <a href="http://www.stevefenton.co.uk/cmsfiles/assets/File/texteffects.html">View Examples</a></p>
<h2>13. <a href="http://www.jcoverflip.com/">jCoverflip</a></h2>
<p>jCoverflip is a jQuery cover flow widget that allows website  administrators to present featured website content in a visually  appealing manner.  The widget is quick setup and is highly configurable,  and can run as a Drupal Module or standalone.</p>
<p><a href="http://www.jcoverflip.com/"><img class="alignnone size-full wp-image-16513" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jCoverflip-jquery-animations-effects-plugins.jpg" alt="" width="570" height="306" /></a></p>
<p><a href="http://www.jcoverflip.com/download">Download Now</a> | <a href="http://www.jcoverflip.com/demo">View Example</a></p>
<h2>14. <a href="http://bxslider.com/">BxSlider</a></h2>
<p>bxSlider is a jQuery content slider plugin that is light weight and easy  to use.</p>
<p><a href="http://bxslider.com/"><img class="alignnone size-full wp-image-16491" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/bxslider-jquery-animations-effects-plugins.jpg" alt="" width="570" height="196" /></a></p>
<p><a href="http://bxslider.com/js/jquery.bxslider2.0.1.min.js">Download Now</a> | <a href="http://bxslider.com/">View Example</a></p>
<h2>15. <a href="http://www.senamion.com/blog/jScratchcard.html">jScratchcard plugin</a></h2>
<p><a href="http://www.senamion.com/blog/jScratchcard.html"><img class="alignnone size-full wp-image-16531" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jScratchcard-jquery-animations-effects-plugins.jpg" alt="" width="211" height="110" /></a></p>
<p><a href="http://www.senamion.com/blog/jScratchcard.zip">Download Now</a> | <a href="http://www.senamion.com/blog/jScratchcard.html">View Example</a></p>
<h2>16. <a href="http://plugins.jquery.com/project/jQueryMenu">jQuery Menu Style 1 &#8211; Drop Down Menu with Visual Effects</a></h2>
<p><a href="http://plugins.jquery.com/project/jQueryMenu"><img class="alignnone size-full wp-image-16478" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/apycom-jquery-animations-effects-plugins.jpg" alt="" width="570" height="172" /></a></p>
<p><a href="http://apycom.com/">View Examples</a></p>
<h2>17. <a href="http://demo.dev.bitami.com/jQuery/frameanimation/">Frame Animation Plugin for jQuery</a></h2>
<p><a href="http://demo.dev.bitami.com/jQuery/frameanimation/"><img class="alignnone size-full wp-image-16502" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/frame-jquery-animations-effects-plugins.jpg" alt="" width="263" height="66" /></a></p>
<p><a href="http://demo.dev.bitami.com/jQuery/frameanimation/javascripts/jquery.frame.animation.1.1.1.js">Download Now</a> | <a href="http://demo.dev.bitami.com/jQuery/frameanimation/demo.html#">View Example</a></p>
<h2>18. <a href="http://isthatclear.com/jquery/cursorHover/">Cusor Hover Buttons</a></h2>
<p>This plugin lets you create a two-layer button with one layer that  follows the mouse. This method allows you to create some very  professional effects on your site.</p>
<p><a href="http://isthatclear.com/jquery/cursorHover/"><img class="alignnone size-full wp-image-16494" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/cursor-hover-jquery-animations-effects-plugins.jpg" alt="" width="411" height="114" /></a></p>
<p><a href="http://isthatclear.com/jquery/cursorHover/download.html">Download Now</a> | <a href="http://isthatclear.com/jquery/cursorHover/">View Example</a></p>
<h2>19. <a href="http://www.gougouzian.fr/projects/jquery/carrousel/">jQuery carrousel</a></h2>
<p>The core allows to create your own controls or effects. This plugin  transform an &#8220;ul li&#8221; into an animated carrousel.</p>
<p><a href="http://www.gougouzian.fr/projects/jquery/carrousel/"><img class="alignnone size-full wp-image-16520" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/carrousel-jquery-animations-effects-plugins.jpg" alt="" width="460" height="228" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.carrousel.js_1.txt">Download Now</a> | <a href="http://www.gougouzian.fr/projects/jquery/carrousel/">View Example</a></p>
<h2>20. <a href="http://plugins.jquery.com/project/2d-transform">2D Transform</a></h2>
<p>This plug-in utilizes the matrix filter in IE and the new CSS3 transform  properties to 2d transform any DOMElement.</p>
<p><a href="http://plugins.jquery.com/project/2d-transform"><img class="alignnone size-full wp-image-16484" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/transform-jquery-animations-effects-plugins.jpg" alt="" width="331" height="697" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.transform-0.6.1.min.js.txt">Download Now</a> | <a href="http://wiki.github.com/heygrady/transform/demo">View Example</a></p>
<h2>21. <a href="http://www.gethifi.com/demos/jphotogrid">jPhotoGrid</a></h2>
<p>This plugin displays a list of image thumbnails in a grid and allows  them to be zoomed open.  It&#8217;s a cool and simple effect.</p>
<p><a href="http://www.gethifi.com/demos/jphotogrid"><img class="alignnone size-full wp-image-16516" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jphotogrid-jquery-animations-effects-plugins.jpg" alt="" width="570" height="478" /></a></p>
<p><a href="http://files.www.gethifi.com/blog/jphotogrid.zip">Download Now</a> | <a href="http://www.gethifi.com/demos/jphotogrid">View Example</a></p>
<h2>22. <a href="http://www.senamion.com/blog/jMagnify.html">jMagnify</a></h2>
<p>jQuery jMagnify, plugin attach a ola effect to some text following the  mouse position.</p>
<p><a href="http://www.senamion.com/blog/jMagnify.html"><img class="alignnone size-full wp-image-16514" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jMagnify-jquery-animations-effects-plugins.jpg" alt="" width="570" height="60" /></a></p>
<p><a href="http://www.senamion.com/blog/jMagnify.zip">Download Now</a> | <a href="http://www.senamion.com/blog/jMagnify.html">View Examples</a></p>
<h2>23. <a href="http://plugins.jquery.com/project/AnimaDrag">animaDrag: Animating Drag and Drop Plugin</a></h2>
<p><a href="http://plugins.jquery.com/project/AnimaDrag"><img class="alignnone size-full wp-image-16481" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/animadrag-jquery-animations-effects-plugins.jpg" alt="" width="490" height="167" /></a></p>
<p><a href="http://plugins.jquery.com/files/animadrag.js_0.txt">Download Now</a> | <a href="http://wayfarerweb.com/jquery/plugins/animadrag/">View Example</a></p>
<h2>24. <a href="http://www.senamion.com/blog/jOla.html#">jOla</a></h2>
<p><a href="http://www.senamion.com/blog/jOla.html#"><img class="alignnone size-full wp-image-16515" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/jola-jquery-animations-effects-plugins.jpg" alt="" width="570" height="43" /></a></p>
<p><a href="http://www.senamion.com/blog/jOla.zip">Download Now</a> | <a href="http://www.senamion.com/blog/jOla.html#">View Example</a></p>
<h2>25. <a href="http://keith-wood.name/flightBoard.html">Flight Board</a></h2>
<p>This plugin sets a division to flip between text messages like a flight  board at an airport. It alternates between two or more messages by  flipping individual characters.</p>
<p><a href="http://keith-wood.name/flightBoard.html"><img class="alignnone size-full wp-image-16499" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/flight-board-jquery-animations-effects-plugins.jpg" alt="" width="507" height="38" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.flightboard.package-1.0.1.zip">Download Now</a> | <a href="http://keith-wood.name/flightBoard.html">View Example</a></p>
<h2>26. <a href="http://plugins.jquery.com/project/CloudCarousel">3D Cloud Carousel</a></h2>
<p>This is a fast and cross-browser implementation of a 3d carousel &#8211; looks  very nice, more like a Flash implementation. It can create dynamic  reflections underneath the carousel items, is accessible and degrades  nicely without JavaScript.</p>
<p><a href="http://plugins.jquery.com/project/CloudCarousel"><img class="alignnone size-full wp-image-16486" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/Cloud-Carousel-jquery-animations-effects-plugins.jpg" alt="" width="570" height="388" /></a></p>
<p><a href="http://www.professorcloud.com/downloads/cloud-carousel.1.0.3.zip">Download Now</a> | <a href="http://www.professorcloud.com/mainsite/carousel.htm">View Example</a></p>
<h2>27. <a href="http://plugins.jquery.com/project/featureCarousel">3D Feature Image Carousel</a></h2>
<p>This plugin rotates images in a three dimensional (simulated) carousel.  Optionally, all images can have a description element attached to them  that pops up on an overlay whenever that image rotates to the center.</p>
<p><a href="http://plugins.jquery.com/project/featureCarousel"><img class="alignnone size-full wp-image-16488" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/3D-Feature-Image-Carousel-jquery-animations-effects-plugins.jpg" alt="" width="570" height="163" /></a></p>
<p><a href="http://www.bkosborne.com/downloads/jquery.featureCarousel-v1.0.zip">Download Now</a> | <a href="http://www.bkosborne.com/featureCarousel.php">View Example</a></p>
<h2>28. <a href="http://plugins.jquery.com/project/smooth_anchors">Smooth Anchors jQuery Plugin</a></h2>
<p>This plugin creates a simple animation for anchor links by quickly  scrolling the page to the area where the anchor is at rather than just  jumping right to the anchor like normal.</p>
<p><a href="http://plugins.jquery.com/project/smooth_anchors"><img class="alignnone size-full wp-image-16482" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/smooth-anchors-jquery-animations-effects-plugins.jpg" alt="" width="570" height="271" /></a></p>
<p><a href="http://www.ooeygui.net/wp-content/uploads/2009/07/Smooth_Anchors2.zip">Download Now</a> | <a href="http://www.xynthetik.com/test/20090709/Smooth_Anchors2/">View Example</a></p>
<h2>29. <a href="http://www.afekenholm.se/hoverattribute-jquery-plugin/">HoverAttribute</a></h2>
<p>HoverAttribute is a jQuery plugin that allows you to  make (link-)elements more dynamic by making an attribute of that element  show up on hovering.</p>
<p><a href="http://www.afekenholm.se/hoverattribute-jquery-plugin/"><img class="alignnone size-full wp-image-16506" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/HoverAttribute-jquery-animations-effects-plugins.jpg" alt="" width="513" height="159" /></a></p>
<p><a href="http://www.afekenholm.se/download/jquery.hoverattribute.js.zip">Download Now</a> | <a href="http://www.afekenholm.se/hoverattribute-jquery-plugin/#Examples">View Example</a></p>
<h2>30. <a href="http://charlesmarshall.co.uk/jquery/2009/08/02/expanding-grid.html">Expanding Grid</a></h2>
<p>Creates grid system out of divs. On hover the active grid expands to  ratio set by the config, fades out the background.</p>
<p><a href="http://charlesmarshall.co.uk/jquery/2009/08/02/expanding-grid.html"><img class="alignnone size-full wp-image-16498" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/06/Expanding-Grid-jquery-animations-effects-plugins.jpg" alt="" width="570" height="260" /></a></p>
<p><a href="http://plugins.jquery.com/files/jquery.expandinggrid.js.txt">Download Now</a> | <a href="http://charlesmarshall.co.uk/jquery/2009/08/02/expanding-grid.html">View Example</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/freebies/jquery-animation-motion-plugins-2010/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>50 Awesome Animations made with CSS3</title>
		<link>http://www.1stwebdesigner.com/css/50-awesome-css3-animations/</link>
		<comments>http://www.1stwebdesigner.com/css/50-awesome-css3-animations/#comments</comments>
		<pubDate>Sun, 28 Feb 2010 11:00:59 +0000</pubDate>
		<dc:creator>Yanuar Prisantoso</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=6010</guid>
		<description><![CDATA[CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of 50 CSS3 animation that allows you to perform many motion-based functions normally Delegated to JavaScript. In order to view this effect, you are required to have WebKit browsers like Safari and Chrome ( [...]]]></description>
			<content:encoded><![CDATA[<p>CSS3 has brought some amazing new features. And the most fun is playing with the CSS animation. Here is a compilation of <strong>50 CSS3 animation</strong> that allows you to perform many motion-based functions normally Delegated to JavaScript. In order to view this effect, you are required to have WebKit browsers like Safari and Chrome ( very sorry for the users of Internet Explorer )<span id="more-6010"></span></p>
<h3>1. <a href="http://css-tricks.com/examples/CSS3Clock/" target="_blank">CSS3 Clock With jQuery</a></h3>
<p>Use the basic features of the CSS3 Transform: rotate. And the combination of javascript frameworks like jQuery can produce a cool CSS3 clock</p>
<p><a href="http://css-tricks.com/examples/CSS3Clock/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/clock-jQuery-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>2. <a href="http://www.fofronline.com/experiments/clock/#clock" target="_blank">Analogue Clock</a></h3>
<p>Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.</p>
<p><a href="http://www.fofronline.com/experiments/clock/#clock" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/analogue-clock-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>3. <a href="http://www.fofronline.com/experiments/cube-3d/" target="_blank">3D Cube That Rotates Using Arrow Keys</a></h3>
<p>You can Use up, down, left and right keys to navigate the 3D cube. 3D cube built using -webkit-perspective, -webkit-transform and -webkit-transition.</p>
<p><a href="http://www.fofronline.com/experiments/cube-3d/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/3D-cube-rotates-arrow-keys-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>4. <a href="http://www.fofronline.com/experiments/cube/multiCubes.html" target="_blank">Multiple 3D Cubes (Slide In/Out)</a></h3>
<p>Multiple 3D Cubes using CSS3 and proprietary &#8216;transform&#8217; and &#8216;transition&#8217; properties. I thought it was amazing, you can see the writing on the 3D object.</p>
<p><a href="http://www.fofronline.com/experiments/cube/multiCubes.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/multiple-3d-cubes-slide-in-out-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>5. <a href="http://www.fofronline.com/experiments/accordion/#two" target="_blank">CSS3 Accordion</a></h3>
<p>An accordion effect using only CSS. Proprietary animation in WebKit based browsers.</p>
<p><a href="http://www.fofronline.com/experiments/accordion/#two" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/accordion-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>6. <a href="http://www.fofronline.com/experiments/parallax/" target="_blank">Auto-Scrolling Parallax</a></h3>
<p>Auto-Scrolling Paralax is an animated parallax effect using WebKit&#8217;s CSS transition property,Auto-Scrolling Paralax no need JavaScript</p>
<p><a href="http://www.fofronline.com/experiments/parallax/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/auto-scrolling-parallax-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>7. <a href="http://www.zachstronaut.com/lab/isocube.html" target="_blank">Isocube</a></h3>
<p>Isocube is like 3DCube but have litle different. Isocube can load images on one side</p>
<p><a href="http://www.zachstronaut.com/lab/isocube.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/isocube-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>8. <a href="http://devfiles.myopera.com/articles/1041/image-gallery.html" target="_blank">Image Gallery</a></h3>
<p><a href="http://devfiles.myopera.com/articles/1041/image-gallery.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/image-gallery-2-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>9. <a href="http://girliemac.com/sandbox/matrix.html" target="_blank">Matrix</a></h3>
<p>The Matrix is one of the best sci-fi films of all time. CSS3 capable of making such an amazing animated film made</p>
<p><a href="http://girliemac.com/sandbox/matrix.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/matrix-css3-animations.jpg" alt="" width="570" height="280" border="0" /></a></p>
<h3>10. <a href="http://webdeveloperjuice.com/demos/css/css3effects.html" target="_blank">7 Javascript-effect Alternatives Using CSS3</a></h3>
<p>7 examples of alternatives to javascript effect by using CSS3. Various effects such as Fade Block, Block Pulsate, Nudge, Expand Block, Block Bounce, Spin Block and Accordion</p>
<p><a href="http://webdeveloperjuice.com/demos/css/css3effects.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/7-javascript-effect-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>11. <a href="http://dinolatoga.com/demo/webkit-image-hover-effects/" target="_blank">Image Hover Effects</a></h3>
<p>Image Hover Effects is an example of using CSS to replace the javascript. The image will shrink when you put your mouse pointer on top of it.</p>
<p><a href="http://dinolatoga.com/demo/webkit-image-hover-effects/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/image-hover-effects-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>12. <a href="http://www.romancortes.com/blog/pure-css-coke-can/" target="_blank">Turning Coke Can (Control With Scrollbar)</a></h3>
<p><a href="http://www.romancortes.com/blog/pure-css-coke-can/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/turning-coke-can-control-with-scrollbar-css3-animations.jpg" alt="" width="570" height="330" border="0" /></a></p>
<h3>13. <a href="http://www.romancortes.com/blog/css-3d-meninas/" target="_blank">3D Meninas</a></h3>
<p><a href="http://www.romancortes.com/blog/css-3d-meninas/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/3D-meninas-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>14. <a href="http://media.24ways.org/2009/14/5/index.html" target="_blank">Polaroid Gallery</a></h3>
<p>Polaroid Gallery is animated pile of photographs utilizing a ton of new CSS3 commands. It&#8217;s interesting when your mouse cursor is above the image, the image will enlarge</p>
<p><a href="http://media.24ways.org/2009/14/5/index.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/polaroid-gallery-2-css3-animations.jpg" alt="" width="570" height="280" border="0" /></a></p>
<h3>15. <a href="http://media.24ways.org/2009/15/space.html" target="_blank">Space</a></h3>
<p><a href="http://media.24ways.org/2009/15/space.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/space-css3-animations.jpg" alt="" width="570" height="290" border="0" /></a></p>
<h3>16. <a href="http://www.zurb.com/playground/osx-dock" target="_blank">Mac Dock</a></h3>
<p>This list of links as the basis and change into an OS X icon dock of amazing.</p>
<p><a href="http://www.zurb.com/playground/osx-dock" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/mac-dock-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>17. <a href="http://www.zurb.com/playground/drop-in-modals" target="_blank">Drop-In Modals</a></h3>
<p>With CSS3 effects and property Drop In Modals can help you make quick, animation, a simple change to using modals, and some subtle design cues.</p>
<p><a href="http://www.zurb.com/playground/drop-in-modals" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/drop-in-modals-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>18. <a href="http://www.zurb.com/playground/sliding-vinyl" target="_blank">Sliding Vinyl</a></h3>
<p>Vinyl effect can be created by using CSS3 transition and a little HTML. This can make a standard album cover to have an interesting style</p>
<p><a href="http://www.zurb.com/playground/sliding-vinyl" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/sliding-vinyl-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>19. <a href="http://www.zurb.com/playground/css3-polaroids" target="_blank">Zooming Polaroids</a></h3>
<p>Polaroid is a picture that is in the box and spun like a pile of random photos that are sorting through CSS3 techniques. The text that comprises only extract the title and alt attribute</p>
<p><a href="http://www.zurb.com/playground/css3-polaroids" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/zooming-polaroids-css3-animations.jpg" alt="" width="570" height="290" border="0" /></a></p>
<h3>20. <a href="http://www.the-art-of-web.com/css/css-animation/" target="_blank">Animated Rocket</a></h3>
<p>The principle of Animatid Roket is CSSEffect. The transformation changed the appearance of an element in the browser, moving, rotating, or other means. In determining the conversion of styles before making the application to happen so that you can not really animation.</p>
<p><a href="http://www.the-art-of-web.com/css/css-animation/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/animated-rocket-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>21. <a href="http://webkit.org/blog-files/3d-transforms/poster-circle.html" target="_blank">Poster Circle</a></h3>
<p>Poster Circle. is an animated spin column consists of a row of colored boxes and text are wonderful. The overall effect is crazy cool and undeniably dizzying</p>
<p><a href="http://webkit.org/blog-files/3d-transforms/poster-circle.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/poster-circle-css3-animations.jpg" alt="" width="570" height="270" border="0" /></a></p>
<h3>22. <a href="http://webkit.org/blog-files/3d-transforms/morphing-cubes.html" target="_blank">Morphing Cubes</a></h3>
<p>Morphing Cubes will shows some of the more interesting content using 3D transformations, animations and transitions. Note that you can still select text in the element, even if the rotation. Converting elements are fully interactive.</p>
<p><a href="http://webkit.org/blog-files/3d-transforms/morphing-cubes.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/morphing-cubes-css3-animations.jpg" alt="" width="570" height="270" border="0" /></a></p>
<h3>23. <a href="http://www.3site.eu/examples/gallery/" target="_blank">Animated Polaroid Gallery</a></h3>
<p>This is the example of other Polaroid Gallery. Piles of images at random and when the cursor hovers over an image, selected images will be enlarged</p>
<p><a href="http://www.3site.eu/examples/gallery/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/polaroid-gallery-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>24. <a href="http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html" target="_blank">Spotlight Cast Shadow</a></h3>
<p>When the cursor moves as if like a lamp spotlight leading up to the writing and cast</p>
<p><a href="http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/spotlight-cast-shadow-css3-animations.jpg" alt="" width="570" height="280" border="0" /></a></p>
<h3>25. <a href="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html">Colorful Clock</a></h3>
<p>Colorful Clock is a colorful jQuery &amp; CSS3 which will help you keep track of those precious last seconds of the year.</p>
<p><a href="http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/colorful-clock-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<p>&nbsp;</p>
<h3><div id="adsenseads" style="margin:0 15px"><script type="text/javascript"><!--
							google_ad_client = "ca-pub-2552502674694369";
							google_ad_slot = "1448631891";
							google_ad_width = 300;
							google_ad_height = 250;
							//-->
							</script>
							<script type="text/javascript"
							src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
							</script><script type="text/javascript"><!--
				google_ad_client = "ca-pub-2538875746173404";
				/* 300x250, created 3/9/09 */
				google_ad_slot = "5916600540";
				google_ad_width = 300;
				google_ad_height = 250;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script></div></h3>
<h3>26. <a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php" target="_blank">Lightbox Gallery </a></h3>
<p>Lightbox Gallery is an awesome image gallery which leverages the latest CSS3 and jQuery techniques.Lightbox Gallery using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.</p>
<p><a href="http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/lightbox-gallery-draggable-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>27. <a href="http://buildinternet.com/live/elasticthumbs/" target="_blank">Elastic Thumbnail Menu</a></h3>
<p>Elastic Thumbnail Menu is an alternative method for smoothing the menu, in particular by increasing the menu items when the mouse is hovering over the menu. And then expand to the top menu</p>
<p><a href="http://buildinternet.com/live/elasticthumbs/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/elastic-thumbnail-menu-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>28. <a href="http://paulbakaus.com/lab/js/coverflow/" target="_blank">Coverflow</a></h3>
<p>This animation Apple style that combines CSS transformation and jqueryUI. This one truly animate between two half states, making a slider like iTunes</p>
<p><a href="http://paulbakaus.com/lab/js/coverflow/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/coverflow-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>29. <a href="http://demo.marcofolio.net/jquery_dj/">jQuery DJ Hero</a></h3>
<p>DJ Hero This is one of the interesting combination of CSS3 with jquery. On-screen controls you can control the pace or just take enough to record your mouse</p>
<p><a href="http://demo.marcofolio.net/jquery_dj/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/jQuery-dj-hero-css3-animations.jpg" alt="" width="570" height="300" border="0" /></a></p>
<h3>30. <a href="http://designlovr.com/examples/dynamic_stack_of_index_cards/" target="_blank">Dynamic Stacking Cards</a></h3>
<p>inn is a dynamic stack of index cards that simply using HTML and CSS3 features such as change and transition (for the dynamic effects) and the @ font-face, box-shadow and border-radius (for styling).</p>
<p><a href="http://designlovr.com/examples/dynamic_stack_of_index_cards/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/dynamic-stacking-cards-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>31. <a href="http://www.alexandtheweb.com/demos/transitions-test.html" target="_blank">Another Image Gallery</a></h3>
<p>This is an example of another image gallery that uses CSS3 transforms property and property transitions.</p>
<p><a href="http://www.alexandtheweb.com/demos/transitions-test.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/image-gallery-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>32. <a href="http://www.satine.org/research/webkit/snowleopard/snowstack.html" target="_blank">Snow Stack (Control With Arrow Keys)</a></h3>
<p><a href="http://www.satine.org/research/webkit/snowleopard/snowstack.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/snow-stack-control-with-arrow-keys-css3-animations.jpg" alt="" width="570" height="280" border="0" /></a></p>
<h3>33. <a href="http://stuffandnonsense.co.uk/content/demo/cannybill/21-10-2009/pricing.html" target="_blank">Animated Pricing Column</a></h3>
<p><span id="result_box">CSS3 animation can also be used in the package list price of a product. Animated Column Pricing can be applied properly there</span></p>
<p><a href="http://stuffandnonsense.co.uk/content/demo/cannybill/21-10-2009/pricing.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/pricing-column-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>34. <a href="http://demo.marcofolio.net/slick_jquery_css3_menu/default.html" target="_blank">Slick jQuery Menu</a></h3>
<p>Slick Jquery Menu achieved through a combination of CSS3 and JQuery menu below is very elegant and shows some great use of Jquery and CSS3. This is just one of those crazy concepts that the test can be used in CSS3 will be true of the standard Web.</p>
<p><a href="http://demo.marcofolio.net/slick_jquery_css3_menu/default.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/slick-jQuery-menu-css3-animations.jpg" alt="" width="570" height="290" border="0" /></a></p>
<h3>35. <a href="http://www.kamikazemusic.com/demo/csstabs.html" target="_blank">CSS Tabs Without Javascript</a></h3>
<p><a href="http://www.kamikazemusic.com/demo/csstabs.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/tabs-without-javascript-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>36. <a href="http://development.tobypitman.com/css/menu.html" target="_blank">Tab Menus Without Javascript</a></h3>
<p><a href="http://development.tobypitman.com/css/menu.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/tab-menus-without-javascript-css3-animations.jpg" alt="" width="570" height="270" border="0" /></a></p>
<h3>37. <a href="http://o.sitepen.com/labs/code/cssDock/" target="_blank">SVG Fisheye Menu</a></h3>
<p>CSS animation can animate almost any property on the item and do funny things, such as rotation and tilt. As proof,will created quick and dirty CSS3 Fisheye / Dock demo. Used as an added bonus, the demo-SVG in the tag IMG.</p>
<p><a href="http://o.sitepen.com/labs/code/cssDock/" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/svg-fisheye-menu-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>38. <a href="http://webkit.org/blog-files/leaves/index.html" target="_blank">Falling Leaves</a></h3>
<p>Like autumn. Animated falling leaves are made using CSS3</p>
<p><a href="http://webkit.org/blog-files/leaves/index.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/falling-leaves-css3-animations.jpg" alt="" width="570" height="280" border="0" /></a></p>
<h3>39. <a href="http://samples.webmatze.de/rotating_image_gallery.htm" target="_blank">Rotating Gallery</a></h3>
<p>Image Gallery Rotaitng build with CSS transform transition and CSS features. To see the effects of rotation, click the small image</p>
<p><a href="http://samples.webmatze.de/rotating_image_gallery.htm" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/rotating-gallery-css3-animations.jpg" alt="" width="570" height="270" border="0" /></a></p>
<h3>40. <a href="http://www.newmediacampaigns.com/files/http://www.webdesignerwall.com/wp-content/uploads/2010/02/nicer-navigation-with-css-transitions/demo.html" target="_blank">Dropdown Menu</a></h3>
<p>Dropdown Menu is a very nice navigation menu by using CSS3 transition property. CSS transitions are very strong influence to renounce the use of JavaScript for many common side effects.</p>
<p><a href="http://www.newmediacampaigns.com/files/http://www.webdesignerwall.com/wp-content/uploads/2010/02/nicer-navigation-with-css-transitions/demo.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/dropdown-menu-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>41. <a href="http://blog.gesteves.com/post/261593774/im-done-star-wars-opening-crawl-using-only-html" target="_blank">Star Wars Crawl</a></h3>
<p>Star Wars opening crawl, using only HTML &amp; CSS. It only works in Snow Leopard in Safari 4.0.4 and the WebKit nightly.</p>
<p><a href="http://blog.gesteves.com/post/261593774/im-done-star-wars-opening-crawl-using-only-html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/star-wars-crawl-css3-animations.jpg" alt="" width="570" height="222" border="0" /></a></p>
<h3>42. <a href="http://webkit.org/demos/sticky-notes/" target="_blank">Sticky Notes</a></h3>
<p><a href="http://webkit.org/demos/sticky-notes/" target="_blank"><img style="border: 0px initial initial;" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/sticky-notes-css3-animation.jpg" alt="" border="0" /></a></p>
<h3>43. <a href="http://natbat.net/code/clientside/css/snowflakes/" target="_blank">Snowflakes</a></h3>
<p><a href="http://natbat.net/code/clientside/css/snowflakes/"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/Snowflakes-css3-animations.jpg" alt="" width="570" height="282" border="0" /></a></p>
<h3>44. <a href="http://www.niquelao.net/wp-content/uploads/2009/12/example1.html" target="_blank">Another Fisheye</a></h3>
<p>This is another fisheye that using CSS3</p>
<p><a href="http://www.niquelao.net/wp-content/uploads/2009/12/example1.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/another-fisheye-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>45. <a href="http://www.cssplay.co.uk/menu/css3-animation.html" target="_blank">Frame-by-Frame Animation</a></h3>
<p>The first demonstration reqires you to keep clicking the image to see the next frame, and it wraps around to the start when you reach the last frame.The second demonstration just needs you to keep the mouse moving over the image in MOST browsers. But the BIG drawback to this method is that the speed of movement of the mouse governs the speed of animation</p>
<p><a href="http://www.cssplay.co.uk/menu/css3-animation.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/Frame-by-Frame-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>46. <a href="http://anthonycalzadilla.com/css3-ATAT/index-bones.html" target="_blank">AT-AT Walker </a></h3>
<p>AT-AT Walker is not flash but only CSS3. That amazing !</p>
<p><a href="http://anthonycalzadilla.com/css3-ATAT/index-bones.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/at-walker-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>47. <a href="http://www.thecssninja.com/demo/css_accordion/#Section2" target="_blank">Another Accordion</a></h3>
<p><a href="http://www.thecssninja.com/demo/css_accordion/#Section2" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/Another-Accordion-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>48. <a href="http://files.myopera.com/FataL/pres/pres.xml#name" target="_blank">Dynamic Presentation Without Flash</a></h3>
<p><a href="http://files.myopera.com/FataL/pres/pres.xml#name" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/dynamic-presentation-without-flash-css3-animations.jpg" alt="" width="570" height="260" border="0" /></a></p>
<h3>49. <a href="http://elliottrothman.com/files/smoothie.html" target="_blank">Smoothie Slider Menu</a></h3>
<p><a href="http://elliottrothman.com/files/smoothie.html" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/smoothie-css3-animations.jpg" alt="" width="570" height="160" border="0" /></a></p>
<h3>50. <a href="http://24ways.org/2009/css-animations" target="_blank">Spinner</a></h3>
<p>This is basically like an ajax/loader spinner except its not a animated gif. It uses CSS3 to make it spin.</p>
<p><a href="http://24ways.org/2009/css-animations" target="_blank"><img src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2010/02/spinner-css3-animations.jpg" alt="" width="570" height="300" border="0" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/css/50-awesome-css3-animations/feed/</wfw:commentRss>
		<slash:comments>42</slash:comments>
		</item>
		<item>
		<title>Xara 3D Review – Easy 3D Text Animation</title>
		<link>http://www.1stwebdesigner.com/design/xara-3d-review-easy-3d-text-animation/</link>
		<comments>http://www.1stwebdesigner.com/design/xara-3d-review-easy-3d-text-animation/#comments</comments>
		<pubDate>Mon, 15 Sep 2008 22:16:11 +0000</pubDate>
		<dc:creator>Dainis Graveris</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[xara]]></category>

		<guid isPermaLink="false">http://www.1stwebdesigner.com/?p=552</guid>
		<description><![CDATA[So what really is Xara 3D? Xara 3D is simple 3D animation program, which is very easy to use and it&#8217;s great program for beginners or people, who just wants fast and amazing outcome. Graphic designers usually use this program to create nice 3D text, then export it to Photoshop for example and add some [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.1stwebdesigner.com/design/xara-3d-review-easy-3d-text-animation"><img style="border-right: 0px; border-top: 0px; margin: 3px 7px 7px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/title-xara.jpg" border="0" alt="title-xara" width="150" height="150" align="left" /></a><strong>So what really is Xara 3D?</strong></p>
<p>Xara 3D is simple 3D animation program, which is very easy to use and it&#8217;s great program for beginners or people, who just wants fast and amazing outcome. Graphic designers usually use this program to create nice 3D text, then export it to Photoshop for example and add some spice. Xara 3D serves well also for clean 3D logos,buttons creation. Program is really light weighted too, installation file is just 25mb small! If You hear about Xara 3D first time, then just keep reading and You&#8217;ll understand what&#8217;s this program capable of.</p>
<p><span id="more-552"></span></p>
<p>I added few images which were created using Xara 3D to keep Your interest:</p>
<p><a href="http://photosherox.deviantart.com/art/3D-Love-Text-81717603" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/3d-love-text.jpg" border="0" alt="3d-love-text" width="534" height="406" /></a></p>
<p><a href="http://dreaming-star.deviantart.com/art/Heart-77586671" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/heart.jpg" border="0" alt="heart" width="488" height="689" /></a></p>
<p><a href="http://shinybinary.com/" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/type1.jpg" border="0" alt="type" width="520" height="619" /></a></p>
<p>Xara 3D here has been used as primary tool for 3D text creation and everything else can be easily done in Photoshop or other program You prefer.</p>
<p>The user interface is highly intuitive and I felt good after just 30minutes playing with tools &#8211; it felt even too simple, but as I already said -  everybody with simple needs for starters will be satisfied. Xara 3D is worth just as low-cost way to start to get acquainted with the basics of 3D animation and rendering. The program comes with plenty of samples, textures, demos and there are great videos easy to download and understand. With Xara3D you can create an endless variety of 3D graphics from TrueType fonts and imported 2D shapes with wide range of controls as lightning, bevel, font size, type, color extrude depth and texture rendering. All images are anti-alias in very smooth and professional quality. Below are few examples what Xara 3D can do:</p>
<p><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/overview.jpg" border="0" alt="overview" width="620" height="173" /></p>
<p><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/guitare.jpg" border="0" alt="guitare" width="243" height="169" /> <img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/thumbsup.jpg" border="0" alt="thumbsup" width="167" height="169" /></p>
<p>These examples can be used great as excellent 3D logotype, button or just graphic effect. Of course, if You are looking for something that allows You to get more creative, You may want to consider using programs like Maya or 3dsMax. Below are examples of simple animations Xara 3D is capable of:</p>
<p><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/ex01-anim.gif" border="0" alt="ex01_anim" width="200" height="135" /> <a href="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/ex10-anim.gif"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/ex10-anim-thumb.gif" border="0" alt="ex10_anim" width="200" height="135" /></a></p>
<p><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/ex11-anim.gif" border="0" alt="ex11_anim" width="200" height="135" /> <img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/ex14-anim.gif" border="0" alt="ex14_anim" width="200" height="135" /></p>
<p>I hope these animations will not crash Your browser, if it goes really slow, just tell me, I will take those out. Xara 3D allows You to create animated 3D graphics that surely will attract more attention than a static image. Those awesome 3D animations can be created in seconds &#8211; *.gif, *.avi and *.swf formats, every animation You create also can be saved as screensaver.</p>
<p>Overview:</p>
<p>Pros:</p>
<ul>
<li>Intuitive interface</li>
<li>Easy to learn and use</li>
<li>Allow to create advanced animations and 3D effects in seconds</li>
<li>Result is very smooth and anti-aliased ( important for logotypes, headers etc.)</li>
<li>Light-weighted and there is no need for powerful computer to use it</li>
<li>Low-cost program</li>
</ul>
<p>Cons:</p>
<p>I found just one very big con for this program &#8211; Xara 3D is limited in its animation options, 3D effects, lighting and Your creativity. If You are serious graphic designer &#8211; You will have to retouch Xara 3D output in other software programs as Photoshop, Illustrator, Flash.</p>
<p><a href="http://www.flickr.com/photos/balbastrojulio/2381831346/" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/jeb.jpg" border="0" alt="jeb" width="520" height="395" /></a></p>
<p><a href="http://www.flickr.com/photos/_sezah/2292313316/" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/boio.jpg" border="0" alt="boio" width="392" height="520" /></a></p>
<p>Okay, now You have seen what Xara 3D can do. I found few tutorials for You to help get known with this program. Enjoy:</p>
<p><a href="http://www.digitalartsonline.co.uk/tutorials/index.cfm?featureid=1617&amp;pn=1" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/fresh-350x200.jpg" border="0" alt="fresh-350x200" width="370" height="220" /></a></p>
<p><a href="http://psdtuts.com/designing-tutorials/valentines-day-photoshop-style/" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/valentine.jpg" border="0" alt="valentine" width="370" height="220" /></a></p>
<p><a href="http://www.designertoday.com/Tutorials/Xara.Xtreme/5306/Outline.Text.Xara.3D.Tutorial.aspx" target="_blank"><img style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" src="http://cdn1.1stwebdesigner.com/wp-content/uploads/2008/09/smile.jpg" border="0" alt="smile" width="370" height="220" /></a></p>
<p>If You liked this post, keep in track with this site, because I will create nice Xara 3D + Photoshop tutorial in next few days.</p>
<p>Xara 3D is shareware, a free download ( 15 days trial) is available so You can test by Yourself how good this program is. To download the free trial version, or to see more videos and examples about <a href="http://stats.xaraonline.com/ID.1132908/product.Xara3D6CD/redirectid.Xara3DHome/affiliate.html" target="_blank">Xara 3D, click here</a>. Actually the price is especially attractive, xara.com offers this program for: $44.99-54.99 USD, low in comparison to many other 3D programs as Maya, 3dsMax etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.1stwebdesigner.com/design/xara-3d-review-easy-3d-text-animation/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
	</channel>
</rss>

