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. Textures.js. Textures are useful for theselective perception of different categories View on Github Getting started.
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. 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: jQuery slimScroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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. 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.
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. 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. 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). 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). 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.
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> FitText - A plugin for inflating web type. Js. A gridster configuration object. Define which elements are the widgets. 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. Tubular, a YouTube Background Player jQuery Plugin.
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! 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. 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). Unslider — the super-tiny jQuery slider. Magnific Popup: Responsive jQuery Lightbox Plugin.
Tooltipster - The jQuery Tooltip Plugin. Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. Inside the file, declare your customized rules like this: For your secondary theme to be applied, provide an array of themes instead of just one.
Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Kamens/jQuery-menu-aim. MixItUp. ScrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer.
ScrollUp is a lightweight jQuery plugin to create a customisable “Scroll to top” feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for the user to get back to the top of the page. Progression.js.