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; |