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>

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply