This site is built with HTML CSS and Javascript.
I originally was going to build it with the React frame work, but thought it was overkill for a small static website.
Written in vanilla javascript
the background consists of artistic representations of the Bohr Model of the atom.
When the site gets scrolled in either direction a force is applied to every particle's velocity, in the direction of the scroll event. Additionally, when the screen is resized they are either regenerated if they were lost off screen or they rapidly expand outward from the center of the window to fill the screen. A friction force is applied to any particle that is traveling faster than it's randomly generated maximum velocity.
A mouse and touch based slider built with javascript
.
A parent container element's id is fed into a buildSlider
function and all children of the parent container are automatically converted into slides.
Page indicators are automatically added below the parent container.
<div id='viewport'>
<img class='slide'>
<img class='slide'>
<img class='slide'>
</div>
<script src='slider.js'></script?>
buildSlider('viewport')
When a slide moves past 10% of its width it will automatically move to the next slide depending on the direction it was moved. The slide will snap or "spring" back to it's center most point when it has been released. The movement is calculated using Hooke's Law for spring forces.