Creative Gooey Effects: Chat App. Hey this is a demonstration of the gooey effect on a chat window please type something on the field below oh and press enter :0.
42 jQuery Navigation based Techniques. Here’s a list of 42 jQuery Navigation Techiques, Navigation plugins, and Tutorials built using jQuery: 1.
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery site : visit live demo : here 2. jQuery Coda Slider site : visit live demo : here 3. Designing the Digg Header: How To & Download site […] Sliding Letters with jQuery. Thumbnail Grid with Expanding Preview. Nifty Modal Window Effects. A set of experimental modal window appearance effects with CSS transitions and animations.
View demo Download source Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration. The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).
Please note: this only works as intended in browsers that support the respective CSS properties. On Scroll Header Effects. Some inspiration for headers that animate when scrolling the page.
View demo Download source 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.
Please note: this only works as intended in browsers that support the respective CSS properties. Also note that scrolling super fast might cause a jump from the beforementioned class A to class C which might not always look very fancy. The header is composed of various parts for showcasing all the effects. Perspective Page View Navigation. SVG Drawing Animation. A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. Inspiration for Item Transitions. Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background.
State transitions are done using CSS Animations. View demo Download source Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use cases: a small image slideshow, a large header slideshow and a slideshow using product images with a transparent background. These transitions don’t have to be restricted to a slideshow, of course. A very special case is the usage of (product) images with transparent background. For transitioning the state, we are using CSS Animations. One of the transitions that can be viewed in the large header slideshow example is based on Hakim El Hattab’s slick context-shift transition, Kontext, and another one makes use of one of Lionel’s CSS Shake animations.
Sidebar Transitions. A Collection of Separator Styles. A collection of separator styles for horizontally dividing sections on a website.
The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you. When you have several sections in one page, it’s nice to separate them with some kind of line or background. There are so many possibilities and we want to show you just some of them that could look nicely for some flat design. SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape.
And now, dig in, scroll and get inspired! Page Loading Effects. A set of creative page loading effects that use SVG animations with Snap.svg.
The idea is to show an overlay with a interesting shape animation while new content gets loaded. View demo Download source If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite trendy lately and we wanted to give you some inspiration. The idea is to animate a shape into the viewport and show an activity indicator. Please also note that the examples only serve for your inspiration. A Collection of Page Transitions. Multi-Level Push Menu. An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.
View demo Download source Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus.
Simple Effects for Drop-Down Lists. A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.
View demo Download source Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects. After the great custom drop-down list styles made by Hugo in his tutorial Custom Drop-Down List Styling, we wanted to make it simple to create a custom structure from a normal select input (without multiple option selection).
Please note that the CSS transforms and transitions only work in browsers that support them. Without JavaScript, the normal select input will simply be shown. The icon font was created with IcoMoon. Grid Item Animation Layout. A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
View demo Download source Today we’d like to share a simple animated grid layout with you. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid (inspired by a concept by Virgil Pana) and in the second demo, the whole layout moves to the left while the grid item is expanding (inspired by this Dribbble shot by Sam Thibault). The expanding element (which is a dummy element and not the grid item itself) is not animating in width and height but instead its original dimensions are already of the expanded size and we simply scale it down initially.
The layout is responsive down to mobile using a media query technique that involves setting the breakpoints based on the grid item size and the sidebar. The main markup looks as follows: