jQuery Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. Photos by Andrew Schmidt via publicdomainpictures.net How to Use Link to the script after jQuery. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows(example has the default config values assigned) Parameters are: thumbImages: path to the thumbnails smallImages: path to the small size images largeImages: path to the large size images count: number of images/thumbnails thumbImageType: file extension for thumbnail images (all should be the same) imageType: file extension for gallery images (all should be the same) breakpoint: width at which the small and large image sizes are swapped shadowStrength: strength of the shadow on the non-selected thumbs (0-1) Download Plugin: zip tar Other stuff by me: johnpolacek.github.com
Item Blur Effect with CSS3 and jQuery Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. View demo Download source Today we want to show you how to create a simple blur effect for text-based items. We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since we will be using transitions, this effect will only work properly in browsers that support them. So let’s start! The Markup The structure will be a section with some articles in i. Let’s look at the style. The CSS The main container will be of fixed width and centered: Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements: Now, let’s style the article items. For Webkit browsers we’ll also add -webkit-backface-visibility: hidden to avoid a short flicker. Let’s style the text elements and create some nice typography.
SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:
10 Useful jQuery Popup Plugins Modal dialog boxes are a great way to show quick information to your users. It also helps to alert them of errors, warnings, prompts for information and more. Here is a list of 10 jQuery Popup Modal Dialog Plugins. 70+ Inspirational Examples of Websites Designed With HTML5 The web is constantly evolving. New and creative websites are being created every day, pushing the limitations of HTML in every direction. HTML4 has been around for nearly a decade and now its time to move forward. To give authors more flexibility and interoperability, HTML5 is proposed as the next major revision of HTML. It works on just about every platform, is compatible with older browsers, and handles errors gracefully. In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs that are coded in HTML5. The main purpose here is to stimulate your creativity and to inspire your imagination to create awesome designs because your website represents you and your brand. You may be interested in the following modern trends related articles as well. Please feel free to join us and you are always welcome to share your thoughts that our readers may like. Don’t forget to and follow us on Twitter — for recent updates. What is HTML5 Hd-live