Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
Here they are!
Auto-hiding header with CSS and jQuery
This is a cool tutorial that will show you how to easily create a Medium-style auto-hiding header with few lines of CSS and jQuery. The whole idea behind this UX pattern is that the navigation bar automatically hides when the user scrolls down and it becomes visible again when the user scrolls up again.
Pointy Slider is a CSS and jQuery powered slideshow with sliding panels that unveil background images. This is a very responsive and modern-looking slider with a very nice motion effect.
Presentation slideshow template
This is a simple presentation template, coded with few lines of CSS and jQuery. You can use it to create beautiful web slides. A free snippet is offered. We recommend this useful tool if you need an alternative to classic presentations created using native apps.
Sliding out panels with HTML & CSS
Chocolat.js is a free jQuery plugin for creating lightboxes. This is a lightweight, responsive and very powerful plugin. It lets you display one or multiple images staying on the same page. You also get the possibility to choose whether your images will appear as a link or as thumbnails.
Animated page transition with Ajax
This is a tutorial that shows you how to create an Ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation. Best part of it? You can easily follow this step-by-step tutorial to achieve the desired result even though you’re not an expert in coding.
Product grid with filter system
Check out this ready-made example of a product grid with filtering system using Isotope. It comes as a tutorial with free snippets. Also, a nice small cart icon activates when an item is added to the shopping cart, which makes this tool perfect for eCommerce websites.
Color extraction effect with Vibrant.js
This is another great tutorial about creating a little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. The color background has a cool, subtle animation that simulates the item being ‘filled’ with the extracted color.
Page scroll effects
Check out this mini-library including 8-page scroll effects you can use for your sliders. These cool effects take place when the user is surfing through any section of a website. Use this if you want to create a mesmerizing experience for your users.
ReadRemaining.js jQuery plugin
ReadRemaining.js is a jQuery plugin that tells your readers how long they’ll need to read your article. This plugin is very useful especially for news or magazine websites, as well as personal blogs that feature big blocks of text that require a certain time for reading.
Slideout.js is a lightweight and dependency-free plugin for creating a slide navigation menu for web and mobile apps. It includes native scrolling and it’s very easy to customize using different CSS transitions.
Grid item animation layout
This is a responsive website layout with a grid item animation effect that triggers when opening the content. This one is a simple effect with a responsive layout that gives you the possibility to control the transitions of all the elements you need.
Layzr.js is a small, fast, and dependency-free library for lazy loading images. It maximizes speed by keeping options to a minimum. You’ll see that by using this step-by-step tutorial it will be very easy to install and set up your images using some simple code lines.
Superb list Iggy, love the way you included latest JQuery resources.
Great list! I have actually been looking for a few good mobile nav options. Going to give these a try!
Thanks Iggy, that product grid with filter is going to save me some serious time!