Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
mightySlider : jQuery Responsive Slider
mightySlider is a jQuery plugin for creating advanced one-directional slider with item based navigation support.
It can be used as a simple image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.
Features:
- Responsive design.
- Animated HTML captions with customizable effects.
- Easy installation in your Website.
- Unlimited Slides.
- Unlimited Caption Layers.
- Unlimited Caption Effects.
- Native browser fullscreen support.
- Cross browser, supports Chrome, FireFox, Safari, Opera and IE7+.
- Device friendly, works in iPhone, iPad, Android Devices and Windows Phone.
- Highly User Interface Design.
- Fully customizable, it’s possible to customize or redesign all parts of mightySlider.
- Search engine optimized (SEO).
- YouTube and Vimeo videos are supported.
- Super smooth hardware accelerated CSS3 transitions for supported touch devices.
- Smart lazy loading – loads nearby images in background, so users don’t need to wait each time and images are available instantly.
- Simple clean & valid markup.
- Deep linking – link to specific slide from URL.
- Adjustable speed, transition and easing for each caption or slide.
- Auto cycling with optional pause on hover.
- Thumbnails, Tabs or bullets for navigation.
- Multiple sliders allowed on one page.
- Keyboard support.
- Touch support.
- Mouse support: (Click, Wheel).
jQuery End Page Box : Displaying a Box at the End of the Page
In this day and age, we are all competing for attention. The longer people stay on your website and drill down to your content, the better. Today, I have decided to implement a plugin called End Page Box that will let you easily show any dialog when the user scrolls to the bottom (or any range) of the page.
You can use it to recommend other posts on your website, show related posts, or even to annotate the page with extra information which will eventually create a richer and deeper experience for your users.
This plugin will keep track of your scroll location and whenever you scroll to the specified area, the plugin will automatically display the dialog until you go out of range. The animations available are a combination of jQuery for basic animations such as fade and slide, and CSS3 (defined in endpage-box.css) for more complex ones.
freewall : jQuery plugin for Creating dynamic Grid layout
Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet. Freewall is all-in-one solution help you to create many types of grid layout (flexible layout, grid layout, images layout, pinterest-like layout, etc) with nice CSS3 animation effects and call back events..
Making HTML dropdowns not suck with CSS3 & JavaScript
Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border.
In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance.
Filterize Responsive CSS3 Portfolio Gallery
Filterize. CSS3 portfolio gallery is made to present your projects, images and references with ease and style.
Features:
- Clean design and commented code
- Easy to customize to fit your design and color pallete
- Made with pure CSS3 and HTML5
- Responsive and adaptive to various screen sizes
- Category filters
- 3 ready themes
- 4 column layouts for each theme
- 2 columns
- 3 columns
- 4 columns
- Full width layout
- Animated overlays
- Quick links for better user experience
- Lightbox for detailed image and project presentation
- Lightbox navigation
- Custom scrollbars
Animated Checkboxes and Radio Buttons with SVG
By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.
Cream Soda Responsive jQuery News Ticker
Cream Soda jQuery Ticker is an ultra light, responsive, plug and play component that you can drop straight into your website. jQuery Ticker looks professional, with clean styling and elegant sliding animations. This version of Cream Soda jQuery Ticker supports three modes; vertical, horizontal and mini.
Features:
- Responsive
- Cross Browser Compatible
- Light & Ultra Customisable
- Minimal coding required
- Three ticker types (Vertical, Horizontal & Micro)
- Custom Animation Options
- Custom CSS Options
- Highlight featured items
- Excerpt/Truncate Options
- Navigational Buttons
- Supports imagery
- Auto play options
- Smart pausing and interaction options
- Accepts static content or XML/RSS feed content
- Custom links from each item
- Custom link targets
- Manage item lengths
FlatIco : Long Shadow Flat Icon Generator
Create the nowdays ultra trendy flat icons with long shadow for your website with a 1 minute set-up and you are ready to go flat! This lightweight plugin is only 2KB, but gives all the customization opportunity what you need to create cool flat icons with long shadow for your upcoming project. FlatIco is based on the FontAwesome icon-font library what provides you more than 300+ icons to choose from, and the flat icons are generated with pure CSS, so no need for any images!
Features:
- 1 Minute super easy set up
- 2KB Lightweight plugin – it requires only one js file
- Customize the icon’s color and size
- Set easily the icon frame’s border radius and color
- Edit the long shadow length and color
- Cross browser compatible
- Ultra trendy flat design
Megazoom Image Viewer with JavaScript & CSS3
Megazoom plugin is a powerful, versatile, easy to use and customize image navigator for displaying large images prepared for showcasing products (high resolution product images, e.g. clothes, cars, technical schemes etc), displaying maps, and any other images, with its zooming, panning, dragging, navigation controls, scrollbar, zoom buttons,and highly customizable markers.It has a responsive layout making it perfect for any type of page layout.
Features:
- Tons of options (check them out in our live previews).
- Easy to use and install.
- Fully Responsive & Mobile Optimized (Smartphones & Tablets).
- Fast CSS3 & JavaScript engine with fall back on CSS1 for older browsers like IE7 or IE8 (exceptional performance!).
- Responsive layout.
- Three dispay types: responsive, fullscreen and lightbox.
- Support for large image resolution, we have made successful tests with images up to 6000px width and/or height.
- The zoom factor(maximum zoom level) and start/initial zoom factor (initial zoom level) can be specified.
- The animation zoom speed and animation pan speed. can be set.
- Double clik zoom and double clik zoom factor (optional).
- Mouse wheel support on desktop.
- Mouse drag on desktop or touch drag on mobile.
- Gestures event support on mobile, the image can be zoomed with two fingers!.
- Keyboard support (optional).
- Animated preloader, the preloader text can be modified.
- Navigator window (optional).
- Complete control buttons bar with buttons.
