An on scroll effect template that animates the sides of sections once they are in the viewport.This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in the viewport and decided to create a Blueprint for it. It works with adding a class for animating the two sides of a section. There is an example effect defined and also some media queries for dealing with smaller screens.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
On Scroll Header Effects with jQuery & CSS3
You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.
Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.
jSliderPro : jQuery CSS3 Responsive Slider
- – Transition engine that can generate an incredible number of stunning effects. More possibilities incoming with the very next releases.
- – No images limits and automatic memory management.
- – Javascript callbacks to interface with other programs.
- – CSS3 and HTML5 only.
- – Fully responsive and cross browser compatibility from desktop PCs to mobile devices.
- – Reference manual and hundreds of examples included.
Everslider : Responsive jQuery Carousel Plugin
Everslider is fully responsive, mobile optimized jQuery carousel plugin. It uses CSS3 transitions for animations with fallback to jQuery. Supports unlimited slides with any content. Everslider recognizes touchswipe, mousewheel and keyboard interactions and works in vast range of browsers starting with IE7 up to mobile browsers.
Features:
– Fully responsive and mobile friendly
– Retina-ready controls (PSD included)
– Hardware CSS3 transitions with fallback to jQuery
– Works in IE7+ and on Android and iPhone
– Keyboard and mousewheel support
– Drag and touchswipe support
PopCircle : jQuery Florid Customize Image Gallery Plugin
Pop Circle is a Florid Jquery Plugin for Customize Image Gallery to turn the Html image element into a Pop Circle..
Features:
- Can customize the pop circle limits based on your needs.
- Can Show the Popcircle around the trigger as full circle, half circle or quarter Circle.
- Easy to customize animation time and easing functionality
Flare : jQuery Optical Flare FX
This is a plugin for jQuery which animates a colored optical flare to slide across elements. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.
Features:
- Cool movie-style effect also used in games such as Sleeping Dogs.
- Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
- Uses modern CSS techniques.
- Customizable glow color, speed, glow radius, and trigger event.
- First Optical flare effect without use of images.
Smart Image Tooltip with jQuery & CSS
Smart Image Tooltip is easy to use and setup plugin that can show images as tooltips for thumbnails or normal links. Plugin requires proper structure for the HTML used, and it supports adding all sorts of extra data that can be displayed inside the tooltip. Tooltip can be styled using CSS and it supports template for rendering. Plugin supports mobile/touch based devices to open tooltip on hover or click depending on the device or the plugin settings. There are many other settings to control plugin available.
Features:
- Preload image before displaying tooltip
- Customizable preload animation and reposition tooltip
- Various demos and examples to show how menu can be set
- Full source files for both CSS and jQuery
- Minimized CSS and JS files
Animated Books with CSS 3D Transforms
A creative way to show interactive books using CSS 3D Transforms.In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions.
We’ll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and some extra little details.
elementTransitions.js : jQuery CSS3 Transitions Effect Plugin
This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.
