background preloader

Effects

Facebook Twitter

Arrow Navigation Styles. Implementing the Float Label Form Pattern. "Look Inside" Book Preview with BookBlock. Challenges & Solutions for Your Responsive Navigation. One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down.

Challenges & Solutions for Your Responsive Navigation

Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page, a user should have no issues as they try to navigate around your website no matter what device they are on. So what are the latest design patterns? And what are the best plugins? Responsive Photosets — Coding & Design. First of all, we make things easy by shortening variables and fetching the parent container’s width: // Declare some variablesvar $pi = $(this).find('.photoset-item'), cWidth = $(this).parent('.photoset').width(); And then we generate an array containing all the aspect ratios of images in the same row.

Responsive Photosets — Coding & Design

This can be done by using jQuery’s very handy .map() function, where we iterate through all elements that match the selector. And since we have already created the jQuery data objects storing the original image dimensions, it is just a matter of fetching them and performing a simple arithmetic operation to get the aspect ratio: // Generate arrayvar ratios = $pi.map(function() { var orgWidth = $(this).find('img').data('org-width'), orgHeight = $(this).find('img').data('org-height'); return orgWidth/orgHeight;}).get(); Now, we want to fetch the sum of the ratio of widths of all images in that row. // Sum aspect ratiosvar sumRatios = 0, minRatio = Math.min.apply(Math, ratios); The code.

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. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. Exploring canvas drawing techniques. I recently started working on adding some good-looking brushes to Fabric.js.

Exploring canvas drawing techniques

We've had free drawing functionality for a while, but it was... laughable. Just a simple pencil of varying thickness. Far from anything you would see in those amazing drawing applications popping up in the last few years — Mr. doob's Harmony, deviantART's Muro, or mudcu.be Sketchpad. Elastic Stack. Saudade Tuqburni Retrouvailles Onsra Mamihlapinatapai.

Elastic Stack

BookBlock: A Content Flip Plugin - Demo 2. January 2013 Monday Tuesday Wednesday Thursday Friday Saturday Sunday.

BookBlock: A Content Flip Plugin - Demo 2

Baraja: A Plugin for Spreading Items in a Card-Like Fashion. Simple Icon Hover Effects with CSS Transitions and Animations. Previous Demo Back to the Codrops Article Mobile Desktop Partners Support Security.

Simple Icon Hover Effects with CSS Transitions and Animations

Animated Checkboxes and Radio Buttons with SVG. Previous Demo Back to the Codrops Article How do you collaboratively administrate empowered markets via plug-and-play networks?

Animated Checkboxes and Radio Buttons with SVG

Animated SVG Icons with Snap.svg. Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg.

Animated SVG Icons with Snap.svg

Today we want to explore what we can do with it and animate some SVG icons as a practical example. View demo Download source SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start.

With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons. Unfolding 3D Thumbnails Concept. A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.

Unfolding 3D Thumbnails Concept

View demo Download source Today we want to share a little 3D concept for an image slideshow (or similar) with you. The idea is to reveal thumbnails using a neat effect: the current image will be “opened” in the middle and the thumbnails view will unfold in 3D. 3D is absolutely in right now. With CSS 3D transforms we can explore new ways of playing with space and create depth and realism to normally flat elements. Check out the following inspiring concepts on Dribbble: Please note: this only works in browsers that support the respective CSS properties.

The images used in the demos are by Angelo González and they are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. Medium-Style Page Transition. An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out. View demo Download source Medium, a blogging platform which has gained popularity over the past several months, has one of the smoothest, most polished user interfaces on the web. As you click and touch the interface, you’ll notice that great attention has been paid to transitions, white space, color, fonts, imagery, and iconography.