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/
jquery
How to Create a Sticky Image Effect with Three.js
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
By Daniel Velasquez in Tutorials on April 10, 2019
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
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 effect.
The same kind of effect can be seen on the amazing website of MakeReign.
Understanding the effect
When playing with the effect a couple of times we can make a very simple observation about the “stick”.
In either direction of the effect, the center always reaches its destination first, and the corners last. They go at the same speed, but start at different times.
With this simple observation we can extrapolate some of the things we need to do:
Differentiate between the unsticky part of the image which is going to move normally and the sticky part of the image which is going to start with an offset. In this case, the corners are sticky and the center is unsticky.
Sync the movements
Move the unsticky part to the destination while not moving the sticky part.
When the unsticky part reaches its destination, start moving the sticky part
Getting started
For this recreation we’ll be using three.js, and Popmotion’s Springs. But you can implement the same concepts using other libraries.
We’ll define a plane geometry with its height as the view height, and its width as 1.5 of the view width.
--이하생략
출저 : https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/
jquery
Animated Image Columns
An experimental web layout where several image columns get animated out when a menu item is clicked.
By Mary Lou in Playground on May 16, 2019
From our sponsor: Reach inboxes when it matters most with Mailchimp's data-backed email automations. Sign up for Mailchimp now.
Today we’d like to share a little layout with you. The idea is based on the current trend of a grid layout where the columns are animated. You can see this kind of animation in Aristide Benoist’s amazing design for Everest or Hrvoje Grubisic’s GETZ — Photography Portfolio Website concept. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.
The animations are powered by TweenMax.
Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers.
The initial view of the demo is the navigation with the decorative grid in the background.
When clicking on one of the menu items, we animate the grid out by moving the columns in an alternating fashion, rotating them slightly. We mimic this behavior on the letters of the menu item.
When the grid moves away, the content area underneath is revealed:
--이하생략
출저 : https://tympanus.net/codrops/2019/05/16/animated-image-columns/
jquery
Awesome Demos Roundup #5
Another monthly roundup of super-creative web experiments and demos for your viewing pleasure.
By Mary Lou in Demos Roundups on June 6, 2019
From our sponsor: Target your best customers and see up to 88% more revenue with Predictive Segments. Sign up today.
Fascinating things have been made in this past month: magic cubes and glorious planets, beautiful flowers and delightful distortions. Dave DeSandro’s pseudo-3D engine for canvas and SVG, Zdog, gave birth to a new, performant way to create awesome 3D animations, a must-try!
We hope this collection inspires you!
출저 : https://tympanus.net/codrops/2019/06/06/awesome-demos-roundup-5/
html
Case Study: Akaru 2019
In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.
By Jeremy Franzese in Articles on December 30, 2019
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
In 2019, a new version of our Akaru studio website has been released.
After long discussions between developers and designers, we found the creative path we wanted to take for the redesign. The idea was to create a connection between our name Akaru and the graphic style. Meaning “to highlight” in Japanese, we wanted Akaru to transmit the light spectrum, the iridescence and reflections that light can have on some surfaces.
The particularity of the site is the mixing of regular content in the DOM/CSS and interactive background content in WebGL. We’ll have a look at how we planned and decided on the visuals of the main effect, and in the second part will share a technical overview and show how the “iridescent oil” effect was coded.
Design of the liquid effect
In the following, we will go through our iteration process between design and implementation and how we decided on the visuals of the interactive liquid/oil effect.
Visual Search
After some in-depth research, we built an inspirational mood board inspired by 3D artists and photographers. We have therefore selected several colors, and used all the details present in the images of liquids we considered: the mixture of fluids, streaks of colors and lights.
출저 : https://tympanus.net/codrops/2019/12/30/case-study-akaru-2019/
javascript
Interactive WebGL Hover Effects
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
By Yuriy Artyukh in Tutorials on April 14, 2020
From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.
I love WebGL, and in this article I will explain one of the cool effects you can make if you master shaders. The effect I want to recreate is originally from Jesper Landberg’s website. He’s a really cool dude, make sure to check out his stuff:
So let’s get to business! Let’s start with this simple HTML:
Couldn’t be any easier! Let’s style it a bit to look prettier:
All the animations will happen in a Canvas element. So now we need to add a bit of JavaScript. I’m using Parcel here, as it’s quite simple to get started with. I’ll use Three.js for the WebGL part.
So let’s add some JavaScript and start with a basic Three.js setup from the official documentation:
--이하생략
출저 : https://tympanus.net/codrops/2020/04/14/interactive-webgl-hover-effects/
css
How to Create a Motion Hover Effect for a Background Image Grid
A short tutorial on how to achieve a motion hover effect on a background image grid.
By Mary Lou in Tutorials on June 10, 2020
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything.
If you follow our UI Interactions & Animations Roundups, you might have spotted this beautiful grid designed by the folks of tubik:
Previously, Zhenya Rynzhuk also designed this wonderful layout with a similar interaction:
It’s not too complicated to implement this. I wanted to try it and in the following I’ll walk you through the relevant markup and code.
The markup and style for the grid
The markup is simply a grid of items that have background images. I like to use this structure because it allows me to control the sizes of the images by setting their position in the grid.
--이하생략
출저 : https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid/
css
Making Stagger Reveal Animations for Text
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
By Mary Lou in Tutorials on June 17, 2020
From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
Thibaud Allie made this wonderful animation which you can see live on the site of Dani Morales. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.
I fell in love with that lettering effect and wanted to reimplement it using GSAP and Splitting.js. So I made a similar typography based layout and move the lines of text by staggering the letter animations.
The simplified markup looks like this:
Note that the necessary style for the content__paragraph element is overflow: hidden so that the reveal/unreveal animation works.
All elements with the “data-splitting” attribute will be split up into spans that we can then animate individually. So let’s have a look at the JavaScript for that.
Initially, we need to import some libraries and styles:
--이하생략
출저 : https://tympanus.net/codrops/2020/06/17/making-stagger-reveal-animations-for-text/
css
UI Interactions & Animations Roundup #8
A new collection of UI animation shots that summarizes the latest creative trends.
By Mary Lou in UI Interactions and Animations Roundups on June 29, 2020
From our sponsor: Sell access to courses, classes, and community with Squarespace.
It’s time for a crisp new collection of inspirational UI interaction and animation shots! This time we have Aristide Benoist’s works stand out with some very creative motion ideas and there’s some wonderful mobile animations, too.
We hope you enjoy this set and get inspired!
The Secret Project — 002
by Aristide Benoist
PER-SONA — Interactive Menu Page No. 1
by Rron Berisha and Arlind Aliu
--이하생략
출저 : https://tympanus.net/codrops/2020/06/29/ui-interactions-animations-roundup-8/
html
Creating a Menu Image Animation on Hover
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
By Mary Lou in Tutorials on July 1, 2020
From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.
At Codrops, we love experimenting with playful hover effects. Back in 2018, we explored a set of fun hover animations for links. We called that Image Reveal Hover Effects and it shows how to make images appear with a fancy animation when hovering items of a menu. After seeing the fantastic portfolio of Marvin Schwaibold, I wanted to try this effect again on a larger menu and add that beautiful swing effect when moving the mouse. Using some filters, this can also be made more dramatic.
If you are interested in other similar effect, have a look at these:
Image Trail Effects
Image Distortion Effects with SVG Filters
Image Dragging Effects
So, today we’ll have a look at how to create this juicy image hover reveal animation:
Some Markup and Styling
We’ll use a nested structure for each menu item because we’ll have several text elements that will appear on page load and hover.
But we’ll not go into the text animation on load or the hover effect so what we are interested in here is how we’ll make the image appear for each item. The first thing I do when I want to make a certain effect is to write up the structure that I need using no JavaScript. So let’s take a look at that:
--이하 생략
출저 : https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/
