http://jonraasch.com/blog Web development and design blog from Portland based developer Jon Raasch Thu, 29 Jul 2010 16:35:00 +0000 en hourly 1 http://wordpress.org/?v=3.0 http://jonraasch.com/blog/quickflip-2-jquery-plugin http://jonraasch.com/blog/quickflip-2-jquery-plugin#comments Mon, 13 Jul 2009 21:15:45 +0000 Jon Raasch http://jonraasch.com/blog/?p=114 Download QuickFlip 2 for jQuery Read the QuickFlip documentation QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS. It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with a depth effect try jQuery Flip!, although this only works with background colors (not images) and hides the panel content before flipping.]]> http://jonraasch.com/blog/quickflip-2-jquery-plugin/feed 70 http://jonraasch.com/blog/scrolling-parallax-jquery-plugin http://jonraasch.com/blog/scrolling-parallax-jquery-plugin#comments Tue, 02 Jun 2009 16:55:25 +0000 Jon Raasch http://jonraasch.com/blog/?p=59 parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website. Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page. The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the background to name a few. Addtionally you can attach the parallax to any piece of markup, as well as pass an image path as described above.]]> http://jonraasch.com/blog/scrolling-parallax-jquery-plugin/feed 14 http://jonraasch.com/blog/jquery-flipbook-movies http://jonraasch.com/blog/jquery-flipbook-movies#comments Tue, 30 Dec 2008 17:54:01 +0000 Jon Raasch http://jonraasch.com/blog/jquery-flipbook-movies real flipbook. The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It's very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer. ]]> http://jonraasch.com/blog/jquery-flipbook-movies/feed 4 http://jonraasch.com/blog/quickflip-jquery-plugin http://jonraasch.com/blog/quickflip-jquery-plugin#comments Mon, 20 Oct 2008 15:50:53 +0000 Jon Raasch http://jonraasch.com/blog/quickflip-jquery-plugin jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it’s not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more...)]]> http://jonraasch.com/blog/quickflip-jquery-plugin/feed 27 http://jonraasch.com/blog/a-simple-jquery-slideshow http://jonraasch.com/blog/a-simple-jquery-slideshow#comments Tue, 29 Jul 2008 17:14:00 +0000 Jon Raasch http://jonraasch.com/blog/a-simple-jquery-slideshow <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> Now let's use CSS to position the images on top of each other and bring the active image to the images on top of each other and bring the active image to the top level with z-index:]]> http://jonraasch.com/blog/a-simple-jquery-slideshow/feed 227