background preloader

Image Wall with jQuery and CSS3

Image Wall with jQuery and CSS3

Related:  COdrops TutorialsGalerie Img

Web Design Trends in 2011 There is a thin line between design and development, and as we move into a new decade, this line is becoming extremely blurry. Is it enough to draw beautiful mock ups in Photoshop? Maybe 5 years ago. These days, the average internet user requires more. jQuery Touch Optimized Sliders "R"Us Fire the plugin on a (set of) thumbnail(s) and it will create a lightbox popup with a slider for the enlarged images. <script type="text/javascript"> $(document).ready(function() { $("#example a").tosrus(); }); </script> Image gallery By default, the plugin will automatically create a gallery from the targeted anchors:

Gamma Gallery - A Responsive Image Gallery Experiment Assemblage Becoming Sky high Life Beleaguer Chatoyant Denouement Desuetude Diaphanous Desuetude Languor Inglenook Forbearance Penumbra Mondegreen Plethora Onomatopoeia Wafture Cynosure Epiphany Felicity Serenity Furtive Glamour Inure Labyrinthine Lagoon Desire Leisure Softness Moiety Nemesis Panacea Scintilla Example for loading more items...

foobar - a notification bar that doesn't suck! How To Setup Demos All Options FAQ Changelog How to setup Firstly, extract all the files and then upload to your server. Next, include the foobar javascript file together with jquery in your head tag. The State of Web Design Trends: 2011 Annual Edition 2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design (without compromising stability). All in all, it's been a year that's moved fast, even by the standards of the web, so let's dig in to our first annual post covering the state of web design as 2010 turns to 2011. The Death of the Fold The traditional "fold" (the imaginary line on a screen that designates what content is visible before a viewer needs to scroll) became vague, unimportant, and nearly irrelevant in 2010.

Image Lightbox, Responsive and Touch‑friendly — Osvaldas Valutis As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens.

New Creation: jQuery Runloop Plugin TL;DR links for the eager: Earlier this week I was working on a project that involved one larger animation during which several separate animations would trigger, but not all at the same time, and not all on the same elements. As jQuery provided insufficient functionality to suit my needs, I went on a hunt across the Web in search for a runloop plugin, with these requirements: Alas, my traipsing across the Web yielded no results. However, after deciding to write my own plugin, I came across this concept by Ben Nadel which inspired me, and gave me a clear idea for what to do. I then adopted Ben’s idea of using the .animate() function’s step: method and turned it into a full-fledged runloop system, and am now making it available as a plugin for jQuery.

Forrst – A Community For Web Creators « AppVita Forrst is an online setting where developers and designers can go to get away from it all. The virtual community is an exclusive place where developers can find support from likeminded professionals, get feedback on their latest projects, share business information, and generally improve their craft while offering support and advice to other web professionals at the same time. Although Forrst is currently an invite-only community, people with GitHub accounts can head right to the front of the line and gain access right away.

a free jQuery slideshow by Pixedelic A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. Having Fun With CSS3: Spinning Newspapers Martin Angelov Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice. What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist.

App Showcase with Grid Overlay A tutorial about creating a simple grid overlay with subtle transitions for an app showcase. View demo Download source Today we will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up. When clicking on another screenshot, the device image gets updated and the grid disappears again. I've created a new jQuery plugin to handle image zooming, like you find on many e-commerce sites. Unlike many of the zoom plugins I've found, this one uses the mystical power of the forbidden Canvas Element to accomplish much of it's dirty work. It also takes advantage of Ben Alman's $.throttle() plugin to keep events bound to mouse-move in check. blog / 10 useful jQuery authoring tips Here's 10 tips that will makes you code more efficiently with jQuery. 1. Be lazy // Don't if ( $ ( '#item' ). get ( 0 )) { $ ( '#item' ). someFunction (); } // Or if ( $ ( '#item' ). length ) { $ ( '#item' ). someFunction (); } // Just do $ ( '#item' ). someFunction ();