Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.WebGL is becoming quite popular these days as it allows us to create unique interactive graphics for the web. You might have seen the recent text distortion effects using Blotter.js or the animated WebGL lines created with the THREE.MeshLine library. Today you’ll see how to quickly create an interactive “fake” 3D effect for images with plain WebGL.
Best jQuery Core Java Script Plugins & Tutorials with Demo
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.
- Access to the low level API
- Rendering queues and commands system
- Lights support
- Scene management (nodes, hierrachy, …)
- Separated “engine” logic from the low level part
- Post processing
- Loading models, sprites, videos and custom mesh
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 and on mouse move.
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.In the following tutorial we’ll take a look at how to create a magnetic noisy circle cursor for navigation elements. We’ll be using Paper.js with Simplex Noise.
Today we’d like to share yet another CSS Grid-powered slideshow with you. The idea is to show and hide images with a reveal effect and add a parallax like effect to the main image and the title. For the title we’ve added two copied layers with an outline style which creates an interesting motion effect. For the animations we use TweenMax.
This tutorial is going to demonstrate how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using shaders and an off-screen texture.
Lookforward is a small library that helps you to create smooth transitions between pages with the easiest way using HistoryAPI.