A gallery of project preview images that expand on click to reveal the full case study.In this example we take advantage of CSS Transitions and Transformations, and of the background-attachment CSS property to create a “diving-in” effect and reveal additional content for each project.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Dynamic Pricing Table with CSS3 & jQuery
I’m going to recreate a Dynamic Pricing Table inspired by the pricing table from Website Chef. The main point of this is to have an editable list of options that will recalculate the features and price of the whole table. As you toggle different addable “Packages” extra features will pop into view in the table as well as updating the overall price.
3D Card Previewer with CSS3 & jQuery
I’ve been working on a movie review based site and I wanted to try and create a movie previewer. I’m incorporating CSS3 transform’s perspective and rotation. The previewer consists of a list of 3D Card movie posters tilted to the right and one featured movie blown up full size. You can switch in between featured movies by clicking on each movie poster.
Google Maps Draw Module with jQuery
Google Maps Draw Module is a useful tool for web developers who want to build web apps for drawing on maps in the front end. It is based on modern tools such as Google API v3, jQuery, Javascript, Bootstrap, HTML5 and CSS3.
This module provides a responsive graphical interface to users for adding markers and drawing polygons, rectangles, polylines and circles in order to create maps online. Users are able to add/edit/delete objects on Google Maps. Also users can enter title and description for all objects they create.
Sandywatch : Responsive HTML5 Countdown Canvas
Sandywatch is a fully responsive, creative, clean and mobile friendly coming soon / under construction innovative canvas animation. Sandywatch comes with three distinct themes and provides a nice admin interface for handling email subscriptions.
Features:
- Unique HTML5 Canvas Sandywatch animation
- Three distinct themes
- Retina Ready
- Optimized for mobile
- Responsive and mobile friendly design
- Custom countdown plugin
- Simple to setup from the get go
- AJAX email subscription with validation and support for
- Various sql databases (SQLite, MySQL, PostgreSQL, SQLSRV)
- Export to CSV files
- Mailchimp Seamless Integration
- Valid HTML5/CSS3
- Gracefully degrades in older browsers
- Responsive admin interface with subscriptions statistics
jQuery FancyIndex Plugin
Nowadays almost every “fresh” page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.
Features:
- Using the directory-function upgrades the user’s experience
- Customizable trough settings and CSS
- Highly compatible
- Highly customizable
- Uses CSS3 transitions by default
CSS3 Sliding Header Layout
Today we’d like to show you how to create a simple grid layout with a special header effect. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. We’ll be using some techniques like Flexbox and CSS Transitions for modern browsers.
Shrinking Fixed Top Bar with jQuery & CSS3
A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I’m going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we’ll add a couple of media queries to make our menu responsive.
Bee3D Slider : Touch-Enabled Pure JS Plugin
Bee3D Slider is a floating 3D slider and carousel plugin built with pure Javascript and CSS3 transformations!
Features:
- Touch-Enabled
- 9 3D Effects available, with more on the way…
- Autoplay, with optional pause on hover
- Infinite Loops
- Parallax effects, optional
- Auto-Focus on load
- Lightweight, 5KB minified
- Responsive Image Support
- Video Carousels
- Mobile-friendly
- Extensible callbacks
- Styles come in LESS, SASS, and Stylus
