background preloader

Plugins js

Facebook Twitter

jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. jScrollPane - cross browser styleable scrollbars with jQuery and CSS.

Flexslider.js

Untitled. Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Now, choose your fighter: Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle. jQuery slideViewer 1.2. Download slideViewer 1.2 (last updated july 9 2010) What's this? SlideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures.

Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture). You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips. You can choose where to put the user interface (the numbered links); it can be above or below your set of images. You don't need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) New! Galleria – Responsive JavaScript Image Gallery.

PhotoSwipe

jQuery Isotope masonry in fluid layouts. Mo · js - Motion Graphics For The Web. Masonry. PhotoSwipe: Responsive JavaScript Image Gallery. ¿La perfecta galería de imágenes? Usando PhotoSwipe con jQuery - Envato Tuts+ Web Design Tutorial. Recientemente descubrí una librería Javascript llamada PhotoSwipe y estoy realmente impresionado. Es una brillante librería que superpone una imagen o un grupo de imágenes en tu página, un efecto popularmente conocido como lightbox.

PhotoSwipe es actualmente desarrollada por Dmitry Semenov-él la reconstruyó el año pasado cuando tomó las riendas del proyecto. Las mejoras incluyen: Modular: PhotoSwipe es construida en varios módulos, permitiéndote omitir características particulares que no necesitas. La única desventaja es que PhotoSwipe no se ejecuta inmediatamente. "PhotoSwipe es hecha simple y rápida para los usuarios finales, no para los desarrolladores. Pero puede ser usada conjuntamente con otras librerías. Iniciemos. Comenzaremos con: Creando los directorios del proyecto. La estructura HTML es la parte más esencial ya que eventualmente indicará como escribimos JavaScript.

Ahora agregamos el código que PhotoSwipe usará para superponer las imágenes completas. Scrolling up with jquery waypoints. jQuery Validation Plugin | Form validation with jQuery. YairEO/validator. Jlmakes/scrollReveal.js. Multiscroll.js - split multi-scrolling pages plugin. ScrollMe - For simple scrolling effects. 50+ Best jQuery Parallax Plugin with Examples. PAXMAN.js : Scrolling Engine with Vector Control A Scrolling Engine for making sweet static single paged websites, quickly, and by using HTML markup as config.

Features: Parallax scrolling for BackgroundsAnchor triggered Class additions/removalsSVG MaskingChild Vectors LogosDistort : jQuery Advanced 3d Perspective Distortion This plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. Enllax.js : jQuery Parallax Scrolling Effect Enllax is an ultra-lightweight and super easy to use plugin for parallax scrolling effect.If you want your elements to scroll at a different speed, or you can say scroll with parallax effect, then this plugin made this super easy. jQuery Smooth Parallax Scroll Smooth parallax animations on vertical page scrolling using requestAnimationFrame and CSS3 3D transitions. Parallax Hero Image with CSS3 3D Transforms A full-width figure element, with floating images distributed in a 3D space. jQuery Parallax Scroll Plugin.

Enllax.js | a plugin for parallax scrolling effect by MMK Jony. jQuery.parallax. Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport.

There are various ways to style jParallax effectively. Options Layer Options Events. 30+ Brilliant Portfolio jQuery Filter Plugins Free & Premium - WpFreeware. jQuery filter plugin is a must have element for any kind of website which through you will be able to present portfolio works fantastically. Here I am going to show you some of the best free & premium filter jquery portfolio plugins. These plugins can be used for business, corporate, creative, portfolio or any other related to portfolio works showcasing purposes.

I assume you are a web designer & finding a best portfolio filterable jquery gallery plugin for your next project. If I am right then you are in the right place. Most of the plugins are responsive, comes with multiple filtering animations & effects, unique css3 animations, beautiful hover effects, some plugins are expandable & also each item has separate carousel slider which through you can showcase more images. Our Free Themes & Templates.. Go Free Filterable Plugins Go Premium Filterable Plugins Free Filter/Filterable Plugins Go Premium Plugins Isotope – Filter & sort magical layouts Jquery Plugins Preview Download Go Free Plugins. jQuery Content Expander - Sessionwise. I recently had the opportunity to work with another agency on the responsive front-end and custom WordPress development of a site they designed.

One of the features the design called for was a thumbnail grid with an expandable content area. The client wanted something similar to this one found in the codrops article thumbnail grid with expanding preview which is nothing short of amazing but we were not able to incorporate any custom content (such as a image gallery/slider) in the expanded area so I searched for an alternative. After a few failed plugin attempts, I found and used the Colio jQuery Portfolio Content Expander. Because we were using WordPress as a CMS, we were able to leverage Advanced Custom Fields to give the client complete control over the content.

The plugin is also fully responsive and incorporates Flexslider for the image gallery rotator. Here is an example of the result: Parallax.js. Jonathantneal/svg4everybody. jQuery Sticky Element. Jazz up a Static Webpage with Subtle Parallax. It's been one of the biggest web design buzz words for a while now, so today we're going to try our hand at a bit of Parallax. We're going to put together a simple responsive layout, then with the help of skrollr.js, we're going to apply a subtle parallax effect to the header. This tutorial will cover a few noteworthy aspects, so pay attention: Firstly, we're going to use a mobile-first fluid adaptation of the skeleton boilerplate.We'll need to grab an image, I'll be using morning coffee from Photodune.net.We'll grab a copy of Alexander Prinzhorn's skrollr.js to help with our parallax effect.In order to optimize my CSS I'll be using a Sass workflow.

Don't panic! Okay then! Our index.html is empty at the moment, then we have an img directory with our coffee image within it, a css directory with a reset file plus our fluid grid and an empty styles.css, patiently awaiting our input. Our index.html is going to begin with some very familiar elements: One tiny stylesheet to rule them all. Simple parallax scrolling tutorial. I have received many messages and a positive feedback regarding my recent parallax website tutorial. Based on your feedback I have decided to create another tutorial, this time aimed more towards a junior and mid developers. I will try to explain everything in more detail and you can also download the starting files to follow the tutorial step by step.

First have a look at what we will be creating and download the starting files. View Demo Download Starting Files Quick overview In this tutorial you will learn: how to setup your html for a parallax websitehow to animate background image at a different speed then page scrollinghow to precisely control the timing and duration of your animations.

Instructions Open the index.html, /css/main.css and /js/_main.js files in your favorite code editor. Step 1 – Setup CSS Each section has a custom background and the content is repositioned to the desired position. Step 2 – Skrollr.js Section 1 Get my free Skrollr tips and save heaps of time! Success! Jazz up a Static Webpage with Subtle Parallax. Brilliant Free jQuery Image Gallery/Slider Plugins. jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way.

You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room. However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. They aren’t ideal for every type of website, and in some instances they could actually hurt your website. The Problem with jQuery Image Sliders jQuery sliders can be great for certain types of websites, but disastrous for others if you want it to rank in Google. There has also been a lot of discussion about how image sliders can actually lower conversion rates for B2B sites. 1. 2. 3. 4. 6. 7. Checking if an element is visible on-screen using jQuery | Custom D - Web design & development without compromise, Christchurch & Sydney. Download jQuery Visible View Demo We recently built a little jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position.

If a user can see this element, the function will return true. The visual viewport is the part of the page that's currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.Peter-Paul Koch, quirksmode.org This method differs from the jQuery :visible selector in that the visible plugin checks to see whether the element is hidden using css (basically if offsetWidth or offsetHeight is 0). Our method checks if an element can be seen based on its position relative to the viewport.

Usage In its simplest form, the element can be checked as follows: $('#element').visible() $('#element').visible( true ) CSS Visibility $('#element').visible(true, true) Horizontal, Vertical and Both, oh my! Demos. LazyLoad. LazyLoad allows you to defer image loading until the user scrolls down to each image. Using LazyLoad can easily save you bandwidth and allow the page to load faster for the user. This plugin takes only a minute to implement so using LazyLoad is a must. How to use LazyLoad should be initialized during the DOMReady event. There are no required arguments -- only options. For specific usage and options, please read the documentation or visit Discuss A note on comments here: These comments are moderated. Found a bug in this plugin? Introducing LazyLoad 2.0 Example. 5 jQuery Infinite Scrolling Demos. Here are 5 demos which you could use as the barebones for your next infinite scrolling project. I’ve been playing around with infinite scrolling for one of my projects and I’ve tried a few jQuery plugins which can manage the “endless scroll” showing items, posts, rss feeds, tweets or anything really.

The content can be generated dynamically from JavaScript but most commonly loaded from a server script using AJAX. Also I found that Firefox 8 only detects the scroll upto 99.85% of the screen which was strange. Update 14/10/13: Full code for all 5 demos added to GitHub. Infinite Scrolling Demo 1 This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. Usage – HTML Usage – jQuery Infinite Scrolling Demo 2 Basic infinite scrolling script which can load data in using AJAX and displays a nice little loading image at the bottom (twitter style). Infinite Scrolling Demo 3 This demo loads in images on infinite scroll and never reaches the end. Infinite Scrolling Demo 4 6. Nathco/jQuery.loadScroll.

Processing.js. Lazy Load Plugin for jQuery. Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request. How to Use? Lazy Load depends on jQuery. You must alter your image tags. <img class="lazy" data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); }); This causes all images of class lazy to be lazy loaded.

PRO TIP! Setting Threshold Event to Trigger Loading. Snap fixed nav from bottom to top · Issue #174 · Prinzhorn/skrollr. Refresh Skrollr on window resize. Jquery - Disable Skrollr for mobile device ( <767px ) Skrollr – CSS animations linked to scroll position | Bram.us. Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: Skrollr will interpolate between the start and end value whilst you scroll.

Note that the resulting effect is different from the previously mentioned Scroll Animations. Whereas Scroll Animations triggers an effect when an elements scroll into view (and it cannot be undone once it was started), Skrollr is tightly linked to the actual scroll position/offset: scrolling up will revert the animation. A really neat (and CPU intensive) example is Flat Design vs. Realism. The folks over a Pingdom have created a little helper function, which they’ve used in their year in review page, to define all values via JavaScript.

Usage is as follows: I've knocked up a quick demo on codepen: Skrollr vs ScrollMagic | Comparison of scrolling animation plugins. Skrollr Cheatsheet - Skrollr data-attributes simpliified. Skrollr: How to Temporarily Apply 'position:fixed' to a Div.