Rotate Page Elements on Scroll with JavaScript

index.html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="container">
<img src="gear2.svg" alt id="leftgear">
<img src="gear2.svg" alt id="rightgear">
<main>
  <h1>Metropolis</h1>
<p>Metropolis, the mother city, city of mothers, mother of all cities.   The city, the film… they too are machines.
<p>Flywheels, a crankshaft, an eccentric disk.
<p>A machine without Workers, devoid of function, pure movement… rotating, thrusting… a machine of desire. 
<p>Round shapes and jerking movements become one within the image of two clocks. One-hour and one-hour clock. Day shift and night shift, hours each, mark the Metropolis working day.
<p>Two groups of Workers, uniformed, in rows of six, march in unison, the exhausted half as fast as the fresh.
<p>The Workers' theme - a funeral march. The night shift enters a cage… the grate is raised, the cage sinks, and with it the camera.           <p>A title picks up the movement. The title's movement is carried through to the movement of the picture.
<p>The Workers: Now just a painted silhouette rising in the background, the design of the Underground Workers' City.
<p>Elevators transport the Workers up and down between the machine halls and their living quarters.  A new musical theme: The Theme of the City of the Workers.
<p>The main square of the Workers' City. Simply a transit area for the Workers returning to their quarters.  In the centre a gong,             again a kind of alarm clock.
<p>The downward scroll of the title is answered by a rising, equilateral triangle pointing skywards.
<p>The Sports stadium, the contrast is stark between its openness under sweeping skies and the cramped City of the Workers - just as stark as the contrast between the liberated and carefree movements  of the youths, dressed in white, and the dull lethargy  of the darkly clothed Workers - and the self-determined horizontal  movement versus the downward ride of the Workers in the lift.
</main>

</div>

rotate-page-elements-on-scroll-with-javascript.markdown

Rotate Page Elements on Scroll with JavaScript

A sequel to my earlier pen, but in pure JavaScript. Uses an optional custom event to remove scroll jank. Complete explanatory article

A Pen by Dudley Storey on CodePen.

License.

script.js

;(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };
    throttle ("scroll", "optimizedScroll");
})();

var leftgear = document.getElementById("leftgear"),
rightgear = document.getElementById("rightgear");
    
// to use the script *without* anti-jank, set the event to "scroll" and remove the anonymous function.

window.addEventListener("optimizedScroll", function() {
    leftgear.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:100);
@font-face { 
font-family: Metropolis;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Metropolis_1920.otf);
}
* { 
  box-sizing: border-box;
}
html { 
  background: linear-gradient(rgba(0,0,0,0.3),#000), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/coal-mine-beringen.jpg); 
  color: #fff; 
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}
body { 
  margin: 2rem; 
  font-family: Roboto Slab, sans-serif;
  line-height: 2;
}
h1 { 
  font-family: Metropolis, sans-serif; 
  text-align: center;
  font-size: 8rem;
  margin-top: 2rem;
}
div > img { 
  position: fixed;
  width: 15vw;
  height: auto; 
}
#rightgear { right: 2rem; }
main { 
  max-width: 800px;
  width : 60%;
  margin: 0 auto;
  font-size: 2rem; 
}
@media all and (max-width: 1000px) {
  h1 { font-size: 10vw; }
}
@media all and (max-width: 800px) {
  main { font-size: 1.6rem;  }
}
@media all and (max-width: 500px) {
 h1 { font-size: 12vw; }
 img { display: none; }
 main { width: 100%; }
}