Randomly generated circles and directions animations! I wanted a nice scenery to look at as a title page - I google translated Design into Japanese so it's probably wrong but Japanese letters look amazing so :/
A Pen by Ben Sheppard on CodePen.
| <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. |
| <div class="menu"> | |
| <div class="app-menu"></div> | |
| </div> | |
| <div class="layout"> | |
| <div class="header"> | |
| <div class="menu-icon"></div> | |
| </div> | |
| </div> |
| box-shadow: rgba(0, 0, 0, 0.0980392) -4px 9px 25px -6px; |
| <canvas id="canvas"></canvas> |
| OpenSimplexNoise noise; | |
| int[][] result; | |
| float t, c; | |
| float ease(float p) { | |
| return 3*p*p - 2*p*p*p; | |
| } | |
| float ease(float p, float g) { |
| /*! | |
| Math.uuid.js (v1.4) | |
| http://www.broofa.com | |
| mailto:[email protected] | |
| Copyright (c) 2010 Robert Kieffer | |
| Dual licensed under the MIT and GPL licenses. | |
| */ | |
| /* |
| license: cc-by-4.0 |
Randomly generated circles and directions animations! I wanted a nice scenery to look at as a title page - I google translated Design into Japanese so it's probably wrong but Japanese letters look amazing so :/
A Pen by Ben Sheppard on CodePen.
| #parallax | |
| .layer(data-depth="0.6") | |
| .some-space | |
| h1 PARALLAX | |
| .layer(data-depth="0.4") | |
| #particles-js | |
| .layer(data-depth="0.3") |
| /* -------------------------------------------- | |
| * Detect device orientation | |
| * and trigger changes based on it | |
| --------------------------------------------*/ | |
| function updateOrientation() { | |
| // Detect whether device supports orientationchange event, otherwise fall back to the resize event | |
| // Genius solution from http://stackoverflow.com/a/2307936 | |
| var supportsOrientationChange = "onorientationchange" in window, | |
| orientationEvent = supportsOrientationChange ? "orientationchange" : "resize", | |
| newAngle, newOrientation; |