This is a control panel for some audio effects using p5js. Click and drag on the knobs to “rotate.” The knob class lets you create knobs with different sizes, value ranges and colors. Requires the p5js library (and the p5js sound library for this example). The knobs use the knobMaker.js file which I created for this example.
This sample generates a grid of color boxes over the pages and animates their colors and opacity using jQuery. Two grids are generated by a “for” loop and colors randomly assigned.
Move a planet around the sun in elliptical orbit with scroll. This uses jQuery to move a shape in an elliptical motion based on vertical scroll position. Planet is just a CSS styled div. The second variation uses a timer for the motion rather than scrolling. The third version adds sound using the p5.js sound library. Sound is generated, not prerecorded, and the volume is set by the vertical location of the planet. The frequency is also modified slightly by the vertical location.
This sample moves one set of panels up and one down when you scroll and changes a background image with CSS transition. One long wrapper div makes the window scroll and the scroll position is used to move two divs, one up and the other down.
This version uses the CSS blur property. The scroll amount is used to calculate a value for the blur property. The blur is applied to a div which contains the image.
When you scroll the area of the image in focus appears to move. There are two divs with images, one in focus, one blurred. The in-focus images is in a div above the blurred one and the div is only 50 pixels high. While that div moves down when scrolled, the image inside moves up inside the div so the in-focus area maintains the same position relative to the blurred image beneath it.
The scroll numbers can be used for anything. This examples moves things in various directions based on the vertical scroll number.
Horizontal scroll with layers moving at different speeds, aka “Parallax.”
This is another multi-layer zoom, but adds a horizontal motion to one layer. As you zoom in a panel slides across the screen from left to right.
This example has two divs with images in them aligned one on top of the other. The top image is the blurred one and it fades to reveal the non-blurred one on scrolling.