はてなブックマーク

A shuffling type animation with various effects for a geeky terminal look. The other day, I stumbled upon a captivating type animation created by Andreas Gysin. I was immediately inspired and decided to experiment with similar effects. You can witness the brilliance of Andreas’ animation on his project site LCD 1 and also on his website. This totally geeky effect looks like some terminal applicati

Trigonometry in CSS and JavaScript: Introduction to Trigonometry In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript. Understanding trigonometry can give us super powers when it comes to creative coding. But to the uninitiated, it can seem a little intimidating. In this 3-part series of a

A couple of simple & subtle CSS-based line hover animations for links. Those little line animations are a perfect way to enhance a design and add subtle micro-interactions to a website. Today I’d love to share some super-simple ideas that are based on CSS only, no JavaScript involved. Most effects use a pseudo-element as line and some have a little SVG line animation, like this one: <a href="#" cl

A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot. Some time ago I encountered this great Dribbble shot by Francesco Zagami. It has a really nice marquee animation when hovering a menu item (you have to wait a couple of seconds to see the menu). I really love this effect and I have seen it in more designs recently. So I wanted to try and implement it using CSS o

A set of playful dragging effects for images using various techniques. 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 shot

Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber. Today we are going to create an animated cloud using a custom shader material, extending the built-in Sprite material of Three.js. We’ll assume that you are familiar with React (including Hooks), Three.js and React-Three-Fiber. If not, you might find this article that I wrote as a beginner’s intro to the library helpful as

Scroll, Refraction and Shader Effects in Three.js and React Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects. In this tutorial I will show you how to take a couple of established techniques (like tying things to the scroll-offset), and cast them into re-usable components. Composition will be our primary focus. In this

In this tutorial, you’ll learn how to project a texture onto an object in Three.js with some interesting examples. Texture projection is a way of mapping a texture onto a 3D object and making it look like it was projected from a single point. Think of it as the batman symbol projected onto the clouds, with the clouds being our object and the batman symbol being our texture. It’s used both in games

A tutorial on how to re-create the Apple Fifth Avenue Cube animation using WebGL. In September 2019 Apple reopened the doors of its historic store in the Fifth Avenue and to celebrate the special event it made a landing page with a really neat animation of a cube made of glass. You can see the original animation in this video. What caught my attention is the way they played with the famous glass c

Simulating Depth of Field with Particles using the Blurry Library Learn how to create a geometrical scene with a depth effect using the Blurry library. Blurry is a set of scripts that allow you to easily visualize simple geometrical shapes with a bokeh/depth of field effect of an out-of-focus camera. It uses Three.js internally to make it easy to develop the shaders and the WebGL programs required

How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition. To better explain that title right off the bat, here’s what we’re about to learn, and it’s easier than you think. Give it a go, change the shirt from yellow to b

A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. If you recently browsed Awwwards or FWA you might have stumbled upon Ultranoir’s website. An all-round beautifully crafted website, with some amazing WebGL effects. One of which is a sticky effect for images in their project showcase. This tutorial is going to show how to recreate this special e

This tutorial is going to demonstrate how to create a smooth WebGL transition on scroll using Phenomenon (based on three.js). Attention: This tutorial assumes you already have some understanding of how three.js works. If you are not familiar, I highly recommend checking out the official documentation and examples . Let’s get started Interactive elements on websites can enhance the user experience

In this last article of our SVG Filter Effects series, we share a list of useful resources to learn more about SVG Filters. Over the course of six weeks, we published six articles that covered a variety of SVG Filter effects and the filter primitives used to create them: SVG Filters 101— in which we covered the basics for getting started with SVG filters. In the second article, Outline Text with <

Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects. feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows: This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. […] The resul

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 fo

SVG Filter Effects: Duotone Images with <feComponentTransfer> This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect. In the previous article in this series I introduced you to the <feComponentTransfer>, and we used it to limit the number of colors in an image to create a poster effect. In this article, we will take a look at how