- showing or hiding sticky elements based on scroll direction
- only changing its direction attribute when scrolled a significant amount
- ignoring small scroll movements that cause unwanted jitters
Today we are going to explore a playful animated landscape with a psychedelic look. The idea is to show how an experimentation on art and design with a generative process can lead to interesting interactive visuals which can be used in a variety of mediums like web, print, illustration, VJing, installations, games and many others. We made 3 variants of the landscape to show you how small changes in parameters can change a lot in visuals.
The demos are made with three.js and the animations and colors are controlled in a custom GLSL shader. For the letter animations we are using TweenMax.
Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.
Store.js is local storage using a simple but powerful API.
MediaRecorder polyfill to record audio in Edge and Safari 11.
- Spec compatible. In the future when all browsers will support MediaRecorder, you will just remove polyfill.
- Small. 1 KB (minified and gzipped). No dependencies. It uses Size Limit to control size.
- One file. In contrast to other recorders, this polyfill uses “inline worker” and don’t need a separated file for Web Worker.
Today we’d like to share a little speedy motion effect with you. The idea is based on the Dribbble shot Ping Pong Slow Motion by Gal Shir where you can see a ping pong ball being shot from one racket to the other. The motion in the animation is enhanced by squeezing the ball and making some background stripes’ height pulsate. This is exactly what we want to do in a slideshow transition: we’ll squeeze the image and add some background effect. Additionally, we’ll make the letters of the title fly away consecutively.