jQuery Website Effects

A continually updated list. Last update: 12/10/11

==============================

Dynamically generated Image shadow – clickable moveable: pushingpixels.at/experiments/dynamic_shadow/

Multilayout portfolio: List vs Image view
net.tutsplus.com/tutorials/wordpress/create-a-multi-layout-portfolio-with-wordpress/

Spinning Newspaper Tada! like old movies
tutorialzine.com/2011/07/spinning-newspaper-effect-css3/

So Cool!! User submitted webcam gallery- button activates the cam, shoots pic, and adds to the gallery.
tutorialzine.com/2011/04/jquery-webcam-photobooth/

Jquery Easing & Widon’t – prevent orphan words ragged to next line. make sure last line of paragraph always has at least 2 words on it:
www.nikebetterworld.com/lib/js/jquery/jquery-plugins.js?0.0.0.1

www.script-tutorials.com/

IMAGE CAPTION ANIMATIONS

10 Image hover caption effects

Original Hover Effects with CSS3

Sliding Hoverbox with enlarge & download button: www.elegantthemes.com/preview/Nova/gallery/

WEBSITE PREVIEW ON HOVER
stackoverflow.com/questions/3162815/jquery-webpage-preview

FADING IN IMAGES

stackoverflow.com/questions/5641051/show-an-element-unless-the-user-has-javascript-turned-on-then-fade-it-in-nice

Simple way: have the content hide for JS-enabled users immediately after including it in the page, rather than waiting for the entire document to load:

<div id="messagecenter">Albatross!</div> <script type="text/javascript"> $('#messagecenter').hide(); $(document).ready(function() { $('#messagecenter').show('fade', 'slow'); }); </script> 

This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:

Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:

<head> <style type="text/css"> body.withjs #messagecenter { visibility: hidden; } </style> <script type="text/javascript"> $(document).ready(function() { $('#messagecenter').show('fade', 'slow'); }); </script> </head> <body> <script type="text/javascript"> $(document.body).addClass('withjs'); </script> ... <div id="messagecenter">Albatross!</div> PARALLAX BACKGROUNDS http://www.danhigbie.com/

JQUERY STYLE SHEET SWITCHERS
http://www.net-kit.com/10-practical-jquery-style-switchers/
 WORDPRESS - IMAGES TIMTHUMBS http://jeremy.infinicastonline.com/2010/01/cross-domain-timthumb-php/ DRAG AND DROP *amazing!* http://www.ali.dj/wordpress-plugin-drag-drop-file-uploader/ Faster Image Insert *amazing!* http://wordpress.org/extend/plugins/faster-image-insert/

WORDPRESS IMAGE MANAGEMENT:
upload janitor to delete unused images: http://wpmu.org/daily-tip-keep-a-clean-wordpress-uploads-folder-by-deleting-unused-images/
alt: delete unused images http://www.bobhobby.com/2008/02/24/delete-unused-image-files-plugin-for-wordpress/

Code Snippets

Plugin to Detect if click outside of an element:
littleroom.se/playground/outerClick/

Click outside of a div will fade that div
stackoverflow.com/questions/2124684/jquery-how-click-anywhere-outside-of-the-div-the-div-fades-out

Sliding toggle that degrades gracefully
www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

Same slider toggle but with preview first line of text:
codemonkeys.biz/2010/09/09/scrolling-slider-with-auto-pull-text-using-jquery/

Fix for things being hidden if javascript is disabled: Use a JS class if javascript. (similar to boilerplate no-js)
oncemade.com/adding-hasjs-class-when-javascript-is-available/

keith's example using jquery:

jQuery(function($) {
$('body').addClass('hasJS');
});

css

.hasJS .module {
display: none;
}

Setting the Timing for JQuery Tools Flowplayer Slideshow

<script language="JavaScript" type="text/javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
          $(function() {

          $("div.tabs").tabs(".images > div", {

                // enable "cross-fading" effect
                effect: 'fade',
		        fadeInSpeed: "1500",
                fadeOutSpeed: "1500",

                // start from the beginning after the last tab
                rotate: true

          // use the slideshow plugin. It accepts its own configuration
          }).slideshow({autoplay: true, interval:6000}); /*important: interval!*/
          });
          </script>

Leave a Reply