background preloader

Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

Collect UI - Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

Related:  inspiration web designfreeddycomAnimation

jQuery Animated Typing with Typed.js Typed.js typed.js — bash — 80x25 $ Typed.js is a jQue| Type your heart out, with Typed.js Businessweek Design 2016 Janine Benyus is a biologist, innovation consultant, and author of six books, including Biomimicry: Innovation Inspired by Nature. Since the book’s 1997 release, she has evolved the practice of biomimicry, consulting with businesses and conducting seminars about what can be learned from the genius of nature. Benyus has personally introduced millions to the meme of biomimicry through two TED talks, hundreds of conference keynote presentations, and a dozen documentaries, such as Biomimicry, produced by Leonardo DiCaprio’s Tree Media, 11th Hour, Harmony, and The Nature of Things with David Suzuki, which aired in 71 countries. Most recently, she has been a featured speaker at SXSW Eco 2015 and the Dubai Sustainable Cities Summit.

Multi-Layer Page Reveal Effects A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration. View demo Download source Today we’d like to show you how to create a simple and modern page transition effect. Maybe you have spotted some of the cool effects seen on sites like Nation or Keep Portland Weird, where two or more layers of overlays are animated across the page to reveal some new content. Let’s see how we can do something like that. ordinarypeople STANDARD.a WEBSITE DESIGN FOR 'STANDARD.a' Work with Rows & Columns 2014 Main Shop List Shop View Creative SVG Letter Animations An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way. View demo Download source Maybe you’ve seen some of those interesting text animations recently, like the one shown on the website of Control Films or in hover effects for image captions: letters disappear and appear in an artistic way, getting drawn along their lines. While we’ve had a great share of stoke animation effects for images, shapes and borders, letters are something really special. Today we’d like to share an experimental plugin with you that allows to animate a font letter-by-letter in a creative way.

CSS Animated Headlines A collection of animated headlines, with interchangeable words that replace one another through CSS transitions. Browser support ie Chrome Firefox Safari Opera 9+ I recently stumbled upon the Year in Music 2014 website. Among some fancy effects, the animated headline captured my attention.

Wireframe Effectively on the New, Improved 970 Grid System by anthony on 12/03/10 at 3:56 pm Page layout is an important aspect of web design. A popular approach to designing page layouts is to use a grid system. Grid systems are used during the wireframing stage of the design process. The purpose of a grid system is to help guide the placement, sizing, order, repetition and alignment of elements on your page. Create circular SVG charts with Circles : Lugo Labs The circular graphs with the numerical value in the center have been a great way to visualizing data lately. For example, they are used to great effect by awwwards. Circles makes creating the charts very easy. Circles is a lightweight JavaScript library without dependencies, that generates the SVG chart on the fly.

Reveal Animations When Scrolling — WOW.js Live Demo How to use? Github Diogo Akio — Designer Quadra Collective is a interactive & branding studio created from the partnership of Diogo Akio and Caio Rogério. A small company that believes in working with big proportions, made with love and trust. "Quadra" in Portuguese means, "block", i.e., from neighborhood, which conveys an idea of something at reach and quite reliable. Back to Projects Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation

Inspiration for Article Intro Effects We may define a food to be any substance which will repair the functional waste of the body, increase its growth, or maintain the heat, muscular, and nervous energy. In its most comprehensive sense, the oxygen of the air is a food; as although it is admitted by the lungs, it passes into the blood, and there re-acts upon the other food which has passed through the stomach. It is usual, however, to restrict the term food to such nutriment as enters the body by the intestinal canal. Water is often spoken of as being distinct from food, but for this there is no sufficient reason. Many popular writers have divided foods into flesh-formers, heat-givers, and bone-formers.