Skip to content

Instantly share code, notes, and snippets.

@graphis
Created May 6, 2023 16:54
Show Gist options
  • Save graphis/04ec2f097a5e48c6728bfeb2ebc8b124 to your computer and use it in GitHub Desktop.
Save graphis/04ec2f097a5e48c6728bfeb2ebc8b124 to your computer and use it in GitHub Desktop.
Rotate Page Elements on Scroll with JavaScript
<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>
;(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)";
});
@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%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment