jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content. jScrollPane - cross browser styleable scrollbars with jQuery and CSS.
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? 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!)
Galleria – Responsive JavaScript Image Gallery.
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. Ésto mantiene la librería muy ligera. La única desventaja es que PhotoSwipe no se ejecuta inmediatamente. Scrolling up with jquery waypoints. 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. A plugin for parallax scrolling effect by MMK Jony. jQuery.parallax. Download git clone github.com/stephband/jparallax Instantiation.
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. 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. 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! I won't actually be using any Sass syntax to speak of, just compiling all my stylesheets, giving me one tiny minified CSS file. Okay then! 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. 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.
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). 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. 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. 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. 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. 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. 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: Comparison of scrolling animation plugins. Skrollr or ScrollMagic? Which one should you choose and why? This might be the question you ask yourself when you start a scrolling animation project. Here is my opinion on when you should use it and when you should stay away from it. Keep scrolling… Quick Overview. Skrollr Cheatsheet - Skrollr data-attributes simpliified. Skrollr: How to Temporarily Apply 'position:fixed' to a Div.