Playground

Background Scale Hover Effect with CSS Clip-path – Website Design Article

A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path. From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Today I’d like to share a simple hover effect with you. It’s a recreation of the hover effect seen in the menu on the DDD Hotel website by Garden Eight. The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image.…

Read More

Audio-based Image Distortion Effects with WebGL – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. We’ve covered in the past how we can read data from Audio, using the p5.sound library and how we can use that data, to draw things in the canvas, using p5.js. Well, what if instead of drawing a sketch, we used audio to distort an image? Today we want to show you some demos that play around that idea. We’ve created some experiments using the theme of movie trailers where…

Read More

Audio-based Image Distortion Effects with WebGL – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. We’ve covered in the past how we can read data from Audio, using the p5.sound library and how we can use that data, to draw things in the canvas, using p5.js. Well, what if instead of drawing a sketch, we used audio to distort an image? Today we want to show you some demos that play around that idea. We’ve created some experiments using the theme of movie trailers where…

Read More

Image Dragging Effects | Codrops – Website Design Article

A set of playful dragging effects for images using various techniques. From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Today we’d like to share a little set of playful dragging effects with you. The idea is to animate images as they are being dragged, and distort, scale or apply filters to them. For some examples we tie the intensity of the effect to the speed of the dragging motion. The inspiration for these effects come from two Dribbble…

Read More

Image Dragging Effects | Codrops – Website Design Article

A set of playful dragging effects for images using various techniques. From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Today we’d like to share a little set of playful dragging effects with you. The idea is to animate images as they are being dragged, and distort, scale or apply filters to them. For some examples we tie the intensity of the effect to the speed of the dragging motion. The inspiration for these effects come from two Dribbble…

Read More

Crossroads Slideshow | Codrops – Website Design Article

2019/04/03 An experimental slideshow with an inclined look, three slide previews and a content view on click. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. Today we’d like to share an experimental slideshow with you. The main idea is to show three slides of a slideshow that is slightly rotated. The titles of each slide, which serve as a decorative element,… This is only a snippet of a Website Design Article written…

Read More

Exploding 3D Objects with Three.js – Website Design Article

A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. 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…

Read More

Exploding 3D Objects with Three.js – Website Design Article

A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. 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…

Read More

Text Trail Effect | Codrops – Website Design Article

2019/02/27 A text trail effect for a slideshow inspired by the “Abstract is hiring” Dribbble shot. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between… This is only a snippet of a Website…

Read More

Text Trail Effect | Codrops – Website Design Article

2019/02/27 A text trail effect for a slideshow inspired by the “Abstract is hiring” Dribbble shot. Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax. Attention: Note that this is very… This is only a snippet of a Website…

Read More

Text Distortion Effects using Blotter.js – Website Design Article

Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse. Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll…

Read More