Home • Contact • Privacy Policy • ToS

Rotating Elements With Page Scroll

Learn how to create Rotating Elements With Page Scroll using html, css and/or js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/gear2.svg" alt id="leftgear">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/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>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
@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 Condensed, sans-serif; 
}
h1 { 
  font-family: Metropolis, sans-serif; 
  text-align: center;
  font-size: 8rem;
  margin-top: 2rem;
}
div > img { 
  position: fixed; width: 15%;
  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%; }
}
}
</style>

<script>
$(window).scroll(function() {
var theta = $(window).scrollTop() / 10 % Math.PI;
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' });
$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' });
});
</script>

Random HTML Example Codes: