background preloader

Codrops

Facebook Twitter

Creative Gooey Effects: Chat App. 42 jQuery Navigation based Techniques. Here’s a list of 42 jQuery Navigation Techiques, Navigation plugins, and Tutorials built using jQuery: 1.

42 jQuery Navigation based Techniques

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.

Nifty Modal Window Effects

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.

On Scroll Header Effects

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. Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.

Perspective Page View Navigation

This navigation idea is seen in mobile app design and we wanted to explore some more effects. 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.

Inspiration for Item Transitions

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.

A Collection of Separator Styles

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.

Page Loading Effects

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. The way we show the loading overlay is by defining an animation on a path that we define in the following SVG: We define an initial path that is not visible in the viewport inside of the SVG and a opening and closing path in data attributes on the pageload-overlay division. Width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

A Collection of Page Transitions. Multi-Level Push Menu. An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

Multi-Level Push Menu

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. Grid Item Animation Layout. A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.

Grid Item Animation Layout

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: