Orbiting planet


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.

Orbiting planet

Orbiting planet 2

Orbiting planet 3

Move focus with scroll

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.

Move the focus