tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect download Download here or go to github. Released under GPL how to use Call the plugin on any collection of images you want by adding the following jQuery: jQuery(document).ready(function() { $('.tiltshift').tiltShift(); }); Parameters on each image must be set using the HTML5 data attributes, like this: The attributes will control various variables that influence the tiltshift effect. -position (0-100), defines the point of focus. 66 would be two thirds of the way in. notes As previously stated, currently only supported by Chrome & Safari 6. authors tiltShift.js is brought to you by Noel Tock, a WordPress, front-end and startup dude. Additional code by Adam Yanalunas, a dude who is passionate about stuff and things … especially front-end development stuff and JavaScript things. photo credits If you're interested in licensing any of the images, please contact the photographers by following the links below: Airplane / Stadium / Ocean / Skyscraper
Masonry tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
Packery examples The Basics When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. Bloodhound (Suggestion Engine) For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. Prefetch Prefetched data is fetched and processed on initialization. Remote Remote data is only used when the data provided by local and prefetch is insufficient. Custom Templates Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. Default Suggestions
jQuery Gridly Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks. Example Add Installation To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following: Setting up a gridly is easy. Copyright (c) 2013 - 2014 Kevin Sylvestre jQuery plugin for Avgrund concept popin Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). You can simply init Avgrund with one line and linking 'avgrund.css' file: $('element').avgrund(); Avgrund has several options for you to customize it easily: Avgrund plugin was inspired by Hakim's Avgrund.js demo.
15 Best jQuery Grid Plugins for Developers Todays requirement when designing and developing a website is based on Responsiveness, where ones website must be able to adapt and resize across all handheld devices – thus: our thinking towards a tablet – like approach must incorporate fluid and adaptive as well as responsive layouts in developing a website. Most website design today seems to rely on the Grid system and layout, which allows designers a way by which to organize content on a page, using any combination of margins, guides, rows and columns. Grid design is most commonly seen in newspaper and magazine layouts which consist of columns of text and images. The amount of grid layouts which can be created is basically limitless and can be arranged in a myriad of ways, such as : equally sized two, three and four-column grids with a header across the top, as well as a full-page grid of squares with a consistent look and feel. 1. 2. S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. 3. 6. 7. 9.
Turn.js: The page flip effect in HTML5 Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. Let's code <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div> Features ✓ Works on iPad and iPhone. ✓ Simple, beautiful and powerful API. ✓ Allows to load pages dynamically through Ajax requests. ✓ Pure HTML5/CSS3 content. ✓ Two transition effects. ✓ Works in old browsers such as IE 8 with turn.html4.js Requirements jQuery 1.3 or above. Browser Support Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8 Devices ✓ All iOS (iPad, iPhone, iPod) ✓ Android (Chrome for Android) Improvements Turn.js 4 includes a set of significant performance improvements on its core. Complements Support About
Grid-A-Licious Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. At first, people were very skeptic and confused on how to read the grid, and thought this kind of layout belonged in real papers. This reaction slowly faded away once the layout became more and more popular when different developers and designers started to create their own script's interpretation of the floating grid layout effect. In Dec 2008, I decided to wrap the script into a Wordpress theme and release it as a christmas gift to the world. Today this floating grid layout effect is heavily used around the net and there are tons of different variations of the script to download and use. So, why am I continuing developing this? If this is something you’ve been looking for, go ahead and download the plugin and use it.
Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast