Adding new developments
This commit is contained in:
Michael Reber
parent
8542bc78d3
commit
243a252e24
5
animations/3d-synth-canyon-animation/README.md
Normal file
5
animations/3d-synth-canyon-animation/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# [3D] Synth Canyon Animation
|
||||||
|
|
||||||
|
I wanted to do some experimentation with manipulating geometries and layering several simple shader effects, and this is what I came up with.
|
||||||
|
|
||||||
|
The Soundcloud embed is just there for ambiance.
|
||||||
90
animations/3d-synth-canyon-animation/index.html
Normal file
90
animations/3d-synth-canyon-animation/index.html
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>3D Synth Canyon Animation</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script id="vertexShader" type="x-shader/x-vertex">
|
||||||
|
attribute vec3 center;
|
||||||
|
uniform float uTime;
|
||||||
|
varying float vDisp;
|
||||||
|
varying vec3 vCenter;
|
||||||
|
varying vec2 vSceneYZ;
|
||||||
|
|
||||||
|
#define PULSE_TIME 1.16
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
vCenter = center;
|
||||||
|
vDisp = max(
|
||||||
|
max(0., 1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)+0.5),0.5)),
|
||||||
|
1.-pow(3.*abs(uv.y-fract(-uTime*PULSE_TIME)-0.5),0.5)
|
||||||
|
);
|
||||||
|
// FIXME - magic numbers in displacement calculation
|
||||||
|
vec4 scenePosition = modelViewMatrix*vec4(position+vec3(0.,1.,0.)*2.5*vDisp,1.);
|
||||||
|
vSceneYZ = scenePosition.yz;
|
||||||
|
gl_Position = projectionMatrix*scenePosition;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
||||||
|
uniform float uResolutionScale;
|
||||||
|
varying float vDisp;
|
||||||
|
varying vec3 vCenter;
|
||||||
|
varying vec2 vSceneYZ;
|
||||||
|
|
||||||
|
#define PI 3.14159265359
|
||||||
|
#define WIREFRAME_WIDTH 2.5
|
||||||
|
|
||||||
|
// adapted from https://github.com/mrdoob/three.js/blob/dev/examples/webgl_materials_wireframe.html for wireframe effect
|
||||||
|
float edgeFactorTri() {
|
||||||
|
vec3 a3 = smoothstep(vec3(0.), fwidth(vCenter.xyz)*WIREFRAME_WIDTH/uResolutionScale, vCenter.xyz);
|
||||||
|
return min(min(a3.x, a3.y), a3.z);
|
||||||
|
}
|
||||||
|
|
||||||
|
void main( void ) {
|
||||||
|
if (edgeFactorTri() > 0.98) discard;
|
||||||
|
vec3 color = mix(
|
||||||
|
mix(
|
||||||
|
mix(
|
||||||
|
vec3(1.,0.,0.6), // magenta base
|
||||||
|
vec3(1., 0.9, .0), min(1.9,vDisp) // yellow pulse
|
||||||
|
),
|
||||||
|
vec3(1.), max(0., (vSceneYZ.s-20.) / 120.) // lighter on top; FIXME - magic numbers with Y position
|
||||||
|
),
|
||||||
|
vec3(0.), max(0., min(1., (-vSceneYZ.t - 80.) / 80.)) // fade to black; FIXME - magic numbers with Z position
|
||||||
|
);
|
||||||
|
gl_FragColor = gl_FrontFacing ?
|
||||||
|
vec4(color, 1.0) :
|
||||||
|
vec4(color, 0.5);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div id="container"></div>
|
||||||
|
<div id="info">Synth Canyon Animation - with <a href="https://threejs.org" target="_blank">three.js</a>
|
||||||
|
</div>
|
||||||
|
<div id="controls">
|
||||||
|
<label for="resolution">resolution: </label>
|
||||||
|
<select id="resolution" value="2">
|
||||||
|
<option value="0.5">0.5x</option>
|
||||||
|
<option value="1" selected>1x</option>
|
||||||
|
<option value="2">2x</option>
|
||||||
|
<option value="4">4x</option>
|
||||||
|
<option value="8">8x</option>
|
||||||
|
</select>
|
||||||
|
<label for="hide-audio">hide audio: </label>
|
||||||
|
<input id="hide-audio" type="checkbox"></input>
|
||||||
|
<iframe class="audio-embed" width="350" height="83" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/450662742&color=%23a575d0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js'></script>
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
|
||||||
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/RenderPass.110.js'></script>
|
||||||
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/EffectComposer.110.js'></script>
|
||||||
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/168886/UnrealBloomPass.110.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
150
animations/3d-synth-canyon-animation/script.js
Normal file
150
animations/3d-synth-canyon-animation/script.js
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
const SHOW_STATS = false;
|
||||||
|
const CANYON_WIDTH = 400;
|
||||||
|
const CANYON_LENGTH = 120;
|
||||||
|
const CANYON_SEGMENTS_W = 27;
|
||||||
|
const CANYON_SEGMENTS_L = 10;
|
||||||
|
const CLIFF_BASE = 60;
|
||||||
|
const CLIFF_VARY = 15;
|
||||||
|
const FLOOR_VARY = 10;
|
||||||
|
const CANYON_SPEED = 70;
|
||||||
|
const CAMERA_DRIFT_DISTANCE = 15;
|
||||||
|
const CAMERA_DRIFT_SPEED = 0.05;
|
||||||
|
|
||||||
|
let lastUpdate;
|
||||||
|
let camera, scene, renderer, composer;
|
||||||
|
let cameraBaseX, cameraBaseY;
|
||||||
|
let uResolutionScale;
|
||||||
|
let uTime;
|
||||||
|
let canyonA, canyonB;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
// stats
|
||||||
|
if (SHOW_STATS) {
|
||||||
|
const stats = new Stats();
|
||||||
|
stats.domElement.classList.add('stats-element');
|
||||||
|
document.body.appendChild(stats.domElement);
|
||||||
|
requestAnimationFrame(function updateStats(){
|
||||||
|
stats.update();
|
||||||
|
requestAnimationFrame(updateStats);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// basic setup
|
||||||
|
const container = document.getElementById('container');
|
||||||
|
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 300);
|
||||||
|
const cameraDistance = 70;
|
||||||
|
const cameraAngle = .05*Math.PI;
|
||||||
|
camera.position.z = cameraDistance;
|
||||||
|
cameraBaseX = 0;
|
||||||
|
cameraBaseY = 0.3 * (CLIFF_BASE + CLIFF_VARY + FLOOR_VARY);
|
||||||
|
camera.position.y = cameraBaseY;
|
||||||
|
camera.rotation.x = -cameraAngle;
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
|
||||||
|
// shader setup
|
||||||
|
lastUpdate = new Date().getTime();
|
||||||
|
const vertexShader = document.getElementById( 'vertexShader' ).textContent;
|
||||||
|
const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
|
||||||
|
uTime = { type: 'f', value: 1.0 };
|
||||||
|
uResolutionScale = { type: 'f', value: 1.0 };
|
||||||
|
|
||||||
|
// add objects
|
||||||
|
const canyonGeometry = new THREE.PlaneGeometry(CANYON_WIDTH, CANYON_LENGTH, CANYON_SEGMENTS_W, CANYON_SEGMENTS_L);
|
||||||
|
canyonGeometry.rotateX(-0.5 * Math.PI);
|
||||||
|
const reverseGeometry = canyonGeometry.clone();
|
||||||
|
const simplexA = new SimplexNoise(Math.floor(0xffff*Math.random()));
|
||||||
|
const simplexB = new SimplexNoise(Math.floor(0xffff*Math.random()));
|
||||||
|
for (let i = 0, l = canyonGeometry.vertices.length; i < l; i++) {
|
||||||
|
const { x, z } = canyonGeometry.vertices[i];
|
||||||
|
canyonGeometry.vertices[i].y =
|
||||||
|
Math.min(1.0, Math.pow(x/50, 4)) * Math.round(CLIFF_BASE + simplexA.noise2D(x,z) * CLIFF_VARY) + Math.round(simplexB.noise2D(x,z) * FLOOR_VARY);
|
||||||
|
reverseGeometry.vertices[i].y =
|
||||||
|
Math.min(1.0, Math.pow(x/50, 4)) * Math.round(CLIFF_BASE + simplexA.noise2D(x,-z) * CLIFF_VARY) + Math.round(simplexB.noise2D(x,-z) * FLOOR_VARY);
|
||||||
|
}
|
||||||
|
const canyonMaterial = new THREE.ShaderMaterial({
|
||||||
|
transparent: true,
|
||||||
|
side: THREE.DoubleSide,
|
||||||
|
uniforms: { uTime, uResolutionScale },
|
||||||
|
vertexShader,
|
||||||
|
fragmentShader
|
||||||
|
});
|
||||||
|
canyonMaterial.extensions.derivatives = true;
|
||||||
|
canyonA = new THREE.Mesh(geomToBufferGeomWithCenters(canyonGeometry), canyonMaterial);
|
||||||
|
scene.add(canyonA);
|
||||||
|
canyonB = new THREE.Mesh(geomToBufferGeomWithCenters(reverseGeometry), canyonMaterial);
|
||||||
|
canyonB.position.z -= CANYON_LENGTH;
|
||||||
|
scene.add(canyonB);
|
||||||
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
|
// effect composition
|
||||||
|
const renderScene = new THREE.RenderPass(scene, camera);
|
||||||
|
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.86);
|
||||||
|
bloomPass.threshold = 0.3;
|
||||||
|
bloomPass.strength = 2.5 * uResolutionScale.value;
|
||||||
|
bloomPass.radius = 0.3 * uResolutionScale.value;
|
||||||
|
composer = new THREE.EffectComposer(renderer);
|
||||||
|
composer.addPass(renderScene);
|
||||||
|
composer.addPass(bloomPass);
|
||||||
|
|
||||||
|
// event listeners
|
||||||
|
onWindowResize();
|
||||||
|
window.addEventListener( 'resize', onWindowResize, false);
|
||||||
|
document.getElementById('resolution').addEventListener('change', onResolutionChange, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// events
|
||||||
|
function onWindowResize(evt) {
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
composer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
}
|
||||||
|
function onResolutionChange(evt) {
|
||||||
|
uResolutionScale.value = parseFloat(evt.target.value);
|
||||||
|
bloomPass.strength = 2.5 * uResolutionScale.value;
|
||||||
|
bloomPass.radius = 0.3 * uResolutionScale.value;
|
||||||
|
renderer.setPixelRatio( window.devicePixelRatio / uResolutionScale.value );
|
||||||
|
}
|
||||||
|
function animate() {
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
const timeSinceLastUpdate = currentTime - lastUpdate;
|
||||||
|
lastUpdate = currentTime;
|
||||||
|
const deltaTime = timeSinceLastUpdate / 1000;
|
||||||
|
uTime.value += deltaTime;
|
||||||
|
// move canyons
|
||||||
|
canyonA.position.z += deltaTime * CANYON_SPEED;
|
||||||
|
canyonB.position.z += deltaTime * CANYON_SPEED;
|
||||||
|
if (canyonA.position.z > CANYON_LENGTH) {
|
||||||
|
canyonA.position.z -= 2*CANYON_LENGTH;
|
||||||
|
}
|
||||||
|
if (canyonB.position.z > CANYON_LENGTH) {
|
||||||
|
canyonB.position.z -= 2*CANYON_LENGTH;
|
||||||
|
}
|
||||||
|
// drift camera (simple lissajous)
|
||||||
|
camera.position.x = cameraBaseX + CAMERA_DRIFT_DISTANCE*Math.sin(7*CAMERA_DRIFT_SPEED*Math.PI*uTime.value);
|
||||||
|
camera.position.y = cameraBaseY + CAMERA_DRIFT_DISTANCE*Math.sin(5*CAMERA_DRIFT_SPEED*Math.PI*uTime.value);
|
||||||
|
// render
|
||||||
|
// renderer.render( scene, camera );
|
||||||
|
composer.render();
|
||||||
|
requestAnimationFrame( animate );
|
||||||
|
}
|
||||||
|
|
||||||
|
// boot
|
||||||
|
init();
|
||||||
|
animate();
|
||||||
|
|
||||||
|
// utils
|
||||||
|
// adapted from https://github.com/mrdoob/three.js/blob/dev/examples/webgl_materials_wireframe.html for wireframe effect
|
||||||
|
function geomToBufferGeomWithCenters(geom) {
|
||||||
|
const buffGeom = new THREE.BufferGeometry().fromGeometry(geom);
|
||||||
|
const vectors = [new THREE.Vector3(1,0,0), new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,1)];
|
||||||
|
const { position } = buffGeom.attributes;
|
||||||
|
const centers = new Float32Array(position.count*3);
|
||||||
|
for (let i=0, l=position.count; i<l; i++) {
|
||||||
|
vectors[i%3].toArray(centers,i*3);
|
||||||
|
}
|
||||||
|
buffGeom.setAttribute('center', new THREE.BufferAttribute(centers,3));
|
||||||
|
return buffGeom;
|
||||||
|
}
|
||||||
50
animations/3d-synth-canyon-animation/style.css
Normal file
50
animations/3d-synth-canyon-animation/style.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
body {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: Monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #000;
|
||||||
|
margin: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info, #controls {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
-webkit-transition: 150ms all;
|
||||||
|
transition: 150ms all;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-element {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-embed {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
#hide-audio:checked + .audio-embed {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
3
animations/basic-matrix-effect/README.md
Normal file
3
animations/basic-matrix-effect/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Basic Matrix Effect
|
||||||
|
|
||||||
|
Hello World in 92 Languages falling down in Matrix code rain
|
||||||
16
animations/basic-matrix-effect/index.html
Normal file
16
animations/basic-matrix-effect/index.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Basic Matrix Effect</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Hello World in 92 Languages falling down in Matrix code rain-->
|
||||||
|
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
189
animations/basic-matrix-effect/script.js
Normal file
189
animations/basic-matrix-effect/script.js
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
const langs = [
|
||||||
|
"Hello World",
|
||||||
|
"مرحبا بالعالم",
|
||||||
|
"Salam Dünya",
|
||||||
|
"Прывітанне Сусвет",
|
||||||
|
"Здравей свят",
|
||||||
|
"ওহে বিশ্ব",
|
||||||
|
"Zdravo svijete",
|
||||||
|
"Hola món",
|
||||||
|
"Kumusta Kalibutan",
|
||||||
|
"Ahoj světe",
|
||||||
|
"Helo Byd",
|
||||||
|
"Hej Verden",
|
||||||
|
"Hallo Welt",
|
||||||
|
"Γειά σου Κόσμε",
|
||||||
|
"Hello World",
|
||||||
|
"Hello World",
|
||||||
|
"Hola Mundo",
|
||||||
|
"Tere, Maailm",
|
||||||
|
"Kaixo Mundua",
|
||||||
|
"سلام دنیا",
|
||||||
|
"Hei maailma",
|
||||||
|
"Bonjour le monde",
|
||||||
|
"Dia duit an Domhan",
|
||||||
|
"Ola mundo",
|
||||||
|
"હેલો વર્લ્ડ",
|
||||||
|
"Sannu Duniya",
|
||||||
|
"नमस्ते दुनिया",
|
||||||
|
"Hello World",
|
||||||
|
"Pozdrav svijete",
|
||||||
|
"Bonjou Mondyal la",
|
||||||
|
"Helló Világ",
|
||||||
|
"Բարեւ աշխարհ",
|
||||||
|
"Halo Dunia",
|
||||||
|
"Ndewo Ụwa",
|
||||||
|
"Halló heimur",
|
||||||
|
"Ciao mondo",
|
||||||
|
"שלום עולם",
|
||||||
|
"こんにちは世界",
|
||||||
|
"Hello World",
|
||||||
|
"Გამარჯობა მსოფლიო",
|
||||||
|
"Сәлем Әлем",
|
||||||
|
"សួស្តីពិភពលោក",
|
||||||
|
"ಹಲೋ ವರ್ಲ್ಡ್",
|
||||||
|
"안녕하세요 월드",
|
||||||
|
"Ciao mondo",
|
||||||
|
"ສະບາຍດີຊາວໂລກ",
|
||||||
|
"Labas pasauli",
|
||||||
|
"Sveika pasaule",
|
||||||
|
"Hello World",
|
||||||
|
"Kia Ora",
|
||||||
|
"Здраво свету",
|
||||||
|
"ഹലോ വേൾഡ്",
|
||||||
|
"Сайн уу",
|
||||||
|
"हॅलो वर्ल्ड",
|
||||||
|
"Hai dunia",
|
||||||
|
"Hello dinja",
|
||||||
|
"မင်္ဂလာပါကမ္ဘာလောက",
|
||||||
|
"नमस्कार संसार",
|
||||||
|
"Hallo Wereld",
|
||||||
|
"Hei Verden",
|
||||||
|
"Moni Dziko Lapansi",
|
||||||
|
"ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ",
|
||||||
|
"Witaj świecie",
|
||||||
|
"Olá Mundo",
|
||||||
|
"Salut Lume",
|
||||||
|
"Привет, мир",
|
||||||
|
"හෙලෝ වර්ල්ඩ්",
|
||||||
|
"Ahoj svet",
|
||||||
|
"Pozdravljen, svet",
|
||||||
|
"Waad salaaman tihiin",
|
||||||
|
"Përshendetje Botë",
|
||||||
|
"Здраво Свете",
|
||||||
|
"Lefatše Lumela",
|
||||||
|
"Halo Dunya",
|
||||||
|
"Hej världen",
|
||||||
|
"Salamu, Dunia",
|
||||||
|
"ஹலோ வேர்ல்ட்",
|
||||||
|
"హలో వరల్డ్",
|
||||||
|
"Салом Ҷаҳон",
|
||||||
|
"สวัสดีชาวโลก",
|
||||||
|
"Kamusta Mundo",
|
||||||
|
"Selam Dünya",
|
||||||
|
"Привіт Світ",
|
||||||
|
"ہیلو ورلڈ",
|
||||||
|
"Salom Dunyo",
|
||||||
|
"Chào thế giới",
|
||||||
|
"העלא וועלט",
|
||||||
|
"Mo ki O Ile Aiye",
|
||||||
|
"你好，世界",
|
||||||
|
"你好，世界",
|
||||||
|
"你好，世界",
|
||||||
|
"Sawubona Mhlaba"
|
||||||
|
];
|
||||||
|
// hello world in 92 Languages
|
||||||
|
|
||||||
|
let charSize = 18;
|
||||||
|
let fallRate = charSize / 2;
|
||||||
|
let streams;
|
||||||
|
|
||||||
|
// -------------------------------
|
||||||
|
class Char {
|
||||||
|
constructor(value, x, y, speed) {
|
||||||
|
this.value = value;
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.speed = speed;
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
const flick = random(100);
|
||||||
|
// 10 percent chance of flickering a number instead
|
||||||
|
if (flick < 10) {
|
||||||
|
fill(120, 30, 100);
|
||||||
|
text(round(random(9)), this.x, this.y);
|
||||||
|
} else {
|
||||||
|
text(this.value, this.x, this.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
// fall down
|
||||||
|
this.y = this.y > height ? 0 : this.y + this.speed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------------------------------------
|
||||||
|
class Stream {
|
||||||
|
constructor(text, x) {
|
||||||
|
const y = random(text.length);
|
||||||
|
const speed = random(2, 10);
|
||||||
|
this.chars = [];
|
||||||
|
|
||||||
|
for (let i = text.length; i >= 0; i--) {
|
||||||
|
this.chars.push(
|
||||||
|
new Char(text[i], x, (y + text.length - i) * charSize, speed)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
fill(120, 100, 100);
|
||||||
|
this.chars.forEach((c, i) => {
|
||||||
|
// 30 percent chance of lit tail
|
||||||
|
const lit = random(100);
|
||||||
|
if (lit < 30) {
|
||||||
|
if (i === this.chars.length - 1) {
|
||||||
|
fill(120, 30, 100);
|
||||||
|
} else {
|
||||||
|
fill(120, 100, 90);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
c.draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createStreams() {
|
||||||
|
// create random streams from langs that span the width
|
||||||
|
for (let i = 0; i < width; i += charSize) {
|
||||||
|
streams.push(new Stream(random(langs), i));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
streams = [];
|
||||||
|
createStreams();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(innerWidth, innerHeight);
|
||||||
|
reset();
|
||||||
|
frameRate(20);
|
||||||
|
colorMode(HSB);
|
||||||
|
noStroke();
|
||||||
|
textSize(charSize);
|
||||||
|
textFont("monospace");
|
||||||
|
background(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(0, 0.4);
|
||||||
|
streams.forEach((s) => s.draw());
|
||||||
|
}
|
||||||
|
|
||||||
|
function windowResized() {
|
||||||
|
resizeCanvas(innerWidth, innerHeight);
|
||||||
|
background(0);
|
||||||
|
reset();
|
||||||
|
}
|
||||||
9
animations/basic-matrix-effect/style.css
Normal file
9
animations/basic-matrix-effect/style.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
2
animations/marvel-intro-animation/README.md
Normal file
2
animations/marvel-intro-animation/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Marvel Intro Animation
|
||||||
|
|
||||||
50
animations/marvel-intro-animation/index.html
Normal file
50
animations/marvel-intro-animation/index.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Marvel Intro Animation</title>
|
||||||
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap'><link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="marvel">MARVEL</div>
|
||||||
|
<div id="bg"></div>
|
||||||
|
|
||||||
|
<div id="loader">
|
||||||
|
<div>
|
||||||
|
<img src="./resources/loader.svg" alt="Loader">
|
||||||
|
<span id="a">LOADING ANIMATION</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="hidden">
|
||||||
|
<img src="./resources/img-1.jpg">
|
||||||
|
<img src="./resources/img-2.jpg">
|
||||||
|
<img src="./resources/img-3.jpg">
|
||||||
|
<img src="./resources/img-4.jpg">
|
||||||
|
<img src="./resources/img-5.jpg">
|
||||||
|
<img src="./resources/img-6.jpg">
|
||||||
|
<img src="./resources/img-7.jpg">
|
||||||
|
<img src="./resources/img-8.jpg">
|
||||||
|
<img src="./resources/img-9.jpg">
|
||||||
|
<img src="./resources/img-10.jpg">
|
||||||
|
<img src="./resources/img-11.jpg">
|
||||||
|
<img src="./resources/img-12.jpg">
|
||||||
|
<img src="./resources/img-13.jpg">
|
||||||
|
<img src="./resources/img-14.jpg">
|
||||||
|
<img src="./resources/img-15.jpg">
|
||||||
|
<img src="./resources/img-16.jpg">
|
||||||
|
<img src="./resources/img-17.jpg">
|
||||||
|
<img src="./resources/img-18.jpg">
|
||||||
|
<img src="./resources/img-19.jpg">
|
||||||
|
<img src="./resources/img-20.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<audio src="./resources/a.mp3" id="audio"></audio>
|
||||||
|
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script>
|
||||||
|
<script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
animations/marvel-intro-animation/resources/a.mp3
Normal file
BIN
animations/marvel-intro-animation/resources/a.mp3
Normal file
Binary file not shown.
BIN
animations/marvel-intro-animation/resources/img-1.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
animations/marvel-intro-animation/resources/img-10.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
animations/marvel-intro-animation/resources/img-11.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
animations/marvel-intro-animation/resources/img-12.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-12.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
BIN
animations/marvel-intro-animation/resources/img-13.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-13.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
animations/marvel-intro-animation/resources/img-14.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-14.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 391 KiB |
BIN
animations/marvel-intro-animation/resources/img-15.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-15.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
animations/marvel-intro-animation/resources/img-16.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-16.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 588 KiB |
BIN
animations/marvel-intro-animation/resources/img-17.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-17.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
animations/marvel-intro-animation/resources/img-18.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-18.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
BIN
animations/marvel-intro-animation/resources/img-19.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-19.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
BIN
animations/marvel-intro-animation/resources/img-2.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
BIN
animations/marvel-intro-animation/resources/img-20.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-20.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
animations/marvel-intro-animation/resources/img-3.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
BIN
animations/marvel-intro-animation/resources/img-4.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
animations/marvel-intro-animation/resources/img-5.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
animations/marvel-intro-animation/resources/img-6.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
BIN
animations/marvel-intro-animation/resources/img-7.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
BIN
animations/marvel-intro-animation/resources/img-8.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
BIN
animations/marvel-intro-animation/resources/img-9.jpg
Normal file
BIN
animations/marvel-intro-animation/resources/img-9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
6
animations/marvel-intro-animation/resources/loader.svg
Normal file
6
animations/marvel-intro-animation/resources/loader.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
|
||||||
|
<path fill="none" stroke="#ffc107" stroke-width="8" stroke-dasharray="42.76482137044271 42.76482137044271" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.8);transform-origin:50px 50px">
|
||||||
|
<animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="2.380952380952381s" keyTimes="0;1" values="0;256.58892822265625"></animate>
|
||||||
|
</path>
|
||||||
|
<!-- [ldio] generated by https://loading.io/ --></svg>
|
||||||
|
After Width: | Height: | Size: 819 B |
40
animations/marvel-intro-animation/script.js
Normal file
40
animations/marvel-intro-animation/script.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
$(function () {
|
||||||
|
function playAnimation() {
|
||||||
|
var bg = $("#bg"),
|
||||||
|
bgNum = 0;
|
||||||
|
document.getElementById("audio").play();
|
||||||
|
const marvelInterval = setInterval(function () {
|
||||||
|
bgNum = (bgNum % 20) + 1;
|
||||||
|
bg.css(
|
||||||
|
"background-image",
|
||||||
|
`url(./resources/img-${bgNum}.jpg)`
|
||||||
|
);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
clearInterval(marvelInterval);
|
||||||
|
}, 12000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPlay() {
|
||||||
|
$("#loader img").fadeOut(100);
|
||||||
|
$("#a").html("▶<b>PLAY ANIMATION (turn ON sound)</b>").addClass("cursor");
|
||||||
|
$("#a").on("click", function () {
|
||||||
|
$("#loader").fadeOut(100);
|
||||||
|
playAnimation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#hidden").imagesLoaded({ background: true }, function () {
|
||||||
|
setTimeout(function () {
|
||||||
|
var audio = document.getElementById("audio");
|
||||||
|
audio.oncanplay = function () {
|
||||||
|
initPlay();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (audio.readyState > 3) {
|
||||||
|
initPlay();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
118
animations/marvel-intro-animation/style.css
Normal file
118
animations/marvel-intro-animation/style.css
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Roboto Condensed", sans-serif;
|
||||||
|
background-image: radial-gradient(#730801, #1f0100);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#marvel {
|
||||||
|
color: transparent;
|
||||||
|
font-size: 250vh;
|
||||||
|
-webkit-text-stroke: 2px #000;
|
||||||
|
letter-spacing: -2vh;
|
||||||
|
opacity: 0;
|
||||||
|
animation: marvel 11s ease 2s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marvel {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 205vh;
|
||||||
|
color: rgba(255, 255, 255, 0);
|
||||||
|
-webkit-text-stroke-color: #000;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
color: rgba(255, 255, 255, 0);
|
||||||
|
-webkit-text-stroke-color: #000;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
-webkit-text-stroke-color: #000;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 30vh;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
-webkit-text-stroke-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 1;
|
||||||
|
background-image: url(https://himalayasingh.github.io/marvel/img/img-1.jpg);
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: 1;
|
||||||
|
transform: scale(1.4);
|
||||||
|
animation: hideBg 14s ease 0s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hideBg {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.4);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #212121;
|
||||||
|
z-index: 125;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader span {
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loader span b {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hidden {
|
||||||
|
position: fixed;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ytd_link {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
2
animations/netflix-logo-animation/README.md
Normal file
2
animations/netflix-logo-animation/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Customisable Netflix Logo Animation
|
||||||
|
|
||||||
112
animations/netflix-logo-animation/index.html
Normal file
112
animations/netflix-logo-animation/index.html
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Customisable Netflix Logo Animation</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="netflix-container"><svg width="867" height="233" viewBox="0 0 867 233" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="N">
|
||||||
|
<path id="N1-base" class="base" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" />
|
||||||
|
<path id="N1-shadow" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" fill="url(#N1-shadowFill)" />
|
||||||
|
<path id="N3-base" class="base" d="M82.6 0H119V218.4L82.6 222.3V0Z" />
|
||||||
|
<path id="N3-shadow" d="M82.6 0H119V218.4L82.6 222.3V0Z" fill="url(#N3-shadowFill" />
|
||||||
|
<path id="N2" class="base" d="M79.2 222.7L119 218.4L35.1 0H0L79.2 222.7Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="N1-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="N3-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
<g id="E">
|
||||||
|
<path id="E1-base" class="base" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" />
|
||||||
|
<path id="E1-shadow" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" fill="url(#E1-shadowFill)" />
|
||||||
|
<path id="E4" class="base" d="M239.9 85.2V121.2L153.6 121.5V85.6L239.9 85.2Z" />
|
||||||
|
<path id="E2-base" class="base" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" />
|
||||||
|
<path id="E2-shadow" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" fill="url(#E2-shadowFill)" />
|
||||||
|
<path id="E3" class="base" d="M255 0H153.6V36.4H255V0Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="E1-shadowFill" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="E2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
<g id="T">
|
||||||
|
<path id="T2-base" class="base" d="M317 0V204.6L353.4 203.2V0H317Z" />
|
||||||
|
<path id="T2-shadow" d="M317 0V204.6L353.4 203.2V0H317Z" fill="url(#T2-shadowFill)" />
|
||||||
|
<path id="T1" class="base" d="M391.7 0H278.7V36.4H391.7V0Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="T2-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
<g id="F">
|
||||||
|
<path id="F3" class="base" d="M501 84H415V120H501V84Z" />
|
||||||
|
<path id="F2-base" class="base" d="M414.8 0V202.2H451.8V0H414.8Z" />
|
||||||
|
<path id="F2-shadow" d="M414.8 0V202.2H451.8V0H414.8Z" fill="url(#F2-shadowFill)" />
|
||||||
|
<path id="F1" class="base" d="M516.8 0H414.8V36.4H516.8V0Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="F2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
<g id="L">
|
||||||
|
<path id="L1-base" class="base" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" />
|
||||||
|
<path id="L1-shadow" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" fill="url(#L1-shadowFill)" />
|
||||||
|
<path id="L2" class="base" d="M540.5 167.5L639.5 173.1V209.1L540.5 204.1V167.5Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="L1-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop class="shadow-start" offset="0%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
<path id="I" class="base" d="M669.2 0H705.7V214.3L669.2 211.2V0Z" />
|
||||||
|
<g id="X">
|
||||||
|
<path id="X2-base" class="base" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" />
|
||||||
|
<path id="X2-shadow" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" fill="url(#X2-shadowFill)" />
|
||||||
|
<path id="X1" class="base" d="M733.1 216.8L771.5 220.8L866.8 0H826.7L733.1 216.8Z" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="X2-shadowFill" x1="0%" y1="10%" x2="80%" y2="100%" gradientUnits="objectBoundingBox">
|
||||||
|
<stop class="shadow-end" offset="0%" />
|
||||||
|
<stop class="shadow-start" offset="50%" />
|
||||||
|
<stop class="shadow-end" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</g>
|
||||||
|
</svg></div>
|
||||||
|
<div class="themesContainer">
|
||||||
|
<div id="theme1" class="theme">
|
||||||
|
<div class="bg-colour"></div>
|
||||||
|
</div>
|
||||||
|
<div id="theme2" class="theme">
|
||||||
|
<div class="bg-colour"></div>
|
||||||
|
</div>
|
||||||
|
<div id="theme3" class="theme">
|
||||||
|
<div class="bg-colour"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
|
||||||
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
|
||||||
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
156
animations/netflix-logo-animation/script.js
Normal file
156
animations/netflix-logo-animation/script.js
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
// ---------- NETFLIX ANIMATION ---------- //
|
||||||
|
|
||||||
|
/*
|
||||||
|
_ _
|
||||||
|
| \ | |
|
||||||
|
| \| |
|
||||||
|
| . ` |
|
||||||
|
| |\ |
|
||||||
|
|_| \_| */
|
||||||
|
const n_tl = gsap.timeline();
|
||||||
|
n_tl
|
||||||
|
.to("#N1-shadow", {opacity: 0, duration: 0.5}, 0.3)
|
||||||
|
.to("#N3-shadow", {opacity: 0, duration: 1.5}, 0.3)
|
||||||
|
|
||||||
|
/*
|
||||||
|
______
|
||||||
|
| ____|
|
||||||
|
| |__
|
||||||
|
| __|
|
||||||
|
| |____
|
||||||
|
|______|*/
|
||||||
|
const e_ogShape = "M255.1 171.6V208.2L250.5 208.5L250 172L255.1 171.6Z";
|
||||||
|
const e_tl = gsap.timeline();
|
||||||
|
e_tl
|
||||||
|
.from("#E1-base", {morphSVG:{shape: e_ogShape, type: "linear"}, opacity: 0, duration: 0.15}, 0)
|
||||||
|
.from("#E2-base", {scaleY: 0, transformOrigin: "50% 100%", duration: 0.1}, 0.11)
|
||||||
|
.from("#E3", {scaleX: 0, duration: 0.06}, 0.21)
|
||||||
|
.from("#E4", {scaleX: 0, duration: 0.18}, 0.27)
|
||||||
|
.to("#E1-shadow, #E2-shadow", {opacity: 0, duration: 0.8}, 0)
|
||||||
|
|
||||||
|
/*
|
||||||
|
_______
|
||||||
|
|__ __|
|
||||||
|
| |
|
||||||
|
| |
|
||||||
|
| |
|
||||||
|
|_|*/
|
||||||
|
const t_tl = gsap.timeline();
|
||||||
|
t_tl
|
||||||
|
.from("#T1", {scaleX: 0, duration: 0.1}, 0)
|
||||||
|
.from("#T2-base", {scaleY: 0, duration: 0.25}, 0.1)
|
||||||
|
.to("#T2-shadow", {opacity: 0, duration: 0.82})
|
||||||
|
|
||||||
|
/*
|
||||||
|
______
|
||||||
|
| ____|
|
||||||
|
| |__
|
||||||
|
| __|
|
||||||
|
| |
|
||||||
|
|_|*/
|
||||||
|
const f_tl = gsap.timeline();
|
||||||
|
f_tl
|
||||||
|
.from("#F1", {scaleX: 0, duration: 0.15}, 0)
|
||||||
|
.from("#F2-base", {scaleY: 0, duration: 0.33}, 0.1)
|
||||||
|
.from("#F3", {scaleX: 0, duration: 0.15}, 0.28)
|
||||||
|
.to("#F2-shadow", {opacity: 0, duration: 0.86})
|
||||||
|
|
||||||
|
/*
|
||||||
|
_
|
||||||
|
| |
|
||||||
|
| |
|
||||||
|
| |
|
||||||
|
| |____
|
||||||
|
|______|*/
|
||||||
|
const l_ogShape = "M540.5 167.5L546 167.781V204.371L540.5 204.1V167.5Z";
|
||||||
|
const l_tl = gsap.timeline();
|
||||||
|
l_tl
|
||||||
|
.from("#L1-base", {scaleY: 0, duration: 0.22}, 0)
|
||||||
|
.from("#L2", {morphSVG:{shape: l_ogShape, type: "linear"}, opacity: 0, duration: 0.1}, 0.2)
|
||||||
|
.to("#L1-shadow", {opacity: 0, duration: 0.83})
|
||||||
|
|
||||||
|
/*
|
||||||
|
_____
|
||||||
|
|_ _|
|
||||||
|
| |
|
||||||
|
| |
|
||||||
|
_| |_
|
||||||
|
|_____|*/
|
||||||
|
const i_tl = gsap.timeline();
|
||||||
|
i_tl
|
||||||
|
.from("#I", {scaleY: 0, transformOrigin: "50% 100%", duration: 0.18}, 0)
|
||||||
|
|
||||||
|
/*
|
||||||
|
__ __
|
||||||
|
\ \ / /
|
||||||
|
\ V /
|
||||||
|
> <
|
||||||
|
/ . \
|
||||||
|
/_/ \_\*/
|
||||||
|
const x1_ogShape = "M733.1 216.8L771.5 220.8L772.5 218.5L734.5 213.5L733.1 216.8Z";
|
||||||
|
const x2_ogShape = "M737 0L738 2.5H777.5L776.5 0H737Z";
|
||||||
|
const x_tl = gsap.timeline();
|
||||||
|
x_tl
|
||||||
|
.from("#X1", {morphSVG:{shape: x1_ogShape, type: "linear", shapeIndex: 2}, duration: 0.63}, 0)
|
||||||
|
.from("#X1", {opacity: 0, duration: 0.1,}, 0)
|
||||||
|
.from("#X2-base", {morphSVG:{shape: x2_ogShape, type: "linear", shapeIndex: 2}, duration: 0.53}, 0.11)
|
||||||
|
.from("#X2-base", {opacity: 0, duration: 0.01,}, 0.11)
|
||||||
|
.to("#X2-shadow", {opacity: 0, duration: 1.3}, 0)
|
||||||
|
|
||||||
|
//Movement Timeline
|
||||||
|
const movement_tl = gsap.timeline();
|
||||||
|
movement_tl
|
||||||
|
.from("svg", {opacity: 0, duration: 0.7}, 0)
|
||||||
|
.from("svg", {xPercent:50, left:"50%", duration: 1.9, ease: CustomEase.create("custom", "M0,0,C0.358,0.144,0.098,1,1,1")}, 0.7)
|
||||||
|
|
||||||
|
//Exit Timeline
|
||||||
|
const exit_tl = gsap.timeline();
|
||||||
|
exit_tl
|
||||||
|
.to("svg", {opacity: 0, duration: 0.5})
|
||||||
|
|
||||||
|
//Master Timeline
|
||||||
|
const master_tl = gsap.timeline({repeat: -1, repeatDelay: 1});
|
||||||
|
master_tl
|
||||||
|
.add((movement_tl), 0)
|
||||||
|
.add((n_tl), 0.7)
|
||||||
|
.add((e_tl), 0.8)
|
||||||
|
.add((t_tl), 1.08)
|
||||||
|
.add((f_tl), 1.18)
|
||||||
|
.add((l_tl), 1.33)
|
||||||
|
.add((i_tl), 1.63)
|
||||||
|
.add((x_tl), 1.7)
|
||||||
|
.add((exit_tl), 6)
|
||||||
|
|
||||||
|
// ---------- UI CONTROLS ---------- //
|
||||||
|
const theme1 = document.querySelector("#theme1");
|
||||||
|
const theme2 = document.querySelector("#theme2");
|
||||||
|
const theme3 = document.querySelector("#theme3");
|
||||||
|
const themes = document.querySelectorAll(".theme");
|
||||||
|
const body = document.querySelector("body");
|
||||||
|
|
||||||
|
|
||||||
|
// Colours
|
||||||
|
const colours = [
|
||||||
|
{theme: "#E50914", bg: "black"},
|
||||||
|
{theme: "white", bg: "#E50914"},
|
||||||
|
{theme: "#CFFFE9", bg: "#002E19"}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Setting the OG document colours
|
||||||
|
for(i = 0; i < themes.length; i++){
|
||||||
|
themes[i].style.backgroundColor = colours[i].theme;
|
||||||
|
themes[i].querySelector(".bg-colour").style.background = colours[i].bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.style.setProperty('--primary-colour', colours[0].theme);
|
||||||
|
document.documentElement.style.setProperty('--shadow-colour', colours[0].bg);
|
||||||
|
body.style.backgroundColor = colours[0].bg;
|
||||||
|
|
||||||
|
// Adding click events
|
||||||
|
for (t = 0; t < themes.length; t++){
|
||||||
|
themes[t].addEventListener("click", function(){
|
||||||
|
document.documentElement.style.setProperty('--primary-colour', this.style.backgroundColor);
|
||||||
|
document.documentElement.style.setProperty('--shadow-colour', this.querySelector(".bg-colour").style.backgroundColor);
|
||||||
|
body.style.backgroundColor = this.querySelector(".bg-colour").style.backgroundColor;
|
||||||
|
});
|
||||||
|
}
|
||||||
72
animations/netflix-logo-animation/style.css
Normal file
72
animations/netflix-logo-animation/style.css
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
:root {
|
||||||
|
--primary-colour: #E50914;
|
||||||
|
--shadow-colour: black;
|
||||||
|
--shadow-intensity: 0.6;
|
||||||
|
--UIControlsSize: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- Netflix SVG ---------- */
|
||||||
|
|
||||||
|
.base {
|
||||||
|
fill: var(--primary-colour);
|
||||||
|
transition: fill 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-start {
|
||||||
|
stop-color: var(--shadow-colour);
|
||||||
|
stop-opacity: var(--shadow-intensity);
|
||||||
|
|
||||||
|
}
|
||||||
|
.shadow-end {
|
||||||
|
stop-color: var(--shadow-colour);
|
||||||
|
stop-opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
background: black;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netflix-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin: 15vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- UI Controls ---------- */
|
||||||
|
|
||||||
|
.themesContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme {
|
||||||
|
width: var(--UIControlsSize);
|
||||||
|
height: var(--UIControlsSize);
|
||||||
|
margin: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid white;
|
||||||
|
background: lightgray;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-colour {
|
||||||
|
height: 100%;
|
||||||
|
width: 50%;
|
||||||
|
transform-origin: 100% 50%;
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
3
buttons-and-toggles/electric-hover-effect/README.md
Normal file
3
buttons-and-toggles/electric-hover-effect/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Electric hover effect
|
||||||
|
|
||||||
|
|
||||||
14
buttons-and-toggles/electric-hover-effect/dat.gui.min.js
vendored
Normal file
14
buttons-and-toggles/electric-hover-effect/dat.gui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
87
buttons-and-toggles/electric-hover-effect/index.html
Normal file
87
buttons-and-toggles/electric-hover-effect/index.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Electric hover effect</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<a href="#" target="_blank">ENTER</a>
|
||||||
|
|
||||||
|
<script id="vertexShader" type="x-shader/x-vertex">
|
||||||
|
varying vec2 vUv;
|
||||||
|
void main() {
|
||||||
|
vUv = uv;
|
||||||
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
||||||
|
uniform sampler2D _circle;
|
||||||
|
uniform sampler2D _circle_blur;
|
||||||
|
uniform sampler2D _dist;
|
||||||
|
uniform sampler2D _mask;
|
||||||
|
uniform sampler2D _color;
|
||||||
|
uniform float _time;
|
||||||
|
varying vec2 vUv;
|
||||||
|
|
||||||
|
//custom
|
||||||
|
uniform float _dispFactor;
|
||||||
|
uniform float _speed;
|
||||||
|
|
||||||
|
float map(float value, float minA, float maxA, float minB, float maxB){
|
||||||
|
return (value - minA) / (maxA - minA) * (maxB - minB) + minB;
|
||||||
|
}
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
|
||||||
|
vec2 uv = vUv;
|
||||||
|
|
||||||
|
vec4 circleTexture = texture2D( _mask, uv );
|
||||||
|
|
||||||
|
vec2 scaleCenter = vec2(0.5, 0.5);
|
||||||
|
|
||||||
|
vec2 coord = uv;
|
||||||
|
float sin_factor = sin(0.72 * _time);
|
||||||
|
float cos_factor = cos(0.72 * _time);
|
||||||
|
coord = vec2(coord.x - 0.5, coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);
|
||||||
|
coord += 0.5;
|
||||||
|
|
||||||
|
|
||||||
|
vec2 distMapUV = uv * 0.22;
|
||||||
|
distMapUV.y -= _time / _speed;
|
||||||
|
|
||||||
|
vec4 mapColorDisp = texture2D( _color, (coord - scaleCenter) * 0.7 + scaleCenter );
|
||||||
|
vec4 mapDisp = texture2D( _dist, distMapUV);// - 0.75;
|
||||||
|
|
||||||
|
float xDisp = map( mapColorDisp.x, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
|
||||||
|
float yDisp = map( mapColorDisp.y, 0.0, 1.0, -1.0, 1.0 ) * mapDisp.x * _dispFactor;
|
||||||
|
|
||||||
|
vec2 uvDisp = vec2(
|
||||||
|
clamp( xDisp * 0.3448 * circleTexture.a, -0.1, 0.1 ),
|
||||||
|
clamp( yDisp * 0.3448 * circleTexture.a, -0.1, 0.1 )
|
||||||
|
);
|
||||||
|
|
||||||
|
float maskCircle = circleTexture.a * 1.8;
|
||||||
|
|
||||||
|
vec2 scaledUV = vec2((uv - scaleCenter) * 1.5 + scaleCenter );
|
||||||
|
|
||||||
|
vec4 tex_light = texture2D( _circle, scaledUV + uvDisp * coord * 1.5);
|
||||||
|
vec4 tex_lightBlur = texture2D( _circle_blur, scaledUV + uvDisp * coord * 1.5);
|
||||||
|
tex_lightBlur.a *= (8.41 * circleTexture.a);
|
||||||
|
tex_lightBlur.rgb *= 2.2;
|
||||||
|
tex_light.rgb *= 1.6 * max((1.0 - maskCircle), .0);
|
||||||
|
|
||||||
|
|
||||||
|
gl_FragColor = mix(tex_light, tex_lightBlur, min(maskCircle, 1.0));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!-- partial -->
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>
|
||||||
|
<script src='./dat.gui.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
184
buttons-and-toggles/electric-hover-effect/script.js
Normal file
184
buttons-and-toggles/electric-hover-effect/script.js
Normal file
File diff suppressed because one or more lines are too long
31
buttons-and-toggles/electric-hover-effect/style.css
Normal file
31
buttons-and-toggles/electric-hover-effect/style.css
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
position: absolute;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "helvetica";
|
||||||
|
letter-spacing: 8px;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
-webkit-transition: color 0.6s ease;
|
||||||
|
transition: color 0.6s ease;
|
||||||
|
padding: 130px 90px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
-webkit-transition: color 0.6s ease;
|
||||||
|
transition: color 0.6s ease;
|
||||||
|
}
|
||||||
3
buttons-and-toggles/responsive-numeric-stepper/README.md
Normal file
3
buttons-and-toggles/responsive-numeric-stepper/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Responsive numeric stepper
|
||||||
|
|
||||||
|
Used as an example for utilising media queries with the display property to build a responsive numeric stepper.
|
||||||
42
buttons-and-toggles/responsive-numeric-stepper/index.html
Normal file
42
buttons-and-toggles/responsive-numeric-stepper/index.html
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Responsive numeric stepper</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="passengers">
|
||||||
|
<h1>Select number of passengers</h1>
|
||||||
|
<div class="passenger">
|
||||||
|
<p class="passenger__label">Adult <span>(age 12 & up)</span></p>
|
||||||
|
<div class="passenger__stepper">
|
||||||
|
<button type="button" class="stepper stepper__less">-</button>
|
||||||
|
<p class="stepper__display">1</p>
|
||||||
|
<button type="button" class="stepper stepper__more">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="passenger">
|
||||||
|
<p class="passenger__label">Children <span>(age 2-11yrs)</span></p>
|
||||||
|
<div class="passenger__stepper">
|
||||||
|
<button type="button" class="stepper stepper__less">-</button>
|
||||||
|
<p class="stepper__display">1</p>
|
||||||
|
<button type="button" class="stepper stepper__more">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="passenger">
|
||||||
|
<p class="passenger__label">Infant <span>(age 1-23mths)</span></p>
|
||||||
|
<div class="passenger__stepper">
|
||||||
|
<button type="button" class="stepper stepper__less">-</button>
|
||||||
|
<p class="stepper__display">1</p>
|
||||||
|
<button type="button" class="stepper stepper__more">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
144
buttons-and-toggles/responsive-numeric-stepper/style.css
Normal file
144
buttons-and-toggles/responsive-numeric-stepper/style.css
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css?family=Happy+Monkey|Lemon);
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Happy Monkey";
|
||||||
|
line-height: 1.5;
|
||||||
|
min-width: 21.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.passengers {
|
||||||
|
padding: 1em;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 60em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Lemon';
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.passenger {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-right: 1.69492%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 31em) {
|
||||||
|
.passenger {
|
||||||
|
width: 32.2033898305%;
|
||||||
|
float: left;
|
||||||
|
margin-right: 1.6949152542%;
|
||||||
|
border-right: 1px solid black;
|
||||||
|
}
|
||||||
|
.passenger:nth-child(3n) {
|
||||||
|
float: right;
|
||||||
|
margin-right: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 31em) {
|
||||||
|
.passenger__label {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 30.99em) {
|
||||||
|
.passenger__label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: calc(100% - 10.25em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 24.5em) {
|
||||||
|
.passenger__label span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 31em) and (max-width: 39.99em) {
|
||||||
|
.passenger__label span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.passenger__stepper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.passenger__stepper > * {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 30.99em) {
|
||||||
|
.passenger__stepper {
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 31em) {
|
||||||
|
.passenger__stepper {
|
||||||
|
display: block;
|
||||||
|
max-width: 14em;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.passenger__stepper::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stepper {
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.25em;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;
|
||||||
|
}
|
||||||
|
.stepper:active {
|
||||||
|
box-shadow: 0 0 0 1px white, 0 0 0 1px black;
|
||||||
|
-webkit-transform: translate(0.125rem, 0.125rem);
|
||||||
|
transform: translate(0.125rem, 0.125rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper__display {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 31em) {
|
||||||
|
.stepper__display {
|
||||||
|
font-size: 5em;
|
||||||
|
float: left;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper__more {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepper__less {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
4
buttons-and-toggles/trash-button-animation/README.md
Normal file
4
buttons-and-toggles/trash-button-animation/README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Trash button animation
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
30
buttons-and-toggles/trash-button-animation/index.html
Normal file
30
buttons-and-toggles/trash-button-animation/index.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Trash button animation</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||||
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap'><link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<button class="button">
|
||||||
|
<div class="trash">
|
||||||
|
<div class="top">
|
||||||
|
<div class="paper"></div>
|
||||||
|
</div>
|
||||||
|
<div class="box"></div>
|
||||||
|
<div class="check">
|
||||||
|
<svg viewBox="0 0 8 6">
|
||||||
|
<polyline points="1 3.4 2.71428571 5 7 1"></polyline>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span>Delete Item</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
buttons-and-toggles/trash-button-animation/script.js
Normal file
7
buttons-and-toggles/trash-button-animation/script.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
|
||||||
|
if(!button.classList.contains('delete')) {
|
||||||
|
button.classList.add('delete');
|
||||||
|
setTimeout(() => button.classList.remove('delete'), 3200);
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
}));
|
||||||
365
buttons-and-toggles/trash-button-animation/style.css
Normal file
365
buttons-and-toggles/trash-button-animation/style.css
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
.button {
|
||||||
|
--background: #2B3044;
|
||||||
|
--background-hover: #1E2235;
|
||||||
|
--text: #fff;
|
||||||
|
--shadow: rgba(0, 9, 61, .2);
|
||||||
|
--paper: #5C86FF;
|
||||||
|
--paper-lines: #fff;
|
||||||
|
--trash: #E1E6F9;
|
||||||
|
--trash-lines: #BBC1E1;
|
||||||
|
--check: #fff;
|
||||||
|
--check-background: #5C86FF;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
padding: 10px 24px;
|
||||||
|
border-radius: 7px;
|
||||||
|
min-width: 142px;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--btn, var(--background));
|
||||||
|
box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 8px) var(--shadow);
|
||||||
|
-webkit-transform: scale(var(--scale, 1));
|
||||||
|
transform: scale(var(--scale, 1));
|
||||||
|
-webkit-transition: box-shadow .3s, background .3s, -webkit-transform .3s;
|
||||||
|
transition: box-shadow .3s, background .3s, -webkit-transform .3s;
|
||||||
|
transition: transform .3s, box-shadow .3s, background .3s;
|
||||||
|
transition: transform .3s, box-shadow .3s, background .3s, -webkit-transform .3s;
|
||||||
|
}
|
||||||
|
.button span {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
opacity: var(--span-opacity, 1);
|
||||||
|
-webkit-transform: translateX(var(--span-x, 0)) translateZ(0);
|
||||||
|
transform: translateX(var(--span-x, 0)) translateZ(0);
|
||||||
|
-webkit-transition: opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
|
||||||
|
transition: opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
|
||||||
|
transition: transform 0.4s ease var(--span-delay, 0.2s), opacity 0.3s ease var(--span-delay, 0.2s);
|
||||||
|
transition: transform 0.4s ease var(--span-delay, 0.2s), opacity 0.3s ease var(--span-delay, 0.2s), -webkit-transform 0.4s ease var(--span-delay, 0.2s);
|
||||||
|
}
|
||||||
|
.button .trash {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
left: -8px;
|
||||||
|
-webkit-transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, 0.64));
|
||||||
|
transform: translate(var(--trash-x, 0), var(--trash-y, 1px)) translateZ(0) scale(var(--trash-scale, 0.64));
|
||||||
|
-webkit-transition: -webkit-transform .5s;
|
||||||
|
transition: -webkit-transform .5s;
|
||||||
|
transition: transform .5s;
|
||||||
|
transition: transform .5s, -webkit-transform .5s;
|
||||||
|
}
|
||||||
|
.button .trash:before, .button .trash:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 8px;
|
||||||
|
width: 2px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: var(--icon, var(--trash));
|
||||||
|
bottom: 100%;
|
||||||
|
-webkit-transform-origin: 50% 6px;
|
||||||
|
transform-origin: 50% 6px;
|
||||||
|
-webkit-transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7)) rotate(var(--r, 0deg));
|
||||||
|
transform: translate(var(--x, 3px), 2px) scaleY(var(--sy, 0.7)) rotate(var(--r, 0deg));
|
||||||
|
-webkit-transition: background .3s, -webkit-transform .4s;
|
||||||
|
transition: background .3s, -webkit-transform .4s;
|
||||||
|
transition: transform .4s, background .3s;
|
||||||
|
transition: transform .4s, background .3s, -webkit-transform .4s;
|
||||||
|
}
|
||||||
|
.button .trash:before {
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
.button .trash:after {
|
||||||
|
right: 1px;
|
||||||
|
--x: -3px;
|
||||||
|
}
|
||||||
|
.button .trash .top {
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
left: -4px;
|
||||||
|
right: -4px;
|
||||||
|
bottom: 100%;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
-webkit-transform: translateY(2px);
|
||||||
|
transform: translateY(2px);
|
||||||
|
}
|
||||||
|
.button .trash .top:before, .button .trash .top:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: var(--icon, var(--trash));
|
||||||
|
width: var(--w, 12px);
|
||||||
|
height: var(--h, 2px);
|
||||||
|
left: var(--l, 8px);
|
||||||
|
bottom: var(--b, 5px);
|
||||||
|
-webkit-transition: background .3s, -webkit-transform .4s;
|
||||||
|
transition: background .3s, -webkit-transform .4s;
|
||||||
|
transition: background .3s, transform .4s;
|
||||||
|
transition: background .3s, transform .4s, -webkit-transform .4s;
|
||||||
|
}
|
||||||
|
.button .trash .top:after {
|
||||||
|
--w: 28px;
|
||||||
|
--h: 2px;
|
||||||
|
--l: 0;
|
||||||
|
--b: 0;
|
||||||
|
-webkit-transform: scaleX(var(--trash-line-scale, 1));
|
||||||
|
transform: scaleX(var(--trash-line-scale, 1));
|
||||||
|
}
|
||||||
|
.button .trash .top .paper {
|
||||||
|
width: 14px;
|
||||||
|
height: 18px;
|
||||||
|
background: var(--paper);
|
||||||
|
left: 7px;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
position: absolute;
|
||||||
|
-webkit-transform: translateY(-16px);
|
||||||
|
transform: translateY(-16px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.button .trash .top .paper:before, .button .trash .top .paper:after {
|
||||||
|
content: '';
|
||||||
|
width: var(--w, 10px);
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 1px;
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: var(--t, 2px);
|
||||||
|
background: var(--paper-lines);
|
||||||
|
-webkit-transform: scaleY(0.7);
|
||||||
|
transform: scaleY(0.7);
|
||||||
|
box-shadow: 0 9px 0 var(--paper-lines);
|
||||||
|
}
|
||||||
|
.button .trash .top .paper:after {
|
||||||
|
--t: 5px;
|
||||||
|
--w: 7px;
|
||||||
|
}
|
||||||
|
.button .trash .box {
|
||||||
|
width: 20px;
|
||||||
|
height: 25px;
|
||||||
|
border: 2px solid var(--icon, var(--trash));
|
||||||
|
border-radius: 1px 1px 4px 4px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
-webkit-transition: border-color .3s;
|
||||||
|
transition: border-color .3s;
|
||||||
|
}
|
||||||
|
.button .trash .box:before, .button .trash .box:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 4px;
|
||||||
|
height: var(--h, 20px);
|
||||||
|
top: 0;
|
||||||
|
left: var(--l, 50%);
|
||||||
|
background: var(--b, var(--trash-lines));
|
||||||
|
}
|
||||||
|
.button .trash .box:before {
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-left: -2px;
|
||||||
|
-webkit-transform: translateX(-3px) scale(0.6);
|
||||||
|
transform: translateX(-3px) scale(0.6);
|
||||||
|
box-shadow: 10px 0 0 var(--trash-lines);
|
||||||
|
opacity: var(--trash-lines-opacity, 1);
|
||||||
|
-webkit-transition: opacity .4s, -webkit-transform .4s;
|
||||||
|
transition: opacity .4s, -webkit-transform .4s;
|
||||||
|
transition: transform .4s, opacity .4s;
|
||||||
|
transition: transform .4s, opacity .4s, -webkit-transform .4s;
|
||||||
|
}
|
||||||
|
.button .trash .box:after {
|
||||||
|
--h: 16px;
|
||||||
|
--b: var(--paper);
|
||||||
|
--l: 1px;
|
||||||
|
-webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
box-shadow: 7px 0 0 var(--paper), 14px 0 0 var(--paper), 21px 0 0 var(--paper);
|
||||||
|
}
|
||||||
|
.button .trash .check {
|
||||||
|
padding: 4px 3px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--check-background);
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: 24px;
|
||||||
|
opacity: var(--check-opacity, 0);
|
||||||
|
-webkit-transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));
|
||||||
|
transform: translateY(var(--check-y, 0)) scale(var(--check-scale, 0.2));
|
||||||
|
-webkit-transition: opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
|
||||||
|
transition: opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
|
||||||
|
transition: transform var(--check-duration, 0.2s) ease var(--check-delay, 0s), opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s);
|
||||||
|
transition: transform var(--check-duration, 0.2s) ease var(--check-delay, 0s), opacity var(--check-duration-opacity, 0.2s) ease var(--check-delay, 0s), -webkit-transform var(--check-duration, 0.2s) ease var(--check-delay, 0s);
|
||||||
|
}
|
||||||
|
.button .trash .check svg {
|
||||||
|
width: 8px;
|
||||||
|
height: 6px;
|
||||||
|
display: block;
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 1.5;
|
||||||
|
stroke-dasharray: 9px;
|
||||||
|
stroke-dashoffset: var(--check-offset, 9px);
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke: var(--check);
|
||||||
|
-webkit-transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);
|
||||||
|
transition: stroke-dashoffset 0.4s ease var(--checkmark-delay, 0.4s);
|
||||||
|
}
|
||||||
|
.button.delete {
|
||||||
|
--span-opacity: 0;
|
||||||
|
--span-x: 16px;
|
||||||
|
--span-delay: 0s;
|
||||||
|
--trash-x: 46px;
|
||||||
|
--trash-y: 2px;
|
||||||
|
--trash-scale: 1;
|
||||||
|
--trash-lines-opacity: 0;
|
||||||
|
--trash-line-scale: 0;
|
||||||
|
--icon: #fff;
|
||||||
|
--check-offset: 0;
|
||||||
|
--check-opacity: 1;
|
||||||
|
--check-scale: 1;
|
||||||
|
--check-y: 16px;
|
||||||
|
--check-delay: 1.7s;
|
||||||
|
--checkmark-delay: 2.1s;
|
||||||
|
--check-duration: .55s;
|
||||||
|
--check-duration-opacity: .3s;
|
||||||
|
}
|
||||||
|
.button.delete .trash:before, .button.delete .trash:after {
|
||||||
|
--sy: 1;
|
||||||
|
--x: 0;
|
||||||
|
}
|
||||||
|
.button.delete .trash:before {
|
||||||
|
--r: 40deg;
|
||||||
|
}
|
||||||
|
.button.delete .trash:after {
|
||||||
|
--r: -40deg;
|
||||||
|
}
|
||||||
|
.button.delete .trash .top .paper {
|
||||||
|
-webkit-animation: paper 1.5s linear forwards .5s;
|
||||||
|
animation: paper 1.5s linear forwards .5s;
|
||||||
|
}
|
||||||
|
.button.delete .trash .box:after {
|
||||||
|
-webkit-animation: cut 1.5s linear forwards .5s;
|
||||||
|
animation: cut 1.5s linear forwards .5s;
|
||||||
|
}
|
||||||
|
.button.delete, .button:hover {
|
||||||
|
--btn: var(--background-hover);
|
||||||
|
--shadow-y: 5px;
|
||||||
|
--shadow-blur: 9px;
|
||||||
|
}
|
||||||
|
.button:active {
|
||||||
|
--shadow-y: 2px;
|
||||||
|
--shadow-blur: 5px;
|
||||||
|
--scale: .94;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes paper {
|
||||||
|
10%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
-webkit-transform: translateY(-16px);
|
||||||
|
transform: translateY(-16px);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
70%,
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateY(24px);
|
||||||
|
transform: translateY(24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes paper {
|
||||||
|
10%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
-webkit-transform: translateY(-16px);
|
||||||
|
transform: translateY(-16px);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
70%,
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateY(24px);
|
||||||
|
transform: translateY(24px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes cut {
|
||||||
|
0%,
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translate(-0.5px, 24px) scaleX(0.5);
|
||||||
|
transform: translate(-0.5px, 24px) scaleX(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes cut {
|
||||||
|
0%,
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
transform: translate(-0.5px, -16px) scaleX(0.5);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translate(-0.5px, 24px) scaleX(0.5);
|
||||||
|
transform: translate(-0.5px, 24px) scaleX(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
*:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
font-family: 'Inter', Arial;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #ECEFFC;
|
||||||
|
}
|
||||||
|
body .dribbble {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
body .dribbble img {
|
||||||
|
display: block;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
body .twitter {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
right: 64px;
|
||||||
|
bottom: 14px;
|
||||||
|
}
|
||||||
|
body .twitter svg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
fill: #1da1f2;
|
||||||
|
}
|
||||||
1
cards/card-hover-interaction/README.md
Normal file
1
cards/card-hover-interaction/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Card Hover Interaction
|
||||||
72
cards/card-hover-interaction/index.html
Normal file
72
cards/card-hover-interaction/index.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Card Hover Interaction</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<figure class="card card--1" style="--image-src: url('https://source.unsplash.com/78A265wPiO4')">
|
||||||
|
<figcaption>
|
||||||
|
<span class="info">
|
||||||
|
<h3>The Hills</h3>
|
||||||
|
<span>by David Marcu</span>
|
||||||
|
</span>
|
||||||
|
<span class="links">
|
||||||
|
<a href="#"><i class="fas fa-heart"></i></a>
|
||||||
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="https://unsplash.com/photos/78A265wPiO4" target="_blank"><i class="fas fa-share"></i></a>
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card card--2" style="--image-src: url('https://source.unsplash.com/TFyi0QOx08c')">
|
||||||
|
<figcaption>
|
||||||
|
<span class="info">
|
||||||
|
<h3>The Forest</h3>
|
||||||
|
<span>by Jay Mantri</span>
|
||||||
|
</span>
|
||||||
|
<span class="links">
|
||||||
|
<a href="#"><i class="fas fa-heart"></i></a>
|
||||||
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="https://unsplash.com/photos/TFyi0QOx08c" target="_blank"><i class="fas fa-share"></i></a>
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card card--3" style="--image-src: url('https://source.unsplash.com/PP8Escz15d8')">
|
||||||
|
<figcaption>
|
||||||
|
<span class="info">
|
||||||
|
<h3>The Desert</h3>
|
||||||
|
<span>by Keith Hardy</span>
|
||||||
|
</span>
|
||||||
|
<span class="links">
|
||||||
|
<a href="#"><i class="fas fa-heart"></i></a>
|
||||||
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="https://unsplash.com/photos/PP8Escz15d8" target="_blank"><i class="fas fa-share"></i></a>
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card card--4" style="--image-src: url('https://source.unsplash.com/DLwUVlzrP0Q')">
|
||||||
|
<figcaption>
|
||||||
|
<span class="info">
|
||||||
|
<h3>The Ocean</h3>
|
||||||
|
<span>by Dan Stark</span>
|
||||||
|
</span>
|
||||||
|
<span class="links">
|
||||||
|
<a href="#"><i class="fas fa-heart"></i></a>
|
||||||
|
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="https://unsplash.com/photos/DLwUVlzrP0Q" target="_blank"><i class="fas fa-share"></i></a>
|
||||||
|
</span>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
178
cards/card-hover-interaction/style.css
Normal file
178
cards/card-hover-interaction/style.css
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #e4e4e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.card {
|
||||||
|
position: relative;
|
||||||
|
width: 380px;
|
||||||
|
height: 240px;
|
||||||
|
background-image: var(--image-src);
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-size: 125%;
|
||||||
|
transition: background 400ms ease;
|
||||||
|
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.03), 0 22.3px 17.9px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
figure.card:hover figcaption {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
figure.card--1:hover {
|
||||||
|
background-position: 50% 100%;
|
||||||
|
}
|
||||||
|
figure.card--1 figcaption {
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateY(80px);
|
||||||
|
}
|
||||||
|
figure.card--2 {
|
||||||
|
background-size: 110%;
|
||||||
|
}
|
||||||
|
figure.card--2:hover {
|
||||||
|
background-position: 50% -100%;
|
||||||
|
}
|
||||||
|
figure.card--2 figcaption {
|
||||||
|
top: 0;
|
||||||
|
transform: translateY(-80px);
|
||||||
|
}
|
||||||
|
figure.card--3 {
|
||||||
|
background-size: 115%;
|
||||||
|
}
|
||||||
|
figure.card--3:hover {
|
||||||
|
background-position: -100% 50%;
|
||||||
|
}
|
||||||
|
figure.card--3 figcaption {
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-180px);
|
||||||
|
}
|
||||||
|
figure.card--4:hover {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
figure.card--4 figcaption {
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(180px);
|
||||||
|
}
|
||||||
|
figure.card--1 figcaption, figure.card--2 figcaption {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
figure.card--3 figcaption, figure.card--4 figcaption {
|
||||||
|
flex-direction: column;
|
||||||
|
width: 180px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
figure.card figcaption {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
background: #282828;
|
||||||
|
transition: transform 400ms ease;
|
||||||
|
}
|
||||||
|
figure.card figcaption .info {
|
||||||
|
color: #e2e2e2;
|
||||||
|
font-family: "Montserrat";
|
||||||
|
}
|
||||||
|
figure.card figcaption .info h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
figure.card figcaption .info span {
|
||||||
|
color: #72cc60;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links a {
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
opacity: 0.65;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links a:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links a:focus::after {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
figure.card figcaption .links a::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
transform: scale(0.5);
|
||||||
|
z-index: -1;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 900px) {
|
||||||
|
body {
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
grid-template-rows: repeat(4, 1fr);
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 40px;
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.support {
|
||||||
|
position: fixed;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.support a {
|
||||||
|
margin: 0 10px;
|
||||||
|
color: #222;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transition: all 150ms ease;
|
||||||
|
}
|
||||||
|
.support a:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
1
cards/extreme-hover/README.md
Normal file
1
cards/extreme-hover/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Extreme Hover
|
||||||
72
cards/extreme-hover/index.html
Normal file
72
cards/extreme-hover/index.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Extreme Hover</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div style='opacity: 0;' id='imageHover'>
|
||||||
|
<div class="image-hover-container">
|
||||||
|
<div class='container'>
|
||||||
|
<div class='middle'>
|
||||||
|
<div class='bg-image lake-district'></div>
|
||||||
|
<a href='#' target="_blank" class='overlay'>
|
||||||
|
<p>Lake District</p>
|
||||||
|
<p>Cumbria, uk</p>
|
||||||
|
<p class='mobile-link'>Read More</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class='bottom-right'>
|
||||||
|
<div class='bg-image lake-district'></div>
|
||||||
|
</div>
|
||||||
|
<div class='bottom-left'>
|
||||||
|
<div class='bg-image lake-district'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='top-left'>
|
||||||
|
<div class='bg-image lake-district'></div>
|
||||||
|
</div>
|
||||||
|
<div class='top-right'>
|
||||||
|
<div class='bg-image lake-district'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-hover-container">
|
||||||
|
<div class='container'>
|
||||||
|
<div class='middle'>
|
||||||
|
<div class='bg-image lancaster'></div>
|
||||||
|
<a href='#' target="_blank" class='overlay'>
|
||||||
|
<p>Lancaster</p>
|
||||||
|
<p>Lancashire, uk</p>
|
||||||
|
<p class='mobile-link'>Read More</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class='bottom-right'>
|
||||||
|
<div class='bg-image lancaster'></div>
|
||||||
|
</div>
|
||||||
|
<div class='bottom-left'>
|
||||||
|
<div class='bg-image lancaster'></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='top-left'>
|
||||||
|
<div class='bg-image lancaster'></div>
|
||||||
|
</div>
|
||||||
|
<div class='top-right'>
|
||||||
|
<div class='bg-image lancaster'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='loading-container' id='loadingScreen'>
|
||||||
|
<div id="loading"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
cards/extreme-hover/script.js
Normal file
8
cards/extreme-hover/script.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
// Loading Screen
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
let hoverImagesContainer = document.getElementById('imageHover');
|
||||||
|
let loadingScreen = document.getElementById('loadingScreen');
|
||||||
|
loadingScreen.style.opacity = '0';
|
||||||
|
loadingScreen.style.zIndex = '-1';
|
||||||
|
hoverImagesContainer.style.opacity = '1';
|
||||||
|
});
|
||||||
316
cards/extreme-hover/style.css
Normal file
316
cards/extreme-hover/style.css
Normal file
@ -0,0 +1,316 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300&family=Open+Sans&family=Roboto:wght@300&display=swap");
|
||||||
|
.image-hover-container {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.image-hover-container .container {
|
||||||
|
position: relative;
|
||||||
|
height: 430px;
|
||||||
|
width: 310px;
|
||||||
|
margin: auto;
|
||||||
|
display: -webkit-box;
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .bottom-right {
|
||||||
|
top: 55%;
|
||||||
|
left: 80%;
|
||||||
|
box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .middle {
|
||||||
|
height: 90%;
|
||||||
|
left: 5%;
|
||||||
|
top: 5%;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: 0px 23px 33px rgba(0, 0, 0, 0.34);
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .middle .overlay {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .middle .overlay p:nth-child(1) {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .top-left {
|
||||||
|
left: -70px;
|
||||||
|
top: -90px;
|
||||||
|
width: 150px;
|
||||||
|
box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .top-right {
|
||||||
|
left: 250px;
|
||||||
|
top: -90px;
|
||||||
|
width: 260px;
|
||||||
|
height: 280px;
|
||||||
|
box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.image-hover-container .container:hover > .bottom-left {
|
||||||
|
left: -89%;
|
||||||
|
top: 65%;
|
||||||
|
width: 360px;
|
||||||
|
box-shadow: 0px 37px 29px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.image-hover-container .container .lancaster {
|
||||||
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lancaster-min.jpg) no-repeat;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .lake-district {
|
||||||
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-district-min.jpg) no-repeat;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .bg-image {
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-position: 10% 10%;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle {
|
||||||
|
-webkit-transition: 500ms all;
|
||||||
|
transition: 500ms all;
|
||||||
|
-webkit-transition-delay: 0.25s;
|
||||||
|
transition-delay: 0.25s;
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
box-shadow: 0px 17px 23px rgba(0, 0, 0, 0.34);
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .bg-image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9;
|
||||||
|
background: rgba(67, 27, 12, 0.75);
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-transition: 300ms all;
|
||||||
|
transition: 300ms all;
|
||||||
|
-webkit-transition-delay: 0.37s;
|
||||||
|
transition-delay: 0.37s;
|
||||||
|
opacity: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .overlay p {
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 1.1em;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .overlay p:nth-child(1) {
|
||||||
|
margin-bottom: 4px !important;
|
||||||
|
padding-top: 30px;
|
||||||
|
-webkit-transition: all 400ms;
|
||||||
|
transition: all 400ms;
|
||||||
|
-webkit-transition-delay: 0.3s;
|
||||||
|
transition-delay: 0.3s;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .overlay p:nth-child(2) {
|
||||||
|
margin-top: 4px !important;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .middle .overlay .mobile-link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .bottom-right {
|
||||||
|
-webkit-transition: 800ms all;
|
||||||
|
transition: 800ms all;
|
||||||
|
-webkit-transition-delay: 0.15s;
|
||||||
|
transition-delay: 0.15s;
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
position: absolute;
|
||||||
|
left: 0%;
|
||||||
|
top: 48%;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0px 37px 29px rgba(0, 0, 0, 0);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .bottom-right .bg-image {
|
||||||
|
height: 220px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .bottom-left {
|
||||||
|
-webkit-transition: 800ms all;
|
||||||
|
transition: 800ms all;
|
||||||
|
-webkit-transition-delay: 0.17s;
|
||||||
|
transition-delay: 0.17s;
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
position: absolute;
|
||||||
|
left: 0%;
|
||||||
|
top: 48%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .bottom-left .bg-image {
|
||||||
|
height: 220px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .top-left {
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
-webkit-transition: 600ms all;
|
||||||
|
transition: 600ms all;
|
||||||
|
-webkit-transition-delay: 0.19s;
|
||||||
|
transition-delay: 0.19s;
|
||||||
|
position: absolute;
|
||||||
|
left: 0%;
|
||||||
|
top: 0%;
|
||||||
|
width: 150px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .top-left .bg-image {
|
||||||
|
height: 220px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-hover-container .container .top-right {
|
||||||
|
-webkit-transition: 500ms all;
|
||||||
|
transition: 500ms all;
|
||||||
|
-webkit-transition-delay: 0.08s;
|
||||||
|
transition-delay: 0.08s;
|
||||||
|
position: absolute;
|
||||||
|
left: 0%;
|
||||||
|
top: 0%;
|
||||||
|
width: 300px;
|
||||||
|
height: 260px;
|
||||||
|
z-index: 1;
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
transition-timing-function: cubic-bezier(0.17, 0.67, 0.33, 0.97);
|
||||||
|
}
|
||||||
|
.image-hover-container .container .top-right .bg-image {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 920px) {
|
||||||
|
.image-hover-container {
|
||||||
|
-webkit-transform: scale(0.8) translateX(0px);
|
||||||
|
transform: scale(0.8) translateX(0px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.image-hover-container .overlay p:nth-child(1) {
|
||||||
|
margin-top: 125px;
|
||||||
|
}
|
||||||
|
.image-hover-container .overlay p:nth-child(2) {
|
||||||
|
margin-bottom: 30px !important;
|
||||||
|
}
|
||||||
|
.image-hover-container .overlay .mobile-link {
|
||||||
|
display: block !important;
|
||||||
|
margin-top: 0px !important;
|
||||||
|
}
|
||||||
|
.image-hover-container .bottom-right, .image-hover-container .bottom-left, .image-hover-container .top-left, .image-hover-container .top-right {
|
||||||
|
box-shadow: 0px 0px 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
.bottom-right, .bottom-left, .top-left, .top-right {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading-container {
|
||||||
|
position: fixed;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: #fff;
|
||||||
|
-webkit-transition: 600ms all;
|
||||||
|
transition: 600ms all;
|
||||||
|
}
|
||||||
|
.loading-container #loading {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
background: rgba(67, 27, 12, 0.75);
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-animation: boing .8s linear infinite;
|
||||||
|
animation: boing .8s linear infinite;
|
||||||
|
position: relative;
|
||||||
|
top: calc(50% - 35px);
|
||||||
|
}
|
||||||
|
.loading-container #loading:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 30px);
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
display: block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: white;
|
||||||
|
-webkit-animation: boing-inner .8s linear infinite;
|
||||||
|
animation: boing-inner .8s linear infinite;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes boing {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0.75);
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes boing {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0.75);
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes boing-inner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0.6);
|
||||||
|
transform: scale(0.6);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes boing-inner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
-webkit-transform: scale(0.6);
|
||||||
|
transform: scale(0.6);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
2
css-effects/pure-css-eye/README.md
Normal file
2
css-effects/pure-css-eye/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Pure CSS "Eye"
|
||||||
|
|
||||||
53
css-effects/pure-css-eye/index.html
Normal file
53
css-effects/pure-css-eye/index.html
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pure CSS Eye</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="eye"></div>
|
||||||
|
|
||||||
|
<div class="circle-1"></div>
|
||||||
|
<div class="circle-2"></div>
|
||||||
|
<div class="circle-3"></div>
|
||||||
|
<div class="circle-4"></div>
|
||||||
|
<div class="circle-5"></div>
|
||||||
|
<div class="circle-6"></div>
|
||||||
|
<div class="circle-7"></div>
|
||||||
|
<div class="circle-8"></div>
|
||||||
|
<div class="circle-9"></div>
|
||||||
|
<div class="circle-10"></div>
|
||||||
|
<div class="circle-11"></div>
|
||||||
|
<div class="circle-12"></div>
|
||||||
|
<div class="circle-13"></div>
|
||||||
|
<div class="circle-14"></div>
|
||||||
|
|
||||||
|
<div class="glitch"></div>
|
||||||
|
|
||||||
|
<div class="fragment-1"></div>
|
||||||
|
<div class="fragment-2"></div>
|
||||||
|
<div class="fragment-3"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<svg width="190" height="190" viewBox="0 0 190 190" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<clipPath id='bagel1'>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M95 190C147.467 190 190 147.467 190 95C190 42.533 147.467 0 95 0C42.533 0 0 42.533 0 95C0 147.467 42.533 190 95 190ZM95 120C108.807 120 120 108.807 120 95C120 81.1929 108.807 70 95 70C81.1929 70 70 81.1929 70 95C70 108.807 81.1929 120 95 120Z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id='bagel2'>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M71 142C110.212 142 142 110.212 142 71C142 31.7878 110.212 0 71 0C31.7878 0 0 31.7878 0 71C0 110.212 31.7878 142 71 142ZM71 139C108.555 139 139 108.555 139 71C139 33.4446 108.555 3 71 3C33.4446 3 3 33.4446 3 71C3 108.555 33.4446 139 71 139Z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id='bagel3'>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M60 120C93.1372 120 120 93.1372 120 60C120 26.8628 93.1372 0 60 0C26.8628 0 0 26.8628 0 60C0 93.1372 26.8628 120 60 120ZM60 115C90.3757 115 115 90.3757 115 60C115 29.6243 90.3757 5 60 5C29.6243 5 5 29.6243 5 60C5 90.3757 29.6243 115 60 115Z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id='bagel4'>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 76C58.9868 76 76 58.9868 76 38C76 17.0132 58.9868 0 38 0C17.0132 0 0 17.0132 0 38C0 58.9868 17.0132 76 38 76ZM38 72C56.7777 72 72 56.7776 72 38C72 19.2224 56.7777 4 38 4C19.2223 4 4 19.2224 4 38C4 56.7776 19.2223 72 38 72Z" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
681
css-effects/pure-css-eye/style.css
Normal file
681
css-effects/pure-css-eye/style.css
Normal file
@ -0,0 +1,681 @@
|
|||||||
|
html, body {
|
||||||
|
padding: 0; margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
min-width: 800px;
|
||||||
|
height: 100vh;
|
||||||
|
min-height: 600px;
|
||||||
|
background: linear-gradient(-45deg, #8691b3, #edeef3);
|
||||||
|
}
|
||||||
|
body *, body *:before, body *:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.eye {
|
||||||
|
width: 332px; height: 332px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #EBEDF3;
|
||||||
|
filter: blur(5px);
|
||||||
|
|
||||||
|
animation: eyeAnimation 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes eyeAnimation {
|
||||||
|
0%, 33%, 100% {
|
||||||
|
box-shadow: inset -8px -13px 20px -10px rgba(230, 230, 236, 0.04), 64px 55px 40px -40px #38406A, 20px 18px 30px -10px #38406A, inset -70px -50px 60px -30px #4b6398, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 50px -10px #F6F6FB, 14px -1px 50px -10px #7e7ea9, 1px 9px 50px -10px #7e7ea9, inset -90px 40px 60px -20px rgba(116, 66, 255, 0.1), inset -90px -120px 60px -20px rgba(116, 66, 255, 0.1);
|
||||||
|
transform: translate(-50%, -50%) scale(1.25);
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
box-shadow: inset -8px -13px 60px -10px rgba(230, 230, 236, 0.2), 44px 35px 20px -20px #687294, 11px 9px 9px -4px #6e799d, inset -100px -70px 40px -110px #6A789C, inset -90px -90px 70px -90px #697398, inset -70px -50px 100px -40px #697398, inset 80px 50px 80px -50px #eeeef3, -25px -15px 30px -10px #F6F6FB;
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.eye::after {
|
||||||
|
width: 160px; height: 160px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
|
||||||
|
|
||||||
|
animation: pupilAnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
pupilAnimationView 4s ease infinite;
|
||||||
|
}
|
||||||
|
@keyframes pupilAnimationSize {
|
||||||
|
0%, 30%, 100% { transform: translate(-50%, -50%) scale(0.85); }
|
||||||
|
40%, 90% { transform: translate(-50%, -50%) scale(0.5); }
|
||||||
|
}
|
||||||
|
@keyframes pupilAnimationView {
|
||||||
|
0%, 30%, 100% {
|
||||||
|
box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
|
||||||
|
}
|
||||||
|
60%, 66% {
|
||||||
|
box-shadow: inset -50px -20px 30px 0px rgba(231, 226, 245, 0), inset 10px 10px 70px -27px rgba(47, 44, 76, 0), 0px 0px 10px 7px hsla(256, 49%, 92%, 0);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
box-shadow: inset -50px -20px 30px 0px #e7e2f5, inset 100px 10px 20px -27px #2f2c4c, 0px 0px 10px 7px rgba(231, 226, 245, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-1 {
|
||||||
|
width: 475px; height: 475px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-right-color: rgba(223, 228, 255, 0.6);
|
||||||
|
|
||||||
|
animation: circle1AnimationOpacity 4s ease infinite,
|
||||||
|
circle1AnimationMove 4s ease infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle1AnimationMove {
|
||||||
|
00%, 100% { transform: translate(-50%, -50%) rotate(49deg); }
|
||||||
|
07% { transform: translate(-50%, -50%) rotate(38deg); }
|
||||||
|
12%, 19%, 68% { transform: translate(-50%, -50%) rotate(42deg); }
|
||||||
|
26%, 30% { transform: translate(-50%, -50%) rotate(82deg); }
|
||||||
|
73% { transform: translate(-50%, -50%) rotate(34deg); }
|
||||||
|
87%, 92% { transform: translate(-50%, -50%) rotate(69deg); }
|
||||||
|
94% { transform: translate(-50%, -50%) rotate(65deg); }
|
||||||
|
}
|
||||||
|
@keyframes circle1AnimationOpacity {
|
||||||
|
00%, 27%, 73%, 100% { opacity: 1; }
|
||||||
|
30%, 70% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-2 {
|
||||||
|
width: 475px; height: 475px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-right-color: rgba(223, 228, 255, 0.6);
|
||||||
|
|
||||||
|
animation: circle2AnimationOpacity 4s ease infinite,
|
||||||
|
circle2AnimationMove 4s ease infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle2AnimationMove {
|
||||||
|
0%, 100% { transform: translate(-50%, -50%) rotate(229deg); }
|
||||||
|
9% { transform: translate(-50%, -50%) rotate(220deg); }
|
||||||
|
14%, 21% { transform: translate(-50%, -50%) rotate(225deg); }
|
||||||
|
29%, 67% { transform: translate(-50%, -50%) rotate(262deg); }
|
||||||
|
82% { transform: translate(-50%, -50%) rotate(241deg); }
|
||||||
|
90%, 94% { transform: translate(-50%, -50%) rotate(249deg); }
|
||||||
|
99% { transform: translate(-50%, -50%) rotate(245deg); }
|
||||||
|
}
|
||||||
|
@keyframes circle2AnimationOpacity {
|
||||||
|
0%, 27%, 79%, 100% { opacity: 1; }
|
||||||
|
30%, 76% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-3 {
|
||||||
|
left: calc(50% + 93px);
|
||||||
|
top: calc(50% - 189px);
|
||||||
|
width: 106px; height: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.circle-3::before {
|
||||||
|
left: -275%;
|
||||||
|
top: -4%;
|
||||||
|
width: 393px;
|
||||||
|
height: 393px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-right-color: rgba(223, 228, 255, 0.6);
|
||||||
|
|
||||||
|
animation: circle3Animation 4s ease infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle3Animation {
|
||||||
|
0% { transform: rotate(-3deg); }
|
||||||
|
20% { transform: rotate(-107deg); }
|
||||||
|
79% { transform: rotate(-286deg); }
|
||||||
|
100% { transform: rotate(-364deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-4 {
|
||||||
|
width: 295px; height: 295px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-right-color: rgb(251, 251, 251);
|
||||||
|
border-left-color: rgba(251, 251, 251, 0.2);
|
||||||
|
|
||||||
|
animation: circle4AnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
circle4AnimationOpacity 4s ease infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle4AnimationMove {
|
||||||
|
0%, 100% { transform: translate(-50%, -50%) rotate(219deg) scale(1); }
|
||||||
|
6% { transform: translate(-50%, -50%) rotate(221deg) scale(0.9); }
|
||||||
|
16% { transform: translate(-50%, -50%) rotate(302deg) scale(0.9); }
|
||||||
|
22% { transform: translate(-50%, -50%) rotate(307deg) scale(0.9); }
|
||||||
|
29% { transform: translate(-50%, -50%) rotate(312deg) scale(0.93); }
|
||||||
|
33% { transform: translate(-50%, -50%) rotate(310deg) scale(0.93); }
|
||||||
|
36% { transform: translate(-50%, -50%) rotate(300deg) scale(0.7); }
|
||||||
|
39% { transform: translate(-50%, -50%) rotate(220deg) scale(0.92); }
|
||||||
|
50%, 57% { transform: translate(-50%, -50%) rotate(248deg) scale(0.92); }
|
||||||
|
66% { transform: translate(-50%, -50%) rotate(225deg) scale(0.92); }
|
||||||
|
73%, 81% { transform: translate(-50%, -50%) rotate(243deg) scale(0.92); }
|
||||||
|
93% { transform: translate(-50%, -50%) rotate(215deg) scale(1); }
|
||||||
|
}
|
||||||
|
@keyframes circle4AnimationOpacity {
|
||||||
|
00%, 33%, 50%, 100% { opacity: 1; }
|
||||||
|
36%, 39% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-5 {
|
||||||
|
width: 100px; height: 100px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
animation: circle5AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
circle5AnimationView 4s ease infinite;
|
||||||
|
}
|
||||||
|
.circle-5::before {
|
||||||
|
width: 173px; height: 173px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgb(251, 251, 251);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.circle-5::after {
|
||||||
|
width: 177px; height: 177px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgb(251, 251, 251);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
@keyframes circle5AnimationSize {
|
||||||
|
0%, 38%, 82.82%, 100% { transform: translate(-50%, -50%) scale(1); }
|
||||||
|
45%, 75.44% { transform: translate(-50%, -50%) scale(0.7); }
|
||||||
|
}
|
||||||
|
@keyframes circle5AnimationView {
|
||||||
|
0%, 5.7%, 7.4%, 9.8%, 11.5%, 14%, 15.6%, 18.9%, 21.3%, 23.8%, 25.4%, 28.7%, 35.3%, 42%, 77.9%, 82.7%, 83.6%, 85.2%, 86.1%, 91.8%, 93.5%, 97.6%, 100% { opacity: 1; }
|
||||||
|
2.5%, 6.6%, 8.2%, 10.7%, 14.8%, 18%, 20.5%, 22.1%, 24.6%, 27.9%, 36%, 88.6% { opacity: 0.5; }
|
||||||
|
47%, 77.8%, 82.8%, 83.5%, 85.3%, 86%, 90.2%, 92.7%, 96.8%, 99.2% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-6 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 190px; height: 190px;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(179, 221, 255, 0.4) 0deg 1deg, transparent 1deg 2deg);
|
||||||
|
clip-path: url(#bagel1);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle6Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle6Animation {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
8%, 35% {
|
||||||
|
transform: translate(-50%, -50%) scale(0.93);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40%, 90% {
|
||||||
|
transform: translate(-50%, -50%) scale(0.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
95%, 100% {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-7 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 142px; height: 142px;
|
||||||
|
filter: blur(1px);
|
||||||
|
|
||||||
|
animation: circle6Animation 4s -0.1s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
.circle-7::before {
|
||||||
|
top: 0; left: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(114, 87, 187, 0.6) 0deg 2deg, transparent 2deg 8deg);
|
||||||
|
clip-path: url(#bagel2);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-8 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 120px; height: 120px;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
|
||||||
|
clip-path: url(#bagel3);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle6Animation 4s -0.13s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-9 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 76px; height: 76px;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(236, 247, 255, 0.68) 0deg 1deg, transparent 1deg 2deg);
|
||||||
|
clip-path: url(#bagel4);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle6Animation 4s -0.16s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-10 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 190px; height: 190px;
|
||||||
|
background: radial-gradient(rgba(230, 245, 255, 0.6), rgba(201, 243, 255, 0.5), rgba(74, 105, 160, 0.3), transparent 70%);
|
||||||
|
clip-path: url(#bagel1);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle10Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle10Animation {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
4%, 30% {
|
||||||
|
transform: translate(-50%, -50%) scale(0.93);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
35%, 93% {
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
98%, 100% {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-11 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 190px; height: 190px;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(229, 243, 255, 0.1) 0deg 1deg, transparent 1deg 8deg, rgba(229, 243, 255, 0.3) 8deg 9deg, transparent 9deg 10deg, rgba(229, 243, 255, 0.1) 10deg 11deg, transparent 11deg 72deg);
|
||||||
|
clip-path: url(#bagel1);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle11Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle11Animation {
|
||||||
|
0%, 98%, 100% {
|
||||||
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(-50%, -50%) rotate(-10deg);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
transform: translate(-50%, -50%) rotate(-20deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
93% {
|
||||||
|
transform: translate(-50%, -50%) rotate(80deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-12 {
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
width: 190px; height: 190px;
|
||||||
|
background: repeating-conic-gradient(from 0deg, rgba(208, 233, 255, 0.2) 20deg 21deg, transparent 21deg 40deg, rgba(192, 223, 249, 0.25) 40deg 41deg, transparent 41deg 43deg, rgba(179, 220, 255, 0.15) 43deg 44deg, transparent 44deg 76deg);
|
||||||
|
clip-path: url(#bagel1);
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
animation: circle12Animation 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes circle12Animation {
|
||||||
|
0%, 96%, 100% {
|
||||||
|
transform: translate(-50%, -50%) rotate(0deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translate(-50%, -50%) rotate(-45deg);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
35% {
|
||||||
|
transform: translate(-50%, -50%) rotate(50deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
93% {
|
||||||
|
transform: translate(-50%, -50%) rotate(-90deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.circle-13 {
|
||||||
|
width: 100px; height: 100px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: circle13AnimationSize 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
circle13AnimationView 4s ease infinite;
|
||||||
|
}
|
||||||
|
.circle-13::before {
|
||||||
|
width: 110px; height: 110px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgb(251, 251, 251);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.circle-13::after {
|
||||||
|
width: 120px; height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(251, 251, 251, 0.5);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
@keyframes circle13AnimationSize {
|
||||||
|
0%, 32%, 86%, 100% { transform: translate(-50%, -50%) scale(1); }
|
||||||
|
38%, 82% { transform: translate(-50%, -50%) scale(0.2); }
|
||||||
|
}
|
||||||
|
@keyframes circle13AnimationView {
|
||||||
|
/* подвигать */
|
||||||
|
0% { opacity: 1; }
|
||||||
|
2.5% { opacity: 0.5; }
|
||||||
|
5.7% { opacity: 1; }
|
||||||
|
6.6% { opacity: 0.5; }
|
||||||
|
7.4% { opacity: 1; }
|
||||||
|
8.2% { opacity: 0.5; }
|
||||||
|
9.8% { opacity: 1; }
|
||||||
|
10.7% { opacity: 0.5; }
|
||||||
|
11.5%, 14% { opacity: 1; }
|
||||||
|
14.8% { opacity: 0.5; }
|
||||||
|
15.6% { opacity: 1; }
|
||||||
|
18% { opacity: 0.5; }
|
||||||
|
18.9% { opacity: 1; }
|
||||||
|
20.5% { opacity: 0.5; }
|
||||||
|
21.3% { opacity: 1; }
|
||||||
|
22.1% { opacity: 0.5; }
|
||||||
|
23.8% { opacity: 1; }
|
||||||
|
24.6% { opacity: 0.5; }
|
||||||
|
25.4% { opacity: 1; }
|
||||||
|
27.9% { opacity: 0.5; }
|
||||||
|
28.7%, 32% { opacity: 1; }
|
||||||
|
38% { opacity: 0; }
|
||||||
|
82% { opacity: 0; }
|
||||||
|
86% { opacity: 1; }
|
||||||
|
88.6% { opacity: 0.5; }
|
||||||
|
90.2% { opacity: 0; }
|
||||||
|
91.8% { opacity: 1; }
|
||||||
|
92.7% { opacity: 0; }
|
||||||
|
93.5% { opacity: 1; }
|
||||||
|
96.8% { opacity: 0; }
|
||||||
|
97.6% { opacity: 1; }
|
||||||
|
99.2% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-14 {
|
||||||
|
width: 100px; height: 100px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: circle13AnimationSize 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
circle14AnimationView 4s ease infinite;
|
||||||
|
}
|
||||||
|
.circle-14::before {
|
||||||
|
width: 70px; height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(251, 251, 251, 0.5);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.circle-14::after {
|
||||||
|
width: 95px; height: 95px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid rgba(251, 251, 251, 0.3);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circle14AnimationView {
|
||||||
|
/* подвигать */
|
||||||
|
0% { opacity: 1; }
|
||||||
|
2.5% { opacity: 0.5; }
|
||||||
|
5.7% { opacity: 1; }
|
||||||
|
6.6% { opacity: 0.5; }
|
||||||
|
7.4% { opacity: 1; }
|
||||||
|
8.2% { opacity: 0.5; }
|
||||||
|
9.8% { opacity: 1; }
|
||||||
|
10.7% { opacity: 0.5; }
|
||||||
|
11.5%, 14% { opacity: 1; }
|
||||||
|
14.8% { opacity: 0.5; }
|
||||||
|
15.6% { opacity: 1; }
|
||||||
|
18% { opacity: 0.5; }
|
||||||
|
18.9% { opacity: 1; }
|
||||||
|
20.5% { opacity: 0.5; }
|
||||||
|
21.3% { opacity: 1; }
|
||||||
|
22.1% { opacity: 0.5; }
|
||||||
|
23.8% { opacity: 1; }
|
||||||
|
24.6% { opacity: 0.5; }
|
||||||
|
25.4% { opacity: 1; }
|
||||||
|
27.9% { opacity: 0.5; }
|
||||||
|
28.7%, 32% { opacity: 1; }
|
||||||
|
38% { opacity: 0; }
|
||||||
|
82% { opacity: 0; }
|
||||||
|
86% { opacity: 1; }
|
||||||
|
88.6% { opacity: 0.5; }
|
||||||
|
90.2% { opacity: 0; }
|
||||||
|
91.8% { opacity: 1; }
|
||||||
|
92.7% { opacity: 0; }
|
||||||
|
93.5% { opacity: 1; }
|
||||||
|
96.8% { opacity: 0; }
|
||||||
|
97.6% { opacity: 1; }
|
||||||
|
99.2% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.glitch {
|
||||||
|
width: 2px; height: 2px;
|
||||||
|
box-shadow: -21px -75px #8AC7ED, -16px -78px #8AC7ED, -8px -78px #8AC7ED, -5px -77px #8AC7ED, -2px -79px #8AC7ED, 10px -79px #8AC7ED, 25px -73px #8AC7ED, 41px -71px #8AC7ED, 44px -68px #8AC7ED, -26px -72px #8AC7ED, -45px -62px #8AC7ED, -65px -57px #8AC7ED, 59px -49px #8AC7ED, 67px -52px #8AC7ED, 37px -69px #8AC7ED, 43px -62px #8AC7ED, 39px -62px #8AC7ED, 17px -71px #8AC7ED, 28px -67px #8AC7ED, 65px -32px #8AC7ED, 73px -24px #8AC7ED, 67px -25px #8AC7ED, 76px -14px #8AC7ED, 70px -18px #8AC7ED, 82px 21px #8AC7ED, 79px 20px #8AC7ED, 72px 15px #8AC7ED, 55px 45px #8AC7ED, 48px 51px #8AC7ED, 43px 58px #8AC7ED, 37px 57px #8AC7ED, 36px 63px #8AC7ED, 32px 76px #8AC7ED, 35px 70px #8AC7ED, 25px 71px #8AC7ED, 20px 75px #8AC7ED, 5px 70px #8AC7ED, 7px 75px #8AC7ED, -5px 79px #8AC7ED, 3px 78px #8AC7ED, -1px 77px #8AC7ED, -13px 78px #8AC7ED, -15px 82px #8AC7ED, -20px 76px #8AC7ED, -18px 78px #8AC7ED, -17px 75px #8AC7ED, -22px 72px #8AC7ED, -34px 72px #8AC7ED, -36px 69px #8AC7ED, -43px 74px #8AC7ED, -41px 72px #8AC7ED, -42px 69px #8AC7ED, -38px 66px #8AC7ED, -43px 63px #8AC7ED, -37px 61px #8AC7ED, -56px 66px #8AC7ED, -54px 61px #8AC7ED, -58px 54px #8AC7ED, -60px 41px #8AC7ED, -50px 56px #8AC7ED, -54px 57px #8AC7ED, -60px 52px #8AC7ED, -74px 35px #8AC7ED, -76px 18px #8AC7ED, -74px 25px #8AC7ED, -69px 23px #8AC7ED, -84px 13px #8AC7ED, -73px 3px #8AC7ED, -80px -1px #8AC7ED, -79px -4px #8AC7ED, -79px -7px #8AC7ED, -70px -11px #8AC7ED, -67px -23px #8AC7ED, -84px -13px #8AC7ED, -71px -42px #8AC7ED, -61px -49px #8AC7ED, -58px -43px #8AC7ED, -55px -50px #8AC7ED, -32px -72px #8AC7ED, -80px -30px #8AC7ED, -59px -20px #8AC7ED, -79px 12px #8AC7ED, -76px 1px #8AC7ED, 8px 57px #8AC7ED, 59px 36px #8AC7ED, 60px 46px #8AC7ED, 54px 59px #8AC7ED, 44px 52px #8AC7ED, -31px 20px #8AC7ED, -56px 2px #8AC7ED, 47px 35px #8AC7ED, 70px 6px #8AC7ED, 60px -2px #8AC7ED,
|
||||||
|
-21px -75px 0 1px rgba(255, 255, 255, 0.1), -16px -78px 0 1px rgba(255, 255, 255, 0.1), -8px -78px 0 1px rgba(255, 255, 255, 0.1), -5px -77px 0 1px rgba(255, 255, 255, 0.1), -2px -79px 0 1px rgba(255, 255, 255, 0.1), 10px -79px 0 1px rgba(255, 255, 255, 0.1), 25px -73px 0 1px rgba(255, 255, 255, 0.1), 41px -71px 0 1px rgba(255, 255, 255, 0.1), 44px -68px 0 1px rgba(255, 255, 255, 0.1), -26px -72px 0 1px rgba(255, 255, 255, 0.1), -45px -62px 0 1px rgba(255, 255, 255, 0.1), -65px -57px 0 1px rgba(255, 255, 255, 0.1), 59px -49px 0 1px rgba(255, 255, 255, 0.1), 67px -52px 0 1px rgba(255, 255, 255, 0.1), 37px -69px 0 1px rgba(255, 255, 255, 0.1), 43px -62px 0 1px rgba(255, 255, 255, 0.1), 39px -62px 0 1px rgba(255, 255, 255, 0.1), 17px -71px 0 1px rgba(255, 255, 255, 0.1), 28px -67px 0 1px rgba(255, 255, 255, 0.1), 65px -32px 0 1px rgba(255, 255, 255, 0.1), 73px -24px 0 1px rgba(255, 255, 255, 0.1), 67px -25px 0 1px rgba(255, 255, 255, 0.1), 76px -14px 0 1px rgba(255, 255, 255, 0.1), 70px -18px 0 1px rgba(255, 255, 255, 0.1), 82px 21px 0 1px rgba(255, 255, 255, 0.1), 79px 20px 0 1px rgba(255, 255, 255, 0.1), 72px 15px 0 1px rgba(255, 255, 255, 0.1), 55px 45px 0 1px rgba(255, 255, 255, 0.1), 48px 51px 0 1px rgba(255, 255, 255, 0.1), 43px 58px 0 1px rgba(255, 255, 255, 0.1), 37px 57px 0 1px rgba(255, 255, 255, 0.1), 36px 63px 0 1px rgba(255, 255, 255, 0.1), 32px 76px 0 1px rgba(255, 255, 255, 0.1), 35px 70px 0 1px rgba(255, 255, 255, 0.1), 25px 71px 0 1px rgba(255, 255, 255, 0.1), 20px 75px 0 1px rgba(255, 255, 255, 0.1), 5px 70px 0 1px rgba(255, 255, 255, 0.1), 7px 75px 0 1px rgba(255, 255, 255, 0.1), -5px 79px 0 1px rgba(255, 255, 255, 0.1), 3px 78px 0 1px rgba(255, 255, 255, 0.1), -1px 77px 0 1px rgba(255, 255, 255, 0.1), -13px 78px 0 1px rgba(255, 255, 255, 0.1), -15px 82px 0 1px rgba(255, 255, 255, 0.1), -20px 76px 0 1px rgba(255, 255, 255, 0.1), -18px 78px 0 1px rgba(255, 255, 255, 0.1), -17px 75px 0 1px rgba(255, 255, 255, 0.1), -22px 72px 0 1px rgba(255, 255, 255, 0.1), -34px 72px 0 1px rgba(255, 255, 255, 0.1), -36px 69px 0 1px rgba(255, 255, 255, 0.1), -43px 74px 0 1px rgba(255, 255, 255, 0.1), -41px 72px 0 1px rgba(255, 255, 255, 0.1), -42px 69px 0 1px rgba(255, 255, 255, 0.1), -38px 66px 0 1px rgba(255, 255, 255, 0.1), -43px 63px 0 1px rgba(255, 255, 255, 0.1), -37px 61px 0 1px rgba(255, 255, 255, 0.1), -56px 66px 0 1px rgba(255, 255, 255, 0.1), -54px 61px 0 1px rgba(255, 255, 255, 0.1), -58px 54px 0 1px rgba(255, 255, 255, 0.1), -60px 41px 0 1px rgba(255, 255, 255, 0.1), -50px 56px 0 1px rgba(255, 255, 255, 0.1), -54px 57px 0 1px rgba(255, 255, 255, 0.1), -60px 52px 0 1px rgba(255, 255, 255, 0.1), -74px 35px 0 1px rgba(255, 255, 255, 0.1), -76px 18px 0 1px rgba(255, 255, 255, 0.1), -74px 25px 0 1px rgba(255, 255, 255, 0.1), -69px 23px 0 1px rgba(255, 255, 255, 0.1), -84px 13px 0 1px rgba(255, 255, 255, 0.1), -73px 3px 0 1px rgba(255, 255, 255, 0.1), -80px -1px 0 1px rgba(255, 255, 255, 0.1), -79px -4px 0 1px rgba(255, 255, 255, 0.1), -79px -7px 0 1px rgba(255, 255, 255, 0.1), -70px -11px 0 1px rgba(255, 255, 255, 0.1), -67px -23px 0 1px rgba(255, 255, 255, 0.1), -84px -13px 0 1px rgba(255, 255, 255, 0.1), -71px -42px 0 1px rgba(255, 255, 255, 0.1), -61px -49px 0 1px rgba(255, 255, 255, 0.1), -58px -43px 0 1px rgba(255, 255, 255, 0.1), -55px -50px 0 1px rgba(255, 255, 255, 0.1), -32px -72px 0 1px rgba(255, 255, 255, 0.1), -80px -30px 0 1px rgba(255, 255, 255, 0.1), -59px -20px 0 1px rgba(255, 255, 255, 0.1), -79px 12px 0 1px rgba(255, 255, 255, 0.1), -76px 1px 0 1px rgba(255, 255, 255, 0.1), 8px 57px 0 1px rgba(255, 255, 255, 0.1), 59px 36px 0 1px rgba(255, 255, 255, 0.1), 60px 46px 0 1px rgba(255, 255, 255, 0.1), 54px 59px 0 1px rgba(255, 255, 255, 0.1), 44px 52px 0 1px rgba(255, 255, 255, 0.1), -31px 20px 0 1px rgba(255, 255, 255, 0.1), -56px 2px 0 1px rgba(255, 255, 255, 0.1), 47px 35px 0 1px rgba(255, 255, 255, 0.1), 70px 6px 0 1px rgba(255, 255, 255, 0.1), 60px -2px 0 1px rgba(255, 255, 255, 0.1);
|
||||||
|
filter: blur(1px);
|
||||||
|
|
||||||
|
animation: glitchAnimationOpacity 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
glitchAnimationMove 4s cubic-bezier(1, 0, 1, 1) infinite,
|
||||||
|
glitchAnimationBright 4s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes glitchAnimationOpacity {
|
||||||
|
0%, 30%, 96%, 100% { opacity: 1; }
|
||||||
|
35%, 93% { opacity: 0; }
|
||||||
|
}
|
||||||
|
@keyframes glitchAnimationMove {
|
||||||
|
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||||
|
35%, 65% { transform: translate(-50%, -50%) rotate(4320deg); }
|
||||||
|
}
|
||||||
|
@keyframes glitchAnimationBright {
|
||||||
|
0%, 100% { filter: blur(1px); }
|
||||||
|
35%, 65% { filter: blur(1px) brightness(1.8); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-1::before {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment1BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment1BeforeAnimationMove {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg) translate(71px, -181px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
37% {
|
||||||
|
transform: rotate(15deg) translate(71px, -181px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
37.1%, 76.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
77% {
|
||||||
|
transform: rotate(-2deg) translate(71px, -181px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: rotate(-9deg) translate(71px, -181px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-1::after {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment1AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment1AfterAnimationMove {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg) translate(285px, 48px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
7% {
|
||||||
|
transform: rotate(5deg) translate(285px, 48px);
|
||||||
|
}
|
||||||
|
22% {
|
||||||
|
transform: rotate(-1deg) translate(285px, 48px);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: rotate(-3deg) translate(285px, 48px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
40.1%, 81.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
82% {
|
||||||
|
transform: rotate(-15deg) translate(285px, 48px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-2::after {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment2AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment2AfterAnimationMove {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg) translate(-220px, 162px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
46% {
|
||||||
|
transform: rotate(-8deg) translate(-220px, 162px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
46.1%, 97.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
98% {
|
||||||
|
transform: rotate(2deg) translate(-220px, 162px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-2::before {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment2BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment2BeforeAnimationMove {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
2% {
|
||||||
|
transform: rotate(2deg) translate(284px, 111px);
|
||||||
|
}
|
||||||
|
9% {
|
||||||
|
transform: rotate(-5deg) translate(284px, 111px);
|
||||||
|
}
|
||||||
|
15%, 22% {
|
||||||
|
transform: rotate(-3deg) translate(284px, 111px);
|
||||||
|
}
|
||||||
|
27% {
|
||||||
|
transform: rotate(-2deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
38.9% {
|
||||||
|
transform: rotate(-9deg) translate(284px, 111px);
|
||||||
|
}
|
||||||
|
39%, 76.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
77% {
|
||||||
|
transform: rotate(-9deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-3::after {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment3AfterAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment3AfterAnimationMove {
|
||||||
|
0%, 4.9%, 65.1%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: rotate(0deg) translate(183px, 198px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
16% {
|
||||||
|
transform: rotate(-9deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
16.1%, 60.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
61% {
|
||||||
|
transform: rotate(5deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
65% {
|
||||||
|
transform: rotate(10deg) translate(284px, 111px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fragment-3::before {
|
||||||
|
width: 6px; height: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
animation: fragment3BeforeAnimationMove 4s -0.15s cubic-bezier(1, 0, 1, 1) infinite;
|
||||||
|
}
|
||||||
|
@keyframes fragment3BeforeAnimationMove {
|
||||||
|
0%, 100% {
|
||||||
|
transform: rotate(0deg) translate(-253px, -126px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
22% {
|
||||||
|
transform: rotate(25deg) translate(-253px, -126px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
22.1%, 95.9% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
96% {
|
||||||
|
transform: rotate(-5deg) translate(-253px, -126px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
css-effects/text-image-mosaic/README.md
Normal file
3
css-effects/text-image-mosaic/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Text Image Mosaic
|
||||||
|
|
||||||
|
Uses mix-blend mode and CSS filters to produce the impression that an image is made of words.
|
||||||
18
css-effects/text-image-mosaic/index.html
Normal file
18
css-effects/text-image-mosaic/index.html
Normal file
File diff suppressed because one or more lines are too long
39
css-effects/text-image-mosaic/style.css
Normal file
39
css-effects/text-image-mosaic/style.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'inconsolata';
|
||||||
|
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Simplifica.woff") format("woff");
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: inconsolata;
|
||||||
|
margin: 0;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
-webkit-filter: contrast(60%);
|
||||||
|
filter: contrast(60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1;
|
||||||
|
text-align: justify;
|
||||||
|
padding: .18vw;
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 1.76vw;
|
||||||
|
color: #fff;
|
||||||
|
background: #000;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
4
error-pages/404-pages/80s-hacker-theme-404/README.md
Normal file
4
error-pages/404-pages/80s-hacker-theme-404/README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Error 404: Page not found – 80s hacker theme
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
22
error-pages/404-pages/80s-hacker-theme-404/index.html
Normal file
22
error-pages/404-pages/80s-hacker-theme-404/index.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Error 404: Page not found</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="noise"></div>
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<div class="terminal">
|
||||||
|
<h1>Error <span class="errorcode">404</span></h1>
|
||||||
|
<p class="output">The page you are looking for might have been removed, had its name changed or is temporarily unavailable.</p>
|
||||||
|
<p class="output">Please try to <a href="#1">go back</a> or <a href="#2">return to the homepage</a>.</p>
|
||||||
|
<p class="output">Good luck.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
122
error-pages/404-pages/80s-hacker-theme-404/style.css
Normal file
122
error-pages/404-pages/80s-hacker-theme-404/style.css
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
@import "https://fonts.googleapis.com/css?family=Inconsolata";
|
||||||
|
html {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000000;
|
||||||
|
background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: 'Inconsolata', Helvetica, sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: rgba(128, 255, 128, 0.8);
|
||||||
|
text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.noise {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: .02;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
background-size: auto 4px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay::before {
|
||||||
|
content: "";
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(2%, rgba(32, 128, 32, 0.2)), color-stop(3%, rgba(32, 128, 32, 0.8)), color-stop(3%, rgba(32, 128, 32, 0.2)), to(transparent));
|
||||||
|
background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
-webkit-animation: scan 7.5s linear 0s infinite;
|
||||||
|
animation: scan 7.5s linear 0s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes scan {
|
||||||
|
0% {
|
||||||
|
background-position: 0 -100vh;
|
||||||
|
}
|
||||||
|
35%, 100% {
|
||||||
|
background-position: 0 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scan {
|
||||||
|
0% {
|
||||||
|
background-position: 0 -100vh;
|
||||||
|
}
|
||||||
|
35%, 100% {
|
||||||
|
background-position: 0 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.terminal {
|
||||||
|
box-sizing: inherit;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 1000px;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 4rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.output {
|
||||||
|
color: rgba(128, 255, 128, 0.8);
|
||||||
|
text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.output::before {
|
||||||
|
content: "> ";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
.input {
|
||||||
|
color: rgba(192, 255, 192, 0.8);
|
||||||
|
text-shadow:
|
||||||
|
0 0 1px rgba(51, 255, 51, 0.4),
|
||||||
|
0 0 2px rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::before {
|
||||||
|
content: "$ ";
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a::before {
|
||||||
|
content: "[";
|
||||||
|
}
|
||||||
|
|
||||||
|
a::after {
|
||||||
|
content: "]";
|
||||||
|
}
|
||||||
|
|
||||||
|
.errorcode {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
5
forms-and-login-pages/login-form-minimal/README.md
Normal file
5
forms-and-login-pages/login-form-minimal/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Login Form Minimal
|
||||||
|
|
||||||
|
Nice and Simple login form
|
||||||
|
|
||||||
|
|
||||||
23
forms-and-login-pages/login-form-minimal/index.html
Normal file
23
forms-and-login-pages/login-form-minimal/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Login Form simple</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="login">
|
||||||
|
<h1>Login</h1>
|
||||||
|
<form method="post">
|
||||||
|
<input type="text" name="u" placeholder="Username" required="required" />
|
||||||
|
<input type="password" name="p" placeholder="Password" required="required" />
|
||||||
|
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
forms-and-login-pages/login-form-minimal/style.css
Normal file
57
forms-and-login-pages/login-form-minimal/style.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
|
||||||
|
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
|
||||||
|
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
|
||||||
|
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||||
|
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
|
||||||
|
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
|
||||||
|
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
|
||||||
|
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
|
||||||
|
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
|
||||||
|
.btn-block { width: 100%; display:block; }
|
||||||
|
|
||||||
|
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
|
||||||
|
|
||||||
|
html { width: 100%; height:100%; overflow:hidden; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height:100%;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
background: #092756;
|
||||||
|
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
|
||||||
|
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||||
|
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||||
|
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||||
|
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
|
||||||
|
}
|
||||||
|
.login {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -150px 0 0 -150px;
|
||||||
|
width:300px;
|
||||||
|
height:300px;
|
||||||
|
}
|
||||||
|
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
|
||||||
|
border: 1px solid rgba(0,0,0,0.3);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
|
||||||
|
-webkit-transition: box-shadow .5s ease;
|
||||||
|
-moz-transition: box-shadow .5s ease;
|
||||||
|
-o-transition: box-shadow .5s ease;
|
||||||
|
-ms-transition: box-shadow .5s ease;
|
||||||
|
transition: box-shadow .5s ease;
|
||||||
|
}
|
||||||
|
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
|
||||||
@ -1,2 +1,3 @@
|
|||||||
# Login Form
|
# Modern Login Form with floating placeholder and light button
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -2,35 +2,32 @@
|
|||||||
<html lang="en" >
|
<html lang="en" >
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Login Form</title>
|
<title>Modern Login Form</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
<link rel="stylesheet" href="./style.css">
|
||||||
<link rel="stylesheet" href="./style.css">
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<form class='login-form'>
|
<div class="login-box">
|
||||||
<div class="flex-row">
|
<h2>Login</h2>
|
||||||
<label class="lf--label" for="username">
|
<form>
|
||||||
<svg x="0px" y="0px" width="12px" height="13px">
|
<div class="user-box">
|
||||||
<path fill="#B1B7C4" d="M8.9,7.2C9,6.9,9,6.7,9,6.5v-4C9,1.1,7.9,0,6.5,0h-1C4.1,0,3,1.1,3,2.5v4c0,0.2,0,0.4,0.1,0.7 C1.3,7.8,0,9.5,0,11.5V13h12v-1.5C12,9.5,10.7,7.8,8.9,7.2z M4,2.5C4,1.7,4.7,1,5.5,1h1C7.3,1,8,1.7,8,2.5v4c0,0.2,0,0.4-0.1,0.6 l0.1,0L7.9,7.3C7.6,7.8,7.1,8.2,6.5,8.2h-1c-0.6,0-1.1-0.4-1.4-0.9L4.1,7.1l0.1,0C4,6.9,4,6.7,4,6.5V2.5z M11,12H1v-0.5 c0-1.6,1-2.9,2.4-3.4c0.5,0.7,1.2,1.1,2.1,1.1h1c0.8,0,1.6-0.4,2.1-1.1C10,8.5,11,9.9,11,11.5V12z"/>
|
<input type="text" name="" required="">
|
||||||
</svg>
|
<label>Username</label>
|
||||||
</label>
|
</div>
|
||||||
<input id="username" class='lf--input' placeholder='Username' type='text'>
|
<div class="user-box">
|
||||||
</div>
|
<input type="password" name="" required="">
|
||||||
<div class="flex-row">
|
<label>Password</label>
|
||||||
<label class="lf--label" for="password">
|
</div>
|
||||||
<svg x="0px" y="0px" width="15px" height="5px">
|
<a href="#">
|
||||||
<g>
|
<span></span>
|
||||||
<path fill="#B1B7C4" d="M6,2L6,2c0-1.1-1-2-2.1-2H2.1C1,0,0,0.9,0,2.1v0.8C0,4.1,1,5,2.1,5h1.7C5,5,6,4.1,6,2.9V3h5v1h1V3h1v2h1V3h1 V2H6z M5.1,2.9c0,0.7-0.6,1.2-1.3,1.2H2.1c-0.7,0-1.3-0.6-1.3-1.2V2.1c0-0.7,0.6-1.2,1.3-1.2h1.7c0.7,0,1.3,0.6,1.3,1.2V2.9z"/>
|
<span></span>
|
||||||
</g>
|
<span></span>
|
||||||
</svg>
|
<span></span>
|
||||||
</label>
|
Submit
|
||||||
<input id="password" class='lf--input' placeholder='Password' type='password'>
|
</a>
|
||||||
</div>
|
</form>
|
||||||
<input class='lf--submit' type='submit' value='LOGIN'>
|
</div>
|
||||||
</form>
|
|
||||||
<a class='lf--forgot' href='#'>Forgot password?</a>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,126 +1,167 @@
|
|||||||
* {
|
html {
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
margin:0;
|
||||||
align-items: center;
|
padding:0;
|
||||||
justify-content: center;
|
font-family: sans-serif;
|
||||||
flex-direction: column;
|
background: linear-gradient(#141e30, #243b55);
|
||||||
position: relative;
|
|
||||||
background: linear-gradient(135deg, rgba(36, 46, 77, 0.9), rgba(137, 126, 121, 0.9));
|
|
||||||
font-family: 'Roboto', helvetica, arial, sans-serif;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
body:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
|
|
||||||
opacity: .3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-box {
|
||||||
width: 100%;
|
|
||||||
padding: 2em;
|
|
||||||
position: relative;
|
|
||||||
background: rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
.login-form:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2px;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
height: 2px;
|
width: 400px;
|
||||||
width: 100%;
|
padding: 40px;
|
||||||
background: linear-gradient(to right, #35c3c1, #00d6b7);
|
transform: translate(-50%, -50%);
|
||||||
|
background: rgba(0,0,0,.5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 15px 25px rgba(0,0,0,.6);
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
.login-form {
|
.login-box h2 {
|
||||||
width: 50vw;
|
margin: 0 0 30px;
|
||||||
max-width: 15em;
|
padding: 0;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box .user-box {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box .user-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.login-box .user-box label {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box .user-box input:focus ~ label,
|
||||||
|
.login-box .user-box input:valid ~ label {
|
||||||
|
top: -20px;
|
||||||
|
left: 0;
|
||||||
|
color: #03e9f4;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box form a {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: #03e9f4;
|
||||||
|
font-size: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: .5s;
|
||||||
|
margin-top: 40px;
|
||||||
|
letter-spacing: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box a:hover {
|
||||||
|
background: #03e9f4;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 5px #03e9f4,
|
||||||
|
0 0 25px #03e9f4,
|
||||||
|
0 0 50px #03e9f4,
|
||||||
|
0 0 100px #03e9f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box a span {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box a span:nth-child(1) {
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, transparent, #03e9f4);
|
||||||
|
animation: btn-anim1 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes btn-anim1 {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50%,100% {
|
||||||
|
left: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row {
|
.login-box a span:nth-child(2) {
|
||||||
display: flex;
|
top: -100%;
|
||||||
margin-bottom: 1em;
|
right: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, transparent, #03e9f4);
|
||||||
|
animation: btn-anim2 1s linear infinite;
|
||||||
|
animation-delay: .25s
|
||||||
}
|
}
|
||||||
|
|
||||||
.lf--label {
|
@keyframes btn-anim2 {
|
||||||
width: 2em;
|
0% {
|
||||||
display: flex;
|
top: -100%;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
50%,100% {
|
||||||
background: #f5f6f8;
|
top: 100%;
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lf--input {
|
.login-box a span:nth-child(3) {
|
||||||
flex: 1;
|
bottom: 0;
|
||||||
padding: 1em;
|
right: -100%;
|
||||||
border: 0;
|
|
||||||
color: #8f8f8f;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.lf--input:focus {
|
|
||||||
outline: none;
|
|
||||||
transition: -webkit-transform .15s ease;
|
|
||||||
transition: transform .15s ease;
|
|
||||||
transition: transform .15s ease, -webkit-transform .15s ease;
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lf--submit {
|
|
||||||
display: block;
|
|
||||||
padding: 1em;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: linear-gradient(to right, #35c3c1, #00d6b7);
|
height: 2px;
|
||||||
border: 0;
|
background: linear-gradient(270deg, transparent, #03e9f4);
|
||||||
color: #fff;
|
animation: btn-anim3 1s linear infinite;
|
||||||
cursor: pointer;
|
animation-delay: .5s
|
||||||
font-size: .75em;
|
|
||||||
font-weight: 600;
|
|
||||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.lf--submit:focus {
|
|
||||||
outline: none;
|
|
||||||
transition: -webkit-transform .15s ease;
|
|
||||||
transition: transform .15s ease;
|
|
||||||
transition: transform .15s ease, -webkit-transform .15s ease;
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lf--forgot {
|
@keyframes btn-anim3 {
|
||||||
margin-top: 1em;
|
0% {
|
||||||
color: #00d6b7;
|
right: -100%;
|
||||||
font-size: .65em;
|
}
|
||||||
text-align: center;
|
50%,100% {
|
||||||
position: relative;
|
right: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
.login-box a span:nth-child(4) {
|
||||||
color: #8f8f8f;
|
bottom: -100%;
|
||||||
|
left: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(360deg, transparent, #03e9f4);
|
||||||
|
animation: btn-anim4 1s linear infinite;
|
||||||
|
animation-delay: .75s
|
||||||
}
|
}
|
||||||
|
|
||||||
:-ms-input-placeholder {
|
@keyframes btn-anim4 {
|
||||||
color: #8f8f8f;
|
0% {
|
||||||
}
|
bottom: -100%;
|
||||||
|
}
|
||||||
::-ms-input-placeholder {
|
50%,100% {
|
||||||
color: #8f8f8f;
|
bottom: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
|
||||||
color: #8f8f8f;
|
|
||||||
}
|
}
|
||||||
@ -1,5 +1,2 @@
|
|||||||
# Login Form simple
|
# Login Form
|
||||||
|
|
||||||
Nice and Simple login form
|
|
||||||
|
|
||||||
|
|
||||||
@ -2,22 +2,35 @@
|
|||||||
<html lang="en" >
|
<html lang="en" >
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Login Form simple</title>
|
<title>Login Form</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||||
<link rel="stylesheet" href="./style.css">
|
<link rel="stylesheet" href="./style.css">
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="login">
|
<form class='login-form'>
|
||||||
<h1>Login</h1>
|
<div class="flex-row">
|
||||||
<form method="post">
|
<label class="lf--label" for="username">
|
||||||
<input type="text" name="u" placeholder="Username" required="required" />
|
<svg x="0px" y="0px" width="12px" height="13px">
|
||||||
<input type="password" name="p" placeholder="Password" required="required" />
|
<path fill="#B1B7C4" d="M8.9,7.2C9,6.9,9,6.7,9,6.5v-4C9,1.1,7.9,0,6.5,0h-1C4.1,0,3,1.1,3,2.5v4c0,0.2,0,0.4,0.1,0.7 C1.3,7.8,0,9.5,0,11.5V13h12v-1.5C12,9.5,10.7,7.8,8.9,7.2z M4,2.5C4,1.7,4.7,1,5.5,1h1C7.3,1,8,1.7,8,2.5v4c0,0.2,0,0.4-0.1,0.6 l0.1,0L7.9,7.3C7.6,7.8,7.1,8.2,6.5,8.2h-1c-0.6,0-1.1-0.4-1.4-0.9L4.1,7.1l0.1,0C4,6.9,4,6.7,4,6.5V2.5z M11,12H1v-0.5 c0-1.6,1-2.9,2.4-3.4c0.5,0.7,1.2,1.1,2.1,1.1h1c0.8,0,1.6-0.4,2.1-1.1C10,8.5,11,9.9,11,11.5V12z"/>
|
||||||
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
|
</svg>
|
||||||
</form>
|
</label>
|
||||||
</div>
|
<input id="username" class='lf--input' placeholder='Username' type='text'>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row">
|
||||||
|
<label class="lf--label" for="password">
|
||||||
|
<svg x="0px" y="0px" width="15px" height="5px">
|
||||||
|
<g>
|
||||||
|
<path fill="#B1B7C4" d="M6,2L6,2c0-1.1-1-2-2.1-2H2.1C1,0,0,0.9,0,2.1v0.8C0,4.1,1,5,2.1,5h1.7C5,5,6,4.1,6,2.9V3h5v1h1V3h1v2h1V3h1 V2H6z M5.1,2.9c0,0.7-0.6,1.2-1.3,1.2H2.1c-0.7,0-1.3-0.6-1.3-1.2V2.1c0-0.7,0.6-1.2,1.3-1.2h1.7c0.7,0,1.3,0.6,1.3,1.2V2.9z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
<input id="password" class='lf--input' placeholder='Password' type='password'>
|
||||||
|
</div>
|
||||||
|
<input class='lf--submit' type='submit' value='LOGIN'>
|
||||||
|
</form>
|
||||||
|
<a class='lf--forgot' href='#'>Forgot password?</a>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,57 +1,126 @@
|
|||||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
|
* {
|
||||||
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
|
-webkit-font-smoothing: antialiased;
|
||||||
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
|
text-rendering: optimizeLegibility;
|
||||||
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
|
||||||
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
|
|
||||||
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
|
|
||||||
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
|
|
||||||
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
|
|
||||||
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
|
|
||||||
.btn-block { width: 100%; display:block; }
|
|
||||||
|
|
||||||
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
|
|
||||||
|
|
||||||
html { width: 100%; height:100%; overflow:hidden; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height:100%;
|
|
||||||
font-family: 'Open Sans', sans-serif;
|
|
||||||
background: #092756;
|
|
||||||
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
|
|
||||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
|
||||||
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
|
||||||
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
|
||||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
|
|
||||||
}
|
}
|
||||||
.login {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin: -150px 0 0 -150px;
|
|
||||||
width:300px;
|
|
||||||
height:300px;
|
|
||||||
}
|
|
||||||
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
|
||||||
|
|
||||||
input {
|
html, body {
|
||||||
width: 100%;
|
height: 100%;
|
||||||
margin-bottom: 10px;
|
|
||||||
background: rgba(0,0,0,0.3);
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
|
|
||||||
border: 1px solid rgba(0,0,0,0.3);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
|
|
||||||
-webkit-transition: box-shadow .5s ease;
|
|
||||||
-moz-transition: box-shadow .5s ease;
|
|
||||||
-o-transition: box-shadow .5s ease;
|
|
||||||
-ms-transition: box-shadow .5s ease;
|
|
||||||
transition: box-shadow .5s ease;
|
|
||||||
}
|
}
|
||||||
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, rgba(36, 46, 77, 0.9), rgba(137, 126, 121, 0.9));
|
||||||
|
font-family: 'Roboto', helvetica, arial, sans-serif;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
body:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2em;
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.login-form:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: 0;
|
||||||
|
height: 2px;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to right, #35c3c1, #00d6b7);
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 600px) {
|
||||||
|
.login-form {
|
||||||
|
width: 50vw;
|
||||||
|
max-width: 15em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lf--label {
|
||||||
|
width: 2em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f6f8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lf--input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 1em;
|
||||||
|
border: 0;
|
||||||
|
color: #8f8f8f;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.lf--input:focus {
|
||||||
|
outline: none;
|
||||||
|
transition: -webkit-transform .15s ease;
|
||||||
|
transition: transform .15s ease;
|
||||||
|
transition: transform .15s ease, -webkit-transform .15s ease;
|
||||||
|
-webkit-transform: scale(1.1);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lf--submit {
|
||||||
|
display: block;
|
||||||
|
padding: 1em;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(to right, #35c3c1, #00d6b7);
|
||||||
|
border: 0;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: .75em;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.lf--submit:focus {
|
||||||
|
outline: none;
|
||||||
|
transition: -webkit-transform .15s ease;
|
||||||
|
transition: transform .15s ease;
|
||||||
|
transition: transform .15s ease, -webkit-transform .15s ease;
|
||||||
|
-webkit-transform: scale(1.1);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lf--forgot {
|
||||||
|
margin-top: 1em;
|
||||||
|
color: #00d6b7;
|
||||||
|
font-size: .65em;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: #8f8f8f;
|
||||||
|
}
|
||||||
|
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
color: #8f8f8f;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-input-placeholder {
|
||||||
|
color: #8f8f8f;
|
||||||
|
}
|
||||||
|
|
||||||
|
::placeholder {
|
||||||
|
color: #8f8f8f;
|
||||||
|
}
|
||||||
3
loading-icons/css-animation-ai-loader/README.md
Normal file
3
loading-icons/css-animation-ai-loader/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# [CSS Animation] AI Loader
|
||||||
|
|
||||||
|
Uses `blur` & `contrast` filter to simulate a gooey effect.
|
||||||
22
loading-icons/css-animation-ai-loader/index.html
Normal file
22
loading-icons/css-animation-ai-loader/index.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>[CSS Animation] AI Loader</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.75"><link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="intro">AI Loader<small>design test</small></h1>
|
||||||
|
<div class="box">
|
||||||
|
<div class="loader">
|
||||||
|
<div class="o"></div>
|
||||||
|
<div class="o"></div>
|
||||||
|
<div class="o"></div>
|
||||||
|
<div class="o"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
185
loading-icons/css-animation-ai-loader/style.css
Normal file
185
loading-icons/css-animation-ai-loader/style.css
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
.loader {
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.loader::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - .15em);
|
||||||
|
left: -5vw;
|
||||||
|
height: .3em;
|
||||||
|
width: calc(100% + 10vw);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: currentColor;
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-filter: blur(0.05em) contrast(2);
|
||||||
|
filter: blur(0.05em) contrast(2);
|
||||||
|
box-shadow: 0 0 1em #ccf, 0 0 2em #ccf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.o {
|
||||||
|
position: relative;
|
||||||
|
left: -42px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: currentColor;
|
||||||
|
margin-left: 3em;
|
||||||
|
margin-right: 3em;
|
||||||
|
-webkit-animation: translateX 1s linear infinite;
|
||||||
|
animation: translateX 1s linear infinite;
|
||||||
|
-webkit-filter: blur(0.3em) contrast(5);
|
||||||
|
filter: blur(0.3em) contrast(5);
|
||||||
|
box-shadow: 0 0 0.15em, 0 0 1em 0.25em #9999ff, 0 0 3em 1.5em rgba(153, 153, 255, 0.2), 0 0 5em rgba(153, 153, 255, 0.5);
|
||||||
|
}
|
||||||
|
.o:first-child {
|
||||||
|
-webkit-animation-name: translateX, hide-show;
|
||||||
|
animation-name: translateX, hide-show;
|
||||||
|
-webkit-animation-timing-function: linear, step-end;
|
||||||
|
animation-timing-function: linear, step-end;
|
||||||
|
}
|
||||||
|
.o:last-child {
|
||||||
|
-webkit-transform-origin: -99px 50%;
|
||||||
|
transform-origin: -99px 50%;
|
||||||
|
-webkit-animation-name: helf-rotate;
|
||||||
|
animation-name: helf-rotate;
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(0.25, 0, 0.4, 1.25);
|
||||||
|
animation-timing-function: cubic-bezier(0.25, 0, 0.4, 1.25);
|
||||||
|
}
|
||||||
|
@-webkit-keyframes translateX {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateX(84px);
|
||||||
|
transform: translateX(84px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes translateX {
|
||||||
|
100% {
|
||||||
|
-webkit-transform: translateX(84px);
|
||||||
|
transform: translateX(84px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes helf-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
50.1%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes helf-rotate {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
50.1%, 100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes hide-show {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes hide-show {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.box:hover * {
|
||||||
|
/* -webkit-animation-play-state: paused;
|
||||||
|
animation-play-state: paused; */
|
||||||
|
}
|
||||||
|
.box:active * {
|
||||||
|
-webkit-animation-play-state: running;
|
||||||
|
animation-play-state: running;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 50rem;
|
||||||
|
padding-top: .5em;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin: 0 auto 1em;
|
||||||
|
font-size: calc(1rem + 2vmin);
|
||||||
|
text-transform: capitalize;
|
||||||
|
text-align: center;
|
||||||
|
font-family: serif;
|
||||||
|
}
|
||||||
|
.intro small {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
opacity: .5;
|
||||||
|
font-style: italic;
|
||||||
|
text-transform: none;
|
||||||
|
border-top: 1px dashed rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: .9em;
|
||||||
|
font-style: italic;
|
||||||
|
font-family: serif;
|
||||||
|
text-align: right;
|
||||||
|
opacity: .75;
|
||||||
|
}
|
||||||
|
.info a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
1
templates-and-navigation/home-page-design/README.md
Normal file
1
templates-and-navigation/home-page-design/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Home Page Design
|
||||||
73
templates-and-navigation/home-page-design/index.html
Normal file
73
templates-and-navigation/home-page-design/index.html
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Home Page Design</title>
|
||||||
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'><link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<div class="main-header">
|
||||||
|
<div class="nav-button but-hol">
|
||||||
|
<span class="nos"></span>
|
||||||
|
<span class="ncs"></span>
|
||||||
|
<span class="nbs"></span><div class="menu-button-text">Menu</div></div>
|
||||||
|
|
||||||
|
<div class="header-social">
|
||||||
|
<ul>
|
||||||
|
<li><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li>
|
||||||
|
<li><a target="_blank" href="#"><i class="fab fa-twitter"></i></a></li>
|
||||||
|
<li><a target="_blank" href="#"><i class="fab fa-dribbble"></i></a></li>
|
||||||
|
<li><a target="_blank" href="#"><i class="fab fa-instagram"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="folio-btn">
|
||||||
|
<a class="folio-btn-item ajax" href="#" target="_blank"><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="wrapper">
|
||||||
|
<div class="content-holder">
|
||||||
|
<div class="hero-wrap fl-wrap full-height scroll-con-sec">
|
||||||
|
|
||||||
|
<div class="impulse-wrap">
|
||||||
|
<div class="mm-par-wrap">
|
||||||
|
<div class="mm-parallax" data-tilt data-tilt-max="4" >
|
||||||
|
<div class="overlay"></div>
|
||||||
|
<div class="bg" data-bg="https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" style="background-image: url(https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-wrap-item fl-wrap">
|
||||||
|
<div class="container"><div class="fl-wrap section-entry hiddec-anim" style="opacity: 1; ">
|
||||||
|
<h1 class="BoardName">Welcome to My Page</h1>
|
||||||
|
|
||||||
|
</div></div></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-corner hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
|
||||||
|
|
||||||
|
<div class="hero-corner2 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
|
||||||
|
|
||||||
|
<div class="hero-corner3 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
|
||||||
|
|
||||||
|
<div class="hero-corner4 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js'></script>
|
||||||
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
312
templates-and-navigation/home-page-design/script.js
Normal file
312
templates-and-navigation/home-page-design/script.js
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||||
|
|
||||||
|
(function (factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports) {
|
||||||
|
// Node/CommonJS
|
||||||
|
module.exports = function (root, jQuery) {
|
||||||
|
if (jQuery === undefined) {
|
||||||
|
// require('jQuery') returns a factory that requires window to
|
||||||
|
// build a jQuery instance, we normalize how we use modules
|
||||||
|
// that require this pattern but the window provided is a noop
|
||||||
|
// if it's defined (how jquery works)
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
jQuery = require('jquery');
|
||||||
|
} else {
|
||||||
|
jQuery = require('jquery')(root);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
factory(jQuery);
|
||||||
|
return jQuery;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(jQuery);
|
||||||
|
}
|
||||||
|
})(function ($) {
|
||||||
|
$.fn.tilt = function (options) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RequestAnimationFrame
|
||||||
|
*/
|
||||||
|
var requestTick = function requestTick() {
|
||||||
|
if (this.ticking) return;
|
||||||
|
requestAnimationFrame(updateTransforms.bind(this));
|
||||||
|
this.ticking = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bind mouse movement evens on instance
|
||||||
|
*/
|
||||||
|
var bindEvents = function bindEvents() {
|
||||||
|
var _this = this;
|
||||||
|
$(this).on('mousemove', mouseMove);
|
||||||
|
$(this).on('mouseenter', mouseEnter);
|
||||||
|
if (this.settings.reset) $(this).on('mouseleave', mouseLeave);
|
||||||
|
if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms
|
||||||
|
*/
|
||||||
|
var setTransition = function setTransition() {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
if (this.timeout !== undefined) clearTimeout(this.timeout);
|
||||||
|
$(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing });
|
||||||
|
if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing });
|
||||||
|
this.timeout = setTimeout(function () {
|
||||||
|
$(_this2).css({ 'transition': '' });
|
||||||
|
if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' });
|
||||||
|
}, this.settings.speed);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When user mouse enters tilt element
|
||||||
|
*/
|
||||||
|
var mouseEnter = function mouseEnter(event) {
|
||||||
|
this.ticking = false;
|
||||||
|
$(this).css({ 'will-change': 'transform' });
|
||||||
|
setTransition.call(this);
|
||||||
|
|
||||||
|
// Trigger change event
|
||||||
|
$(this).trigger("tilt.mouseEnter");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return the x,y position of the mouse on the tilt element
|
||||||
|
* @returns {{x: *, y: *}}
|
||||||
|
*/
|
||||||
|
var getMousePositions = function getMousePositions(event) {
|
||||||
|
if (typeof event === "undefined") {
|
||||||
|
event = {
|
||||||
|
pageX: $(this).offset().left + $(this).outerWidth() / 2,
|
||||||
|
pageY: $(this).offset().top + $(this).outerHeight() / 2
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return { x: event.pageX, y: event.pageY };
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When user mouse moves over the tilt element
|
||||||
|
*/
|
||||||
|
var mouseMove = function mouseMove(event) {
|
||||||
|
this.mousePositions = getMousePositions(event);
|
||||||
|
requestTick.call(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When user mouse leaves tilt element
|
||||||
|
*/
|
||||||
|
var mouseLeave = function mouseLeave() {
|
||||||
|
setTransition.call(this);
|
||||||
|
this.reset = true;
|
||||||
|
requestTick.call(this);
|
||||||
|
|
||||||
|
// Trigger change event
|
||||||
|
$(this).trigger("tilt.mouseLeave");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get tilt values
|
||||||
|
*
|
||||||
|
* @returns {{x: tilt value, y: tilt value}}
|
||||||
|
*/
|
||||||
|
var getValues = function getValues() {
|
||||||
|
var width = $(this).outerWidth();
|
||||||
|
var height = $(this).outerHeight();
|
||||||
|
var left = $(this).offset().left;
|
||||||
|
var top = $(this).offset().top;
|
||||||
|
var percentageX = (this.mousePositions.x - left) / width;
|
||||||
|
var percentageY = (this.mousePositions.y - top) / height;
|
||||||
|
// x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value
|
||||||
|
var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2);
|
||||||
|
var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2);
|
||||||
|
// angle
|
||||||
|
var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI);
|
||||||
|
// Return x & y tilt values
|
||||||
|
return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle };
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update tilt transforms on mousemove
|
||||||
|
*/
|
||||||
|
var updateTransforms = function updateTransforms() {
|
||||||
|
this.transforms = getValues.call(this);
|
||||||
|
|
||||||
|
if (this.reset) {
|
||||||
|
this.reset = false;
|
||||||
|
$(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)');
|
||||||
|
|
||||||
|
// Rotate glare if enabled
|
||||||
|
if (this.settings.glare) {
|
||||||
|
this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)');
|
||||||
|
this.glareElement.css('opacity', '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(' + (this.settings.disableAxis === 'x' ? 0 : this.transforms.tiltY) + 'deg) rotateY(' + (this.settings.disableAxis === 'y' ? 0 : this.transforms.tiltX) + 'deg) scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')');
|
||||||
|
|
||||||
|
// Rotate glare if enabled
|
||||||
|
if (this.settings.glare) {
|
||||||
|
this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)');
|
||||||
|
this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger change event
|
||||||
|
$(this).trigger("change", [this.transforms]);
|
||||||
|
|
||||||
|
this.ticking = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepare elements
|
||||||
|
*/
|
||||||
|
var prepareGlare = function prepareGlare() {
|
||||||
|
var glarePrerender = this.settings.glarePrerender;
|
||||||
|
|
||||||
|
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
|
||||||
|
if (!glarePrerender)
|
||||||
|
// Create glare element
|
||||||
|
$(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>');
|
||||||
|
|
||||||
|
// Store glare selector if glare is enabled
|
||||||
|
this.glareElementWrapper = $(this).find(".js-tilt-glare");
|
||||||
|
this.glareElement = $(this).find(".js-tilt-glare-inner");
|
||||||
|
|
||||||
|
// Remember? We assume all css is already set, so just return
|
||||||
|
if (glarePrerender) return;
|
||||||
|
|
||||||
|
// Abstracted re-usable glare styles
|
||||||
|
var stretch = {
|
||||||
|
'position': 'absolute',
|
||||||
|
'top': '0',
|
||||||
|
'left': '0',
|
||||||
|
'width': '100%',
|
||||||
|
'height': '100%'
|
||||||
|
};
|
||||||
|
|
||||||
|
// Style glare wrapper
|
||||||
|
this.glareElementWrapper.css(stretch).css({
|
||||||
|
'overflow': 'hidden',
|
||||||
|
'pointer-events': 'none'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Style glare element
|
||||||
|
this.glareElement.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'top': '50%',
|
||||||
|
'left': '50%',
|
||||||
|
'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
|
||||||
|
'width': '' + $(this).outerWidth() * 2,
|
||||||
|
'height': '' + $(this).outerWidth() * 2,
|
||||||
|
'transform': 'rotate(180deg) translate(-50%, -50%)',
|
||||||
|
'transform-origin': '0% 0%',
|
||||||
|
'opacity': '0'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update glare on resize
|
||||||
|
*/
|
||||||
|
var updateGlareSize = function updateGlareSize() {
|
||||||
|
this.glareElement.css({
|
||||||
|
'width': '' + $(this).outerWidth() * 2,
|
||||||
|
'height': '' + $(this).outerWidth() * 2
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public methods
|
||||||
|
*/
|
||||||
|
$.fn.tilt.destroy = function () {
|
||||||
|
$(this).each(function () {
|
||||||
|
$(this).find('.js-tilt-glare').remove();
|
||||||
|
$(this).css({ 'will-change': '', 'transform': '' });
|
||||||
|
$(this).off('mousemove mouseenter mouseleave');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.tilt.getValues = function () {
|
||||||
|
var results = [];
|
||||||
|
$(this).each(function () {
|
||||||
|
this.mousePositions = getMousePositions.call(this);
|
||||||
|
results.push(getValues.call(this));
|
||||||
|
});
|
||||||
|
return results;
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.tilt.reset = function () {
|
||||||
|
$(this).each(function () {
|
||||||
|
var _this3 = this;
|
||||||
|
|
||||||
|
this.mousePositions = getMousePositions.call(this);
|
||||||
|
this.settings = $(this).data('settings');
|
||||||
|
mouseLeave.call(this);
|
||||||
|
setTimeout(function () {
|
||||||
|
_this3.reset = false;
|
||||||
|
}, this.settings.transition);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loop every instance
|
||||||
|
*/
|
||||||
|
return this.each(function () {
|
||||||
|
var _this4 = this;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Default settings merged with user settings
|
||||||
|
* Can be set trough data attributes or as parameter.
|
||||||
|
* @type {*}
|
||||||
|
*/
|
||||||
|
this.settings = $.extend({
|
||||||
|
maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20,
|
||||||
|
perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300,
|
||||||
|
easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)',
|
||||||
|
scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1',
|
||||||
|
speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400',
|
||||||
|
transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true,
|
||||||
|
disableAxis: $(this).is('[data-tilt-disable-axis]') ? $(this).data('tilt-disable-axis') : null,
|
||||||
|
axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null,
|
||||||
|
reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true,
|
||||||
|
glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false,
|
||||||
|
maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
// Add deprecation warning & set disableAxis to deprecated axis setting
|
||||||
|
if (this.settings.axis !== null) {
|
||||||
|
console.warn('Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information');
|
||||||
|
this.settings.disableAxis = this.settings.axis;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.init = function () {
|
||||||
|
// Store settings
|
||||||
|
$(_this4).data('settings', _this4.settings);
|
||||||
|
|
||||||
|
// Prepare element
|
||||||
|
if (_this4.settings.glare) prepareGlare.call(_this4);
|
||||||
|
|
||||||
|
// Bind events
|
||||||
|
bindEvents.call(_this4);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Init
|
||||||
|
this.init();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auto load
|
||||||
|
*/
|
||||||
|
$('[data-tilt]').tilt();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
//# sourceMappingURL=tilt.jquery.js.map
|
||||||
388
templates-and-navigation/home-page-design/style.css
Normal file
388
templates-and-navigation/home-page-design/style.css
Normal file
@ -0,0 +1,388 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
{
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BoardName
|
||||||
|
{
|
||||||
|
color: white;
|
||||||
|
text-shadow: 1px 2px 3px black;
|
||||||
|
font-size: 35px;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transform: translateZ(80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 80px;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 20;
|
||||||
|
background: #292929;
|
||||||
|
-webkit-transform: translate3d(0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
height: 80px;
|
||||||
|
background: #343434;
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn-item {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn-dot {
|
||||||
|
float: left;
|
||||||
|
width: 33.3%;
|
||||||
|
height: 33.3%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn-dot:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
margin: -2px 0 0 -2px;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: all 300ms linear;
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn-dot:before
|
||||||
|
{
|
||||||
|
background: #F68338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folio-btn:hover .folio-btn-dot:first-child:before, .folio-btn:hover .folio-btn-dot:nth-child(3):before, .folio-btn:hover .folio-btn-dot:nth-child(4):before, .folio-btn:hover .folio-btn-dot:nth-child(8):before {
|
||||||
|
transform: scale(1.8);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/***social***/
|
||||||
|
.header-social {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80px;
|
||||||
|
width: 100%;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20;
|
||||||
|
padding: 20px 0;
|
||||||
|
background: #383838;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-social:before
|
||||||
|
{
|
||||||
|
background: #F68338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-social:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: -3px;
|
||||||
|
width: 36px;
|
||||||
|
margin-left: -18px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-social li {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-social li a {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.41);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
transition: all 300ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-social li a:hover
|
||||||
|
{
|
||||||
|
color: #F68338;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, li
|
||||||
|
{
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
font-family: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
width: 60px;
|
||||||
|
height: 1px;
|
||||||
|
bottom: 120px;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
width: 28px;
|
||||||
|
height: 50px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
top: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button span {
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
height: 2px;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button .ncs {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button .nbs, .nav-button.cmenu:hover .nbs {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
bottom: -1px;
|
||||||
|
color: rgba(255, 255, 255, 0.41);
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button span
|
||||||
|
{
|
||||||
|
background: #F68338;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover span:before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover .ncs, .nav-button:hover .nbs {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button span:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*****end****/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 80px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-holder {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-wrap, .fs-slider-wrap {
|
||||||
|
background: #292929;
|
||||||
|
z-index: 25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-height
|
||||||
|
{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl-wrap {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.impulse-wrap {
|
||||||
|
background: #232323;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
-webkit-perspective: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impulse-wrap:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mm-parallax {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 100px;
|
||||||
|
right: 100px;
|
||||||
|
bottom: 100px;
|
||||||
|
z-index: 20;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.impulse-wrap .bg, .impulse-wrap .overlay {
|
||||||
|
box-shadow: 0 20px 25px 0 rgba(18,17,30,.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: black;
|
||||||
|
opacity: 0.4;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: scroll;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-origin: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.hero-corner {
|
||||||
|
top: 50px;
|
||||||
|
right: 50px;
|
||||||
|
z-index: 21;
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-right: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-corner2 {
|
||||||
|
top: 50px;
|
||||||
|
left: 50px;
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-left: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-corner3 {
|
||||||
|
bottom: 50px;
|
||||||
|
right: 50px;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-right: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-corner4 {
|
||||||
|
bottom: 50px;
|
||||||
|
left: 50px;
|
||||||
|
z-index: 21;
|
||||||
|
border-left: 1px solid;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.hero-corner, .hero-corner2, .hero-corner3, .hero-corner4 {
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
z-index: 21;
|
||||||
|
border-color: rgba(255,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fl-wrap {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
transform: translateZ(80px)
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-wrap-item {
|
||||||
|
top: 45%;
|
||||||
|
}
|
||||||
3
web-snippets/canvas-clock/README.md
Normal file
3
web-snippets/canvas-clock/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Canvas Clock
|
||||||
|
|
||||||
|
A clock made whith canvas javascript.
|
||||||
15
web-snippets/canvas-clock/index.html
Normal file
15
web-snippets/canvas-clock/index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Canvas Clock</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<canvas id="canvas" width="500" height="500" >cccc</canvas>
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
web-snippets/canvas-clock/script.js
Normal file
54
web-snippets/canvas-clock/script.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
var canvas = document.getElementById("canvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
ctx.strokeStyle = '#00ffff';
|
||||||
|
ctx.lineWidth = 17;
|
||||||
|
ctx.shadowBlur= 15;
|
||||||
|
ctx.shadowColor = '#00ffff'
|
||||||
|
|
||||||
|
function degToRad(degree){
|
||||||
|
var factor = Math.PI/180;
|
||||||
|
return degree*factor;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTime(){
|
||||||
|
var now = new Date();
|
||||||
|
var today = now.toDateString();
|
||||||
|
var time = now.toLocaleTimeString();
|
||||||
|
var hrs = now.getHours();
|
||||||
|
var min = now.getMinutes();
|
||||||
|
var sec = now.getSeconds();
|
||||||
|
var mil = now.getMilliseconds();
|
||||||
|
var smoothsec = sec+(mil/1000);
|
||||||
|
var smoothmin = min+(smoothsec/60);
|
||||||
|
|
||||||
|
//Background
|
||||||
|
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
|
||||||
|
gradient.addColorStop(0, "#03303a");
|
||||||
|
gradient.addColorStop(1, "black");
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
//ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
|
||||||
|
ctx.fillRect(0, 0, 500, 500);
|
||||||
|
//Hours
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(250,250,200, degToRad(270), degToRad((hrs*30)-90));
|
||||||
|
ctx.stroke();
|
||||||
|
//Minutes
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(250,250,170, degToRad(270), degToRad((smoothmin*6)-90));
|
||||||
|
ctx.stroke();
|
||||||
|
//Seconds
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(250,250,140, degToRad(270), degToRad((smoothsec*6)-90));
|
||||||
|
ctx.stroke();
|
||||||
|
//Date
|
||||||
|
ctx.font = "25px Helvetica";
|
||||||
|
ctx.fillStyle = 'rgba(00, 255, 255, 1)'
|
||||||
|
ctx.fillText(today, 175, 250);
|
||||||
|
//Time
|
||||||
|
ctx.font = "25px Helvetica Bold";
|
||||||
|
ctx.fillStyle = 'rgba(00, 255, 255, 1)';
|
||||||
|
ctx.fillText(time+":"+mil, 175, 280);
|
||||||
|
|
||||||
|
}
|
||||||
|
setInterval(renderTime, 40);
|
||||||
6
web-snippets/canvas-clock/style.css
Normal file
6
web-snippets/canvas-clock/style.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
#canvas{
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
3
web-techniques/background-fade-demo/README.md
Normal file
3
web-techniques/background-fade-demo/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Background fade demo
|
||||||
|
|
||||||
|
Simple background fade effect using opacity and transition.
|
||||||
19
web-techniques/background-fade-demo/index.html
Normal file
19
web-techniques/background-fade-demo/index.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Background fade demo</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="past"></div>
|
||||||
|
<div class="present" id="present"></div>
|
||||||
|
<button id="toggle">Toggle</button>
|
||||||
|
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
web-techniques/background-fade-demo/script.js
Normal file
6
web-techniques/background-fade-demo/script.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
var toggle = document.getElementById("toggle");
|
||||||
|
var present = document.getElementById("present");
|
||||||
|
|
||||||
|
toggle.addEventListener("click", function( event ) {
|
||||||
|
present.classList.toggle("fade");
|
||||||
|
});
|
||||||
42
web-techniques/background-fade-demo/style.css
Normal file
42
web-techniques/background-fade-demo/style.css
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.past {
|
||||||
|
background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-1965.jpg") 50%;
|
||||||
|
background-size: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.present {
|
||||||
|
background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-2015.jpg") 50%;
|
||||||
|
background-size: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transition: opacity 1.5s ease-out;
|
||||||
|
transition: opacity 1.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.7);
|
||||||
|
color: white;
|
||||||
|
top: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
left: 50%;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
3
web-techniques/table-simple-filtering/README.md
Normal file
3
web-techniques/table-simple-filtering/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Table: Simple filtering
|
||||||
|
|
||||||
|
|
||||||
1101
web-techniques/table-simple-filtering/index.html
Normal file
1101
web-techniques/table-simple-filtering/index.html
Normal file
File diff suppressed because it is too large
Load Diff
18
web-techniques/table-simple-filtering/script.js
Normal file
18
web-techniques/table-simple-filtering/script.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
const table = document.getElementById('filterTable');
|
||||||
|
const trArray = Array.prototype.slice.call(table.querySelectorAll('tbody tr'));
|
||||||
|
|
||||||
|
const filterTable = event => {
|
||||||
|
const searchTerm = event.target.value.toLowerCase();
|
||||||
|
trArray.forEach(row => {
|
||||||
|
row.classList.add('hidden');
|
||||||
|
const tdArray = Array.prototype.slice.call(row.getElementsByTagName('td'));
|
||||||
|
tdArray.forEach(cell => {
|
||||||
|
if (cell.innerText.toLowerCase().indexOf(searchTerm) > -1) {
|
||||||
|
row.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
searchInput.addEventListener('keyup', filterTable, false);
|
||||||
50
web-techniques/table-simple-filtering/style.css
Normal file
50
web-techniques/table-simple-filtering/style.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
main {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1em;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
||||||
|
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: white;
|
||||||
|
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
|
||||||
|
background-position: 0 0, 100%, 0 0, 100%;
|
||||||
|
background-attachment: local, local, scroll, scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=search] {
|
||||||
|
border: 1px solid;
|
||||||
|
font-size: initial;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
2
web-techniques/table-simple-pagination/README.md
Normal file
2
web-techniques/table-simple-pagination/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Table: Simple pagination
|
||||||
|
|
||||||
1103
web-techniques/table-simple-pagination/index.html
Normal file
1103
web-techniques/table-simple-pagination/index.html
Normal file
File diff suppressed because it is too large
Load Diff
104
web-techniques/table-simple-pagination/script.js
Normal file
104
web-techniques/table-simple-pagination/script.js
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
let pageList = new Array();
|
||||||
|
let currentPage = 1;
|
||||||
|
const numberPerPage = 12;
|
||||||
|
const rows = Array.prototype.slice.call(document.querySelectorAll('tbody tr'));
|
||||||
|
const firstBtn = document.getElementById('first');
|
||||||
|
const lastBtn = document.getElementById('last');
|
||||||
|
const prevBtn = document.getElementById('prev');
|
||||||
|
const nextBtn = document.getElementById('next');
|
||||||
|
const numberOfPages = getNumberOfPages();
|
||||||
|
const pageNumbers = document.getElementById('pageNumbers');
|
||||||
|
|
||||||
|
firstBtn.addEventListener('click', firstPage, false);
|
||||||
|
lastBtn.addEventListener('click', lastPage, false);
|
||||||
|
prevBtn.addEventListener('click', prevPage, false);
|
||||||
|
nextBtn.addEventListener('click', nextPage, false);
|
||||||
|
|
||||||
|
window.onload = load(numberOfPages);
|
||||||
|
|
||||||
|
function getNumberOfPages() {
|
||||||
|
return Math.ceil(rows.length / numberPerPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePageNumbers(pageCount) {
|
||||||
|
for (let j = 1; j <= pageCount; j++) {
|
||||||
|
const pageNumber = document.createElement('span');
|
||||||
|
pageNumber.innerHTML = j;
|
||||||
|
pageNumber.classList.add('page-number');
|
||||||
|
pageNumbers.appendChild(pageNumber);
|
||||||
|
if (j === currentPage) {
|
||||||
|
pageNumber.classList.add('active');
|
||||||
|
}
|
||||||
|
pageNumber.addEventListener('click', jumpToPage, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function jumpToPage(event) {
|
||||||
|
currentPage = event.target.innerHTML;
|
||||||
|
loadRows();
|
||||||
|
activePageNum(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function activePageNum(activePage) {
|
||||||
|
const pageNumbers = Array.prototype.slice.call(document.querySelectorAll('.page-number'));
|
||||||
|
pageNumbers.forEach(function (pageNumber) {
|
||||||
|
if (parseInt(pageNumber.innerHTML) === parseInt(activePage)) {
|
||||||
|
pageNumber.classList.add('active');
|
||||||
|
} else {
|
||||||
|
pageNumber.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextPage() {
|
||||||
|
currentPage = +currentPage + 1;
|
||||||
|
loadRows();
|
||||||
|
activePageNum(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevPage() {
|
||||||
|
currentPage -= 1;
|
||||||
|
loadRows();
|
||||||
|
activePageNum(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function firstPage() {
|
||||||
|
currentPage = 1;
|
||||||
|
loadRows();
|
||||||
|
activePageNum(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function lastPage() {
|
||||||
|
currentPage = numberOfPages;
|
||||||
|
loadRows();
|
||||||
|
activePageNum(currentPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadRows() {
|
||||||
|
const start = (currentPage - 1) * numberPerPage;
|
||||||
|
const end = start + numberPerPage;
|
||||||
|
for (let i = 0; i < pageList.length; i++) {
|
||||||
|
pageList[i].classList.add('hidden');
|
||||||
|
}
|
||||||
|
pageList = rows.slice(start, end);
|
||||||
|
drawRows();
|
||||||
|
buttonStates();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawRows() {
|
||||||
|
for (let i = 0; i < pageList.length; i++) {
|
||||||
|
pageList[i].classList.remove('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buttonStates() {
|
||||||
|
document.getElementById('next').disabled = currentPage == numberOfPages ? true : false;
|
||||||
|
document.getElementById('prev').disabled = currentPage == 1 ? true : false;
|
||||||
|
document.getElementById('first').disabled = currentPage == 1 ? true : false;
|
||||||
|
document.getElementById('last').disabled = currentPage == numberOfPages ? true : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function load(pageCount) {
|
||||||
|
generatePageNumbers(numberOfPages);
|
||||||
|
loadRows();
|
||||||
|
}
|
||||||
100
web-techniques/table-simple-pagination/style.css
Normal file
100
web-techniques/table-simple-pagination/style.css
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
main {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1em;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
overflow: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
||||||
|
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: white;
|
||||||
|
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
|
||||||
|
background-position: 0 0, 100%, 0 0, 100%;
|
||||||
|
background-attachment: local, local, scroll, scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: inherit;
|
||||||
|
margin: 0 0.25em;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
border: 0;
|
||||||
|
-webkit-transition: background-color 0.4s, color 0.4s;
|
||||||
|
transition: background-color 0.4s, color 0.4s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #bbb;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-numbers {
|
||||||
|
margin: 1em 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-number {
|
||||||
|
padding: 0.5em;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 540px) {
|
||||||
|
.backward {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-numbers {
|
||||||
|
-webkit-box-ordinal-group: 3;
|
||||||
|
order: 2;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forward {
|
||||||
|
-webkit-box-ordinal-group: 4;
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
web-techniques/table-simple-sorting/README.md
Normal file
3
web-techniques/table-simple-sorting/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# #Table: Simple sorting
|
||||||
|
|
||||||
|
|
||||||
1096
web-techniques/table-simple-sorting/index.html
Normal file
1096
web-techniques/table-simple-sorting/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user