Today we want to share an experimental “morphing” slideshow with you. The idea is to transition between different devices that show a screenshot of a responsive website or app by applying a “device class”. By using the same elements and pseudo-elements for all the devices, we can create an interesting morph effect. We will control the classes and the switching of the image with some JavaScript. We’ve also added an option for autoplaying the slideshow and for rotating some of the devices.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Showbiz : jQuery Responsive Teaser WordPress Plugin
Showbiz Pro is a jQuery responsive teaser displaying solution that allows you to show WordPress Posts or any Custom Content with a set amount of teaser items.
Features:
- Display Posts and/or Custom Post Types (e. g. Portfolios)
- Fully Responsive & Mobile Optimized (Smartphones & Tablets)
- Drag & Scroll Function
- Smart Loading of Embeded Videos (YouTube and Vimeo)
- Light Weight jQuery and CSS
- Unlimited Slides
- iPhone & Android Swipe Touch enabled
- FullWidth and Single Width Reveals
- Customizable 100% via Plugin Parameters / CSS / HTML
- Easy installation in your Website
- Fast CSS3 & jQuery Engine
- Fancybox 2 Lightbox Plugin on Multi Domain License included ($89 Value)
- Set Amount of Entries in 4 Level for Responsive Look
- Drag & Scroll Function
Mini AJAX File Upload Form with jQuery
In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.
Responsive HTML5/jQuery Sign In/Registration Form
Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.
Features:
- it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
- really easy to use and to integrate into your website
- cool effects
- html5 custom validation
- responsive layout
- really easy to modify (100% CSS customizable)
Horizon Slide Navigation jQuery Plugin
Horizon Menu is a dedicated jQuery plugin where you can create custom menus that slide beautifully in your web browser. It’s reponsive, meaning mobile first. Mobile and tablet UI is fullscreen meaning it’s user-friendly and easy to navigate.
Features:
- IE8+ Compatible
- Full browser support
- Cross Compatible Device Ready
- 120+ Fully Scalable Icons Font
- 6 Themes with the ability to create your own
- CSS3 animation support with IE fallback
- Position your menu on the left or right side of your browser
- As many menu items and submenus as you desire
- Animation in and animation out fully supported
- Fullscreen for media with window sizes
- PC, Mobile and Tablet Touch Compatibility
Magnific Popup : Responsive jQuery Lightbox Plugin
Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).Magnific Popup displays images before they’re completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.
Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size.
MixItUp : A CSS3 and jQuery Filter & Sort Plugin
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It’s perfect for portfolios, galleries, blogs, or any categorized or ordered content!
MixItUp uses jQuery to decide which elements to hide, show or re-position based on your filters, and then applies the power of CSS3 transitions to smoothly animate these elements to their new locations. It’s an extremely efficient approach that makes the most of your modern browser’s rendering power, and avoids more resource-heavy approaches involving jQuery .animate() and position: absolute.
Create A Google Plus App Tile Animation with CSS3 and jQuery
I have always been fascinated by the new Google Plus app on iPhone and Android. Every interaction seems to be very fluid and make sense without sacrificing the performance. The tile animation while scrolling through news feeds makes it even more enjoyable to scroll through content. Wouldn’t it be nice to have such an animation on your website? Today, I am going to show you how to create a beautiful tile animation like in the Google Plus app using CSS3 and jQuery. (Webkit-Browser Only)
ZoomFolio : jQuery Portfolio Plugin
DZS ZoomFolio is the ultimate plugin for displaying your creative portfolio to your clients and that’s not all. You can use it to show the recent posts from your blog or a gallery from your vacation. The possibilities are endless.
Features:
- easy to install – install and get this plugin ready in less then one minutes.
- responsive – looks great from mobile to HD
- CSS3 technology – this gallery uses cutting-edge css3 definitions to render awesome 3D effects in supporting browsers, the others will degrade gracefully
- compatible with all major browsers, including IE – compatible from IE7 to IE10, Chrome, Safari and Firefox
- SEO friendly – built with search engine optimization on mind from the ground up, the ZoomFolio portfolio uses non hidden valid html markup to build the widget
- iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
- Android optimized – this component has been tested on Android 4.0 and works awesome
