Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, like Swiss Army Man or CMMNTY. Today we want to explore some different layouts combined with some engaging CSS animations.
Best jQuery Animation Plugins & Tutorials with Demo
Particler : JavaScript Animated Canvas Particles Plugin
Particler is a pure javascript plugin which creates a canvas-particles based on your image. You can easy set up behavior of particles and make awesome stuff.
Features:
- No dependencies — pure javascript;
- Simple usage;
- Easy customisation;
- 15 options to set up particles behavior;
- Small size — only 7kb minified, 3kb gzipped;
- Good documentation and examples;
- 3 built-in particle shapes.
Cannon.js : JavaScript 3D Physics Engine
A lightweight 3D physics engine written in JavaScript. Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js. The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.
Features:
- Rigid body dynamics
- Discrete collision detection
- Contacts, friction and restitution
- Constraints
- PointToPoint (a.k.a. ball/socket joint)
- Distance
- Hinge (with optional motor)
- Lock
- ConeTwist
- Gauss-Seidel constraint solver and an island split algorithm
- Collision filters
- Body sleeping
- Experimental SPH / fluid support
- Various shapes and collision algorithms
Scroll to Style jQuery Plugin
scrollToStyle is a versatile tool that lets you manage CSS properties of elements using the page scroll.
You will be able to compel the elements move, change their size, color, opacity, background and many other properties.
Features:
- Management absolutely all the properties of a numeric value
- Browser Support depends only on selected properties
- It manages multiple properties of the same element
- Management fractional property values and control the number of decimal places
- Fixing of the screen during an animation
- Animation range control
