jQuery Plugin Directory

Tag: animation · Page 2 of 38

8 years ago

Letter Effects and Interaction Ideas with CSS

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

Letter Effects and Interaction Ideas with CSS

8 years ago

On-Scroll Morphing Background Shapes with SVG

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Julian Garnier’s anime.js and the scroll detection is supported by Stu Kabakoff’s scrollMonitor.js.

On-Scroll Morphing Background Shapes with SVG

8 years ago

Folder Preview Ideas with CSS

oday we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Folder Preview Ideas with CSS

8 years ago

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js is a jQuery plugin for controlling CSS styles over time. There are almost endless possibilities for using timed CSS properties. You could change webpage colors to make them more calm at night and more contrast during daytime, or hide a specific element in a certain time, or just move an element in sync with time…

STIMED.js : jQuery plugin for controlling CSS styles over Time

8 years ago

Developer/Designer Page Layout Concept with JavaScript

Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When you open the demo, you’ll notice a kind of “glitch” effect on some words and also on the portrait. The glitch reveals the “coder side”. When clicking on the “coder” switch in the lower left corner, the image will be taken apart and animated with little rectangles, revealing another image behind. At this point everything will switch to the developer (or coder) view.

Developer/Designer Page Layout Concept with JavaScript
FirstPrevious1234NextLast