html
Inspiration for Text Input Effects
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
By Mary Lou in Playground on January 8, 2015
From our sponsor: Sell access to courses, classes, and community with Squarespace.
Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative. Today we want to share some experimental styles and effects for text inputs with you. Andrej Radisic has done some great work on Dribbble, like the Jawbreaker input field, which we’ve based one of the effects on. Most of the effects use CSS transitions together with pseudo-elements.
Please note that this is for inspiration only and that we use CSS properties which only work in modern browsers.
For the markup we use a span as a wrapper for the input and its label. For the effects to work, we are putting the label after the input which usually should only be done when using checkboxes and radio inputs. This is not necessary if you rely entirely on dynamically adding a class that will trigger what we do on focus. For the purpose of this demo, we are going to rely on the CSS :focus pseudo-class as well to show its potential in combination with the adjacent sibling selector. But you can use a more semantic order together with the trigger class we also use in order to keep the inputs open that get filled (and can’t be closed due to the label position). Note that not all effects have the trigger class (input–filled) defined in the CSS.
--이하생략
출저 : https://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/
html
Animated SVG Frame Slideshow
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
By Mary Lou in Playground on November 15, 2017
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. The inspiration for this idea is based on the Dribbble shot MEDIOCRE: 06 by Shota. We are using anime.js for the animations.
This demo is kindly sponsored by Sencha: Create data-intensive, feature-rich web and mobile apps with Sencha Ext JS.
If you would like to become a demo sponsor, you can find out more here.
Attention: For the demo we use some modern CSS properties like CSS Flexbox and CSS variables, so please view them in a up-to-date browser.
Have a look at some screenshots:
Here we are animating a simple box-like shape:
In this demo we used a pattern for the fill of the shape which is a slightly skewed rectangle. The pattern is from Hero Patterns:
출저 : https://tympanus.net/codrops/2017/11/15/animated-svg-frame-slideshow/
html
CSS Glitch Effect
An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
By Mary Lou in Tutorials on December 21, 2017
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it. It was inspired by the technique seen on the speakers page of the 404 conference.
Please note this effect is very experimental; we use several properties that won’t work in older browsers. The clip-path property is not supported in IE or Edge.
We also use CSS variables for setting some properties that will allow for an easy adjustment of the effect.
Breaking down the effect
When searching the web for an easy to use and light-weight glitch implementation, we came across this question on Reddit. Somebody was asking how the glitch effect was pulled off on the speaker line up page of the 404 conference. The glitch effect was made using CSS animations on a stack of three images that are the same. The animations consist of a rapidly changing clip property on all layers except the first one. Additionally, the layers are being moved slightly. So what we are seeing, is slices of the image, slightly offset and in constant movement.
We wanted to experiment with this and recreate the effect using the clip-path property instead. Although it has less browser support (it doesn’t work in IE or Edge), it allows for a more flexible usage since we can use percentage values and apply it to elements that are not necessarily positioned absolutely.
Combining the effect with background blend modes, allows us to create some interesting looking image effects.
The way this works is to create an image stack where each overlaying image will animate its clip-path in, what looks like, random sizes. We’ll use a stack of 5 images:
--이하생략
출저 : https://tympanus.net/codrops/2017/12/21/css-glitch-effect/
html
Gradient Topography Animation
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
By Mary Lou in Playground on January 24, 2018
.
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
Today we’d like to share a shape layer animation with you. The inspiration for this effect comes from the fantastic work by Diana Hlevnjak (Polar Vector) “Gradient Topography”. We use anime.js for the animations and Charming for the letter effects.
After seeing the artwork, we thought it would be awesome to animate these kind of gradient layers of an organic shape in an interesting way. For this we’ve created a little layout that has several shapes spread on the page and when a menu item is clicked, the associated shape group will expand to full screen and some content is shown.
The demo is kindly sponsored by monday.com: The perfect project management tool for designers. If you would like to sponsor one of our demos, find out more here.
Attention: We’re using CSS variables, grid and flexbox for the demos, so please view this with a modern browser.
The organic shapes consist of path layers where each one has the same gradient but a decreasing fill opacity. This creates an interesting look and when animated, fills the entire screen with the semi transparent layers until it’s fully opaque after the last layer enlarges. The other shapes scale down.
Have a look at some screenshots:
--이하생략
출저 : https://tympanus.net/codrops/2018/01/24/gradient-topography-animation/
html
Exploding 3D Objects with Three.js
A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”.
By Yuriy Artyukh in Playground on March 26, 2019
From our sponsor: Squarespace is everything you need to sell anything: your brand, products, services, or content.
Today we’d like to share an exploding object experiment with you. The effect is inspired by Kubrick Life Website: 3D Motion. No icosahedrons were hurt during these experiments!
The following short walk-through assumes that you are familiar with some WebGL and shaders.
The demo is kindly sponsored by Airtable: Build MVPs faster than ever before. If you would like to sponsor one of our demos, find out more here.
How it’s done
For this effect we need to break apart the respective object and calculate all fragments.
The easiest way to produce naturally looking fragments, is to look at how nature does them:
Giraffes have been using those fashionable fragments for millions of years.
This kind of pattern is called a Voronoi diagram (after Georgy Feodosevich Voronoy, mathematician).
--이하생략
출저 : https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/
