background preloader

Jquery Plugins

Facebook Twitter

Galerie Img

Codrops. OnePage. jQuery custom content scroller. Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more. Current version 3.1.5 (Changelog)Upgrading from version 2 When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically).

Version 2 is still maintained and updated here. How to use it Initialization Initialize via javascript more info Initialize via HTML. Textures.js. Textures are useful for theselective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .style("fill", t.url()); Lines textures.lines(); textures.lines() .heavier(); textures.lines() .lighter(); textures.lines() .thicker(); textures.lines() .thinner(); textures.lines() .heavier(10) .thinner(1.5); textures.lines() .size(4) .strokeWidth(1); textures.lines() .size(8) .strokeWidth(2); textures.lines() .orientation("vertical") .strokeWidth(1) .shapeRendering("crispEdges"); textures.lines() .orientation("3/8") .stroke("darkorange"); textures.lines() .orientation("3/8", "7/8") .stroke("darkorange"); textures.lines() .orientation("vertical", "horizontal") .size(4) .strokeWidth(1) .shapeRendering("crispEdges") .stroke("darkorange"); textures.lines() .orientation("diagonal") .size(40) .strokeWidth(26) .stroke("darkorange") .background("firebrick"); Paths.

Type.js. Please JS. Infinity.js. A ListView is a container that moves content in and out of the DOM on the scroll event. ListViews help keep repaint times of expensive pages down (and scrolling smooth) by making sure that there are never too many elements onscreen at a single time. ListViews excel at speeding up long lists of complex HTML elements, where new content is frequently appended to the end and existing content is rarely removed. ListViews are simple, and have several caveats: they can't be nested inside each other, and they can't have heights set via CSS. Additionally, ListViews can't easily change sizes except by appending or removing elements, and so list items that need to slide open or change their sizing will be difficult to implement.

Appending elements to a ListView is relatively fast, but removing elements is slower — so designs that need to remove elements multiple times a second at high framerates will struggle. Endless Scroll Demo (by Fred Wu) Boba.js / space150. Odyssey.js. Outdated Browser. Create a Subtle Zoom Animations on Images on Scroll with jQuery Zoom Scroller. Davist11/jQuery-One-Page-Nav. PACE — Automatic page load progress bars. Chart.js | Open source HTML5 Charts for your website. Prinzhorn/skrollr. Select2 3.5.0. Progress.js - Themeable progress bar library.

Circle Navigation Effect with CSS3. Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows.

The effect is done with CSS3 transitions. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. The Markup For this little CSS3 effect we will have a navigation structure that looks like the following: <div class="cn-nav"><a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(.. In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. The CSS Let’s see now, how to add the style for this navigation. The spans’ background image (righ and left arrow): Now, let’s define what the elements will look like on hover.

jQuery slimScroll | rocha.la. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Pellentesque rhoncus aliquet porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nulla rhoncus elementum convallis. Nullam scelerisque facilisis pretium. Facebox 1.3. What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves. Why another lightbox? Because we wanted, nay, needed a Facebook-style lightbox on FamSpam. Load Dependencies Make sure jQuery is loaded before Facebox. Attach It onLoad While calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onLoad. jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) Extra Classes You can give the facebox container an extra class (to fine-tune the display of reusable remote pages) with the facebox[.class] rel syntax.

Maybe your Terms and Conditions can be loaded standalone or via Facebox. View an an example which makes the remote.html page bigger and bolder using css. The Code <a href="remote.html" rel="facebox[.bolder]">text</a> Arbitrary Text Remote files. Gmap : Smashinglabs. What is gMap? gMap is a jQuery plugin embedding Google Maps into your website. It allows you to: set center, zoom level and type of map add multiple markers with custom icons, popups and titles position marker by latitude/longitude as well as by its address set your customized map controls retrieve map object and use it for even most complex tasks Purpose of gMap is to help you keep your code clean and to create Google Map in very easy way, without learning its API.

In future versions gMap will be improved with functions that are hard to achieve with Google Maps. Hopefully it will turn into great data visualisation tool, while still maintaining its simplicity. Latest stable release: 3.3.0 Donate gMap is free and will stay that way as long as I'm in charge. Social Like Smashinglabs on Facebook to get gMap updates and other JS news. Example This tiny line of code is being used to embed the map below. What has happened to V2 version? It's still available here. Brandonaaron/jquery-mousewheel.

Freewall - jQuery plugin for creating grid layouts. Transit - CSS transitions and transformations for jQuery. What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! $.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds.

Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering. qTip2 - Pretty powerful tooltips. Inspiration for Article Intro Effects. Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body. View demo Download source Today we want to share some inspiration for article intro effects with you. You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue.

We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. One really nice effect that we tried to imitate, is the one seen on Jam3 when choosing a project. Most of the effects we tried are highly experimental; animating large images can become a bit sluggish, also because a couple of transitions happening at the same time. The forth effect cuts away the image and pushes the title to the side. FractionSlider: jQuery parallax Slider Plugin | jacksbox.design. FractionSlider is a jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element.

You have full layout and design control through html and css (every html-element can be animated). This Plugin is published under the MIT license New version: 0.9.9.9 IE bugfix: images without width/height get calculated correctlypager: You can now set a jQuery-Object as pager-wrapper outside of the slider New version: 0.9.9.8 New features arriving:Plugin option: pauseOnHover The slider has now the pause on hover functionality.Plugin option: increase The slider can get bigger than the specified dimensions (useful for responsive design)Plugin options: callbacks I added support for a lot of custom callback functions (see Plugin options for more information) New version: 0.9.9.4 Finally some IE bugfixing. jQuery Easing Plugin. Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2.

Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different).

Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom. jPreLoader v2 - A jQuery preloader for Website. Imakewebthings/jquery-waypoints. WOW.js - Reveal Animations When You Scroll. Very Animate.css Friend. jQuery Text Editor. Responsive Lazy Loading plugin for JQuery | BttrLazyLoading. Croppic. Velocity.js. 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. FitText - A plugin for inflating web type. Js. A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. The first index is the width, the second is the height. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create.

Min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. Draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){} Hook.js - Pull to refresh. For the web. 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. 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? Lettering.js - A jQuery plugin for radical web typography. Arctext.js - Curving text with CSS3 and jQuery. Examples. jQuery Knob demo. jQuery plugin for Avgrund concept popin. Unslider — the super-tiny jQuery slider. Magnific Popup: Responsive jQuery Lightbox Plugin.

Tooltipster - The jQuery Tooltip Plugin. Kamens/jQuery-menu-aim. MixItUp. ScrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer. Progression.js.