Explained further in an entry on my blog. Background from Urbanvisions, "Metropolis" script text from Script-o-rama, Metropolis font by Josip Kelava.
A Pen by Dudley Storey on CodePen.
<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> |
Explained further in an entry on my blog. Background from Urbanvisions, "Metropolis" script text from Script-o-rama, Metropolis font by Josip Kelava.
A Pen by Dudley Storey on CodePen.
$(window).scroll(function() { | |
var theta = $(window).scrollTop() / 10 % Math.PI; | |
$('#leftgear').css({ transform: 'rotate(' + theta + 'rad)' }); | |
$('#rightgear').css({ transform: 'rotate(-' + theta + 'rad)' }); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@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%; } | |
} | |
} |