Triangles From Another Dimension

Developer
Yogev Ahuvia
Size
15,606 Kb
Views
22,264
  1. Triangles From Another Dimension Previews
  2. Triangles From Another Dimension HTML Codes
  3. Triangles From Another Dimension CSS Codes
  4. Triangles From Another Dimension JS Codes

How do I make an triangles from another dimension?

A bulletin-board-like wall of triangular shapes that is being animated to uncover images in a 3D gallery style slideshow. Helper options allows the user to change their point of view over the stage, thus getting a closer look at the animations.. What is a triangles from another dimension? How do you make a triangles from another dimension? This script and codes were developed by Yogev Ahuvia on 07 September 2022, Wednesday.

Triangles From Another Dimension Previews
IQ Test

Triangles From Another Dimension - Script Codes HTML Codes

<!DOCTYPE html>
<html class="preload">
<head> <meta charset="UTF-8"> <title>Triangles From Another Dimension</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
/* ====================================== */
/* The Triangle Experiment © Yogev Ahuvia */
/* ====================================== */
/* A bulletin-board-like wall of */
/* triangular shapes that is being */
/* animated to uncover images in a 3D */
/* gallery style slideshow: em; */
/* Helper options allows the user to */
/* change their point of view over the */
/* stage, thus getting a closer look at */
/* the animations. */
/* ====================================== */
/* Chrome or Safari only for now. */
/* ====================================== */
.wall { width: 920px; height: 516px; margin: 75px auto; transform-style: preserve-3d; transform-origin: 50% 50% 25.98076px; transition: transform 3s;
}
.triangle { position: relative; width: 90px; height: 84px; transform-style: preserve-3d; transform-origin: 50% 50% 25.98076px; transform: rotateY(-60deg); margin: 1px; float: left;
}
.triangle:before, .triangle:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 90px; height: 77.94229px; transition: opacity 1s; transform-origin: 50% 0%;
}
.triangle:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMDM3MjI2IiB5MT0iLTAuMDMyMzYiIHgyPSIwLjk2Mjc3NCIgeTI9IjEuMDMyMzYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(311deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: -webkit-linear-gradient(311deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: linear-gradient(139deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); transform: rotateX(90deg) skew(30deg);
}
.triangle:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuOTYyNzc0IiB5MT0iLTAuMDMyMzYiIHgyPSIwLjAzNzIyNiIgeTI9IjEuMDMyMzYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(229deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: -webkit-linear-gradient(229deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: linear-gradient(-139deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); transform: rotateX(90deg) skew(-30deg) translateZ(-84px);
}
.triangle-side { position: absolute; background: #000; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; transition: border-radius 1s;
}
.triangle-side:nth-child(1) { transform-origin: 100% 50%; transform: rotateY(60deg); background-image: url(https://s.cdpn.io/4389/earth-920.jpg);
}
.triangle-side:nth-child(2) { transform-origin: 0% 50%; transform: rotateY(-60deg); background-image: url(https://s.cdpn.io/4389/newyork-920.jpg);
}
.triangle-side:nth-child(3) { transform-origin: 50% 0%; transform: rotateY(180deg); background-image: url(https://s.cdpn.io/4389/centralpark-920.jpg);
}
#tri1 { z-index: 1;
}
#tri1 .triangle-side { background-position: -2px -2px;
}
.anim-1 #tri1 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri1 { animation: domino 25s 100ms infinite forwards;
}
.anim-3 #tri1 { animation: pop-out 25s 100ms infinite forwards;
}
.anim-4 #tri1 { animation: shape-shifter 20s 300ms infinite forwards;
}
.anim-4 #tri1 .triangle-side { border-radius: 100%;
}
.anim-4 #tri1:before, .anim-4 #tri1:after { opacity: 0;
}
#tri2 { z-index: 2;
}
#tri2 .triangle-side { background-position: -94px -2px;
}
.anim-1 #tri2 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri2 { animation: domino 25s 200ms infinite forwards;
}
.anim-3 #tri2 { animation: pop-out 25s 200ms infinite forwards;
}
.anim-4 #tri2 { animation: shape-shifter 20s 600ms infinite forwards;
}
.anim-4 #tri2 .triangle-side { border-radius: 100%;
}
.anim-4 #tri2:before, .anim-4 #tri2:after { opacity: 0;
}
#tri3 { z-index: 3;
}
#tri3 .triangle-side { background-position: -186px -2px;
}
.anim-1 #tri3 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri3 { animation: domino 25s 300ms infinite forwards;
}
.anim-3 #tri3 { animation: pop-out 25s 300ms infinite forwards;
}
.anim-4 #tri3 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri3 .triangle-side { border-radius: 100%;
}
.anim-4 #tri3:before, .anim-4 #tri3:after { opacity: 0;
}
#tri4 { z-index: 4;
}
#tri4 .triangle-side { background-position: -278px -2px;
}
.anim-1 #tri4 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri4 { animation: domino 25s 400ms infinite forwards;
}
.anim-3 #tri4 { animation: pop-out 25s 400ms infinite forwards;
}
.anim-4 #tri4 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri4 .triangle-side { border-radius: 100%;
}
.anim-4 #tri4:before, .anim-4 #tri4:after { opacity: 0;
}
#tri5 { z-index: 5;
}
#tri5 .triangle-side { background-position: -370px -2px;
}
.anim-1 #tri5 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri5 { animation: domino 25s 500ms infinite forwards;
}
.anim-3 #tri5 { animation: pop-out 25s 500ms infinite forwards;
}
.anim-4 #tri5 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri5 .triangle-side { border-radius: 100%;
}
.anim-4 #tri5:before, .anim-4 #tri5:after { opacity: 0;
}
#tri6 { z-index: 6;
}
#tri6 .triangle-side { background-position: -462px -2px;
}
.anim-1 #tri6 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri6 { animation: domino 25s 600ms infinite forwards;
}
.anim-3 #tri6 { animation: pop-out 25s 600ms infinite forwards;
}
.anim-4 #tri6 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri6 .triangle-side { border-radius: 100%;
}
.anim-4 #tri6:before, .anim-4 #tri6:after { opacity: 0;
}
#tri7 { z-index: 7;
}
#tri7 .triangle-side { background-position: -554px -2px;
}
.anim-1 #tri7 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri7 { animation: domino 25s 700ms infinite forwards;
}
.anim-3 #tri7 { animation: pop-out 25s 700ms infinite forwards;
}
.anim-4 #tri7 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri7 .triangle-side { border-radius: 100%;
}
.anim-4 #tri7:before, .anim-4 #tri7:after { opacity: 0;
}
#tri8 { z-index: 8;
}
#tri8 .triangle-side { background-position: -646px -2px;
}
.anim-1 #tri8 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri8 { animation: domino 25s 800ms infinite forwards;
}
.anim-3 #tri8 { animation: pop-out 25s 800ms infinite forwards;
}
.anim-4 #tri8 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri8 .triangle-side { border-radius: 100%;
}
.anim-4 #tri8:before, .anim-4 #tri8:after { opacity: 0;
}
#tri9 { z-index: 9;
}
#tri9 .triangle-side { background-position: -738px -2px;
}
.anim-1 #tri9 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri9 { animation: domino 25s 900ms infinite forwards;
}
.anim-3 #tri9 { animation: pop-out 25s 900ms infinite forwards;
}
.anim-4 #tri9 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri9 .triangle-side { border-radius: 100%;
}
.anim-4 #tri9:before, .anim-4 #tri9:after { opacity: 0;
}
#tri10 { z-index: 10;
}
#tri10 .triangle-side { background-position: -830px -2px;
}
.anim-1 #tri10 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri10 { animation: domino 25s 1000ms infinite forwards;
}
.anim-3 #tri10 { animation: pop-out 25s 1000ms infinite forwards;
}
.anim-4 #tri10 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri10 .triangle-side { border-radius: 100%;
}
.anim-4 #tri10:before, .anim-4 #tri10:after { opacity: 0;
}
#tri11 { z-index: 11;
}
#tri11 .triangle-side { background-position: -2px -88px;
}
.anim-1 #tri11 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri11 { animation: domino 25s 1100ms infinite forwards;
}
.anim-3 #tri11 { animation: pop-out 25s 1100ms infinite forwards;
}
.anim-4 #tri11 { animation: shape-shifter 20s 600ms infinite forwards;
}
.anim-4 #tri11 .triangle-side { border-radius: 100%;
}
.anim-4 #tri11:before, .anim-4 #tri11:after { opacity: 0;
}
#tri12 { z-index: 12;
}
#tri12 .triangle-side { background-position: -94px -88px;
}
.anim-1 #tri12 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri12 { animation: domino 25s 1200ms infinite forwards;
}
.anim-3 #tri12 { animation: pop-out 25s 1200ms infinite forwards;
}
.anim-4 #tri12 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri12 .triangle-side { border-radius: 100%;
}
.anim-4 #tri12:before, .anim-4 #tri12:after { opacity: 0;
}
#tri13 { z-index: 13;
}
#tri13 .triangle-side { background-position: -186px -88px;
}
.anim-1 #tri13 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri13 { animation: domino 25s 1300ms infinite forwards;
}
.anim-3 #tri13 { animation: pop-out 25s 1300ms infinite forwards;
}
.anim-4 #tri13 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri13 .triangle-side { border-radius: 100%;
}
.anim-4 #tri13:before, .anim-4 #tri13:after { opacity: 0;
}
#tri14 { z-index: 14;
}
#tri14 .triangle-side { background-position: -278px -88px;
}
.anim-1 #tri14 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri14 { animation: domino 25s 1400ms infinite forwards;
}
.anim-3 #tri14 { animation: pop-out 25s 1400ms infinite forwards;
}
.anim-4 #tri14 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri14 .triangle-side { border-radius: 100%;
}
.anim-4 #tri14:before, .anim-4 #tri14:after { opacity: 0;
}
#tri15 { z-index: 15;
}
#tri15 .triangle-side { background-position: -370px -88px;
}
.anim-1 #tri15 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri15 { animation: domino 25s 1500ms infinite forwards;
}
.anim-3 #tri15 { animation: pop-out 25s 1500ms infinite forwards;
}
.anim-4 #tri15 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri15 .triangle-side { border-radius: 100%;
}
.anim-4 #tri15:before, .anim-4 #tri15:after { opacity: 0;
}
#tri16 { z-index: 16;
}
#tri16 .triangle-side { background-position: -462px -88px;
}
.anim-1 #tri16 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri16 { animation: domino 25s 1600ms infinite forwards;
}
.anim-3 #tri16 { animation: pop-out 25s 1600ms infinite forwards;
}
.anim-4 #tri16 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri16 .triangle-side { border-radius: 100%;
}
.anim-4 #tri16:before, .anim-4 #tri16:after { opacity: 0;
}
#tri17 { z-index: 17;
}
#tri17 .triangle-side { background-position: -554px -88px;
}
.anim-1 #tri17 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri17 { animation: domino 25s 1700ms infinite forwards;
}
.anim-3 #tri17 { animation: pop-out 25s 1700ms infinite forwards;
}
.anim-4 #tri17 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri17 .triangle-side { border-radius: 100%;
}
.anim-4 #tri17:before, .anim-4 #tri17:after { opacity: 0;
}
#tri18 { z-index: 18;
}
#tri18 .triangle-side { background-position: -646px -88px;
}
.anim-1 #tri18 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri18 { animation: domino 25s 1800ms infinite forwards;
}
.anim-3 #tri18 { animation: pop-out 25s 1800ms infinite forwards;
}
.anim-4 #tri18 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri18 .triangle-side { border-radius: 100%;
}
.anim-4 #tri18:before, .anim-4 #tri18:after { opacity: 0;
}
#tri19 { z-index: 19;
}
#tri19 .triangle-side { background-position: -738px -88px;
}
.anim-1 #tri19 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri19 { animation: domino 25s 1900ms infinite forwards;
}
.anim-3 #tri19 { animation: pop-out 25s 1900ms infinite forwards;
}
.anim-4 #tri19 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri19 .triangle-side { border-radius: 100%;
}
.anim-4 #tri19:before, .anim-4 #tri19:after { opacity: 0;
}
#tri20 { z-index: 20;
}
#tri20 .triangle-side { background-position: -830px -88px;
}
.anim-1 #tri20 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri20 { animation: domino 25s 2000ms infinite forwards;
}
.anim-3 #tri20 { animation: pop-out 25s 2000ms infinite forwards;
}
.anim-4 #tri20 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri20 .triangle-side { border-radius: 100%;
}
.anim-4 #tri20:before, .anim-4 #tri20:after { opacity: 0;
}
#tri21 { z-index: 21;
}
#tri21 .triangle-side { background-position: -2px -174px;
}
.anim-1 #tri21 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri21 { animation: domino 25s 2100ms infinite forwards;
}
.anim-3 #tri21 { animation: pop-out 25s 2100ms infinite forwards;
}
.anim-4 #tri21 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri21 .triangle-side { border-radius: 100%;
}
.anim-4 #tri21:before, .anim-4 #tri21:after { opacity: 0;
}
#tri22 { z-index: 22;
}
#tri22 .triangle-side { background-position: -94px -174px;
}
.anim-1 #tri22 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri22 { animation: domino 25s 2200ms infinite forwards;
}
.anim-3 #tri22 { animation: pop-out 25s 2200ms infinite forwards;
}
.anim-4 #tri22 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri22 .triangle-side { border-radius: 100%;
}
.anim-4 #tri22:before, .anim-4 #tri22:after { opacity: 0;
}
#tri23 { z-index: 23;
}
#tri23 .triangle-side { background-position: -186px -174px;
}
.anim-1 #tri23 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri23 { animation: domino 25s 2300ms infinite forwards;
}
.anim-3 #tri23 { animation: pop-out 25s 2300ms infinite forwards;
}
.anim-4 #tri23 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri23 .triangle-side { border-radius: 100%;
}
.anim-4 #tri23:before, .anim-4 #tri23:after { opacity: 0;
}
#tri24 { z-index: 24;
}
#tri24 .triangle-side { background-position: -278px -174px;
}
.anim-1 #tri24 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri24 { animation: domino 25s 2400ms infinite forwards;
}
.anim-3 #tri24 { animation: pop-out 25s 2400ms infinite forwards;
}
.anim-4 #tri24 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri24 .triangle-side { border-radius: 100%;
}
.anim-4 #tri24:before, .anim-4 #tri24:after { opacity: 0;
}
#tri25 { z-index: 25;
}
#tri25 .triangle-side { background-position: -370px -174px;
}
.anim-1 #tri25 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri25 { animation: domino 25s 2500ms infinite forwards;
}
.anim-3 #tri25 { animation: pop-out 25s 2500ms infinite forwards;
}
.anim-4 #tri25 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri25 .triangle-side { border-radius: 100%;
}
.anim-4 #tri25:before, .anim-4 #tri25:after { opacity: 0;
}
#tri26 { z-index: 26;
}
#tri26 .triangle-side { background-position: -462px -174px;
}
.anim-1 #tri26 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri26 { animation: domino 25s 2600ms infinite forwards;
}
.anim-3 #tri26 { animation: pop-out 25s 2600ms infinite forwards;
}
.anim-4 #tri26 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri26 .triangle-side { border-radius: 100%;
}
.anim-4 #tri26:before, .anim-4 #tri26:after { opacity: 0;
}
#tri27 { z-index: 27;
}
#tri27 .triangle-side { background-position: -554px -174px;
}
.anim-1 #tri27 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri27 { animation: domino 25s 2700ms infinite forwards;
}
.anim-3 #tri27 { animation: pop-out 25s 2700ms infinite forwards;
}
.anim-4 #tri27 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri27 .triangle-side { border-radius: 100%;
}
.anim-4 #tri27:before, .anim-4 #tri27:after { opacity: 0;
}
#tri28 { z-index: 28;
}
#tri28 .triangle-side { background-position: -646px -174px;
}
.anim-1 #tri28 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri28 { animation: domino 25s 2800ms infinite forwards;
}
.anim-3 #tri28 { animation: pop-out 25s 2800ms infinite forwards;
}
.anim-4 #tri28 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri28 .triangle-side { border-radius: 100%;
}
.anim-4 #tri28:before, .anim-4 #tri28:after { opacity: 0;
}
#tri29 { z-index: 29;
}
#tri29 .triangle-side { background-position: -738px -174px;
}
.anim-1 #tri29 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri29 { animation: domino 25s 2900ms infinite forwards;
}
.anim-3 #tri29 { animation: pop-out 25s 2900ms infinite forwards;
}
.anim-4 #tri29 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri29 .triangle-side { border-radius: 100%;
}
.anim-4 #tri29:before, .anim-4 #tri29:after { opacity: 0;
}
#tri30 { z-index: 30;
}
#tri30 .triangle-side { background-position: -830px -174px;
}
.anim-1 #tri30 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri30 { animation: domino 25s 3000ms infinite forwards;
}
.anim-3 #tri30 { animation: pop-out 25s 3000ms infinite forwards;
}
.anim-4 #tri30 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri30 .triangle-side { border-radius: 100%;
}
.anim-4 #tri30:before, .anim-4 #tri30:after { opacity: 0;
}
#tri31 { z-index: 29;
}
#tri31 .triangle-side { background-position: -2px -260px;
}
.anim-1 #tri31 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri31 { animation: domino 25s 3100ms infinite forwards;
}
.anim-3 #tri31 { animation: pop-out 25s 3100ms infinite forwards;
}
.anim-4 #tri31 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri31 .triangle-side { border-radius: 100%;
}
.anim-4 #tri31:before, .anim-4 #tri31:after { opacity: 0;
}
#tri32 { z-index: 28;
}
#tri32 .triangle-side { background-position: -94px -260px;
}
.anim-1 #tri32 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri32 { animation: domino 25s 3200ms infinite forwards;
}
.anim-3 #tri32 { animation: pop-out 25s 3200ms infinite forwards;
}
.anim-4 #tri32 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri32 .triangle-side { border-radius: 100%;
}
.anim-4 #tri32:before, .anim-4 #tri32:after { opacity: 0;
}
#tri33 { z-index: 27;
}
#tri33 .triangle-side { background-position: -186px -260px;
}
.anim-1 #tri33 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri33 { animation: domino 25s 3300ms infinite forwards;
}
.anim-3 #tri33 { animation: pop-out 25s 3300ms infinite forwards;
}
.anim-4 #tri33 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri33 .triangle-side { border-radius: 100%;
}
.anim-4 #tri33:before, .anim-4 #tri33:after { opacity: 0;
}
#tri34 { z-index: 26;
}
#tri34 .triangle-side { background-position: -278px -260px;
}
.anim-1 #tri34 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri34 { animation: domino 25s 3400ms infinite forwards;
}
.anim-3 #tri34 { animation: pop-out 25s 3400ms infinite forwards;
}
.anim-4 #tri34 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri34 .triangle-side { border-radius: 100%;
}
.anim-4 #tri34:before, .anim-4 #tri34:after { opacity: 0;
}
#tri35 { z-index: 25;
}
#tri35 .triangle-side { background-position: -370px -260px;
}
.anim-1 #tri35 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri35 { animation: domino 25s 3500ms infinite forwards;
}
.anim-3 #tri35 { animation: pop-out 25s 3500ms infinite forwards;
}
.anim-4 #tri35 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri35 .triangle-side { border-radius: 100%;
}
.anim-4 #tri35:before, .anim-4 #tri35:after { opacity: 0;
}
#tri36 { z-index: 24;
}
#tri36 .triangle-side { background-position: -462px -260px;
}
.anim-1 #tri36 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri36 { animation: domino 25s 3600ms infinite forwards;
}
.anim-3 #tri36 { animation: pop-out 25s 3600ms infinite forwards;
}
.anim-4 #tri36 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri36 .triangle-side { border-radius: 100%;
}
.anim-4 #tri36:before, .anim-4 #tri36:after { opacity: 0;
}
#tri37 { z-index: 23;
}
#tri37 .triangle-side { background-position: -554px -260px;
}
.anim-1 #tri37 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri37 { animation: domino 25s 3700ms infinite forwards;
}
.anim-3 #tri37 { animation: pop-out 25s 3700ms infinite forwards;
}
.anim-4 #tri37 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri37 .triangle-side { border-radius: 100%;
}
.anim-4 #tri37:before, .anim-4 #tri37:after { opacity: 0;
}
#tri38 { z-index: 22;
}
#tri38 .triangle-side { background-position: -646px -260px;
}
.anim-1 #tri38 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri38 { animation: domino 25s 3800ms infinite forwards;
}
.anim-3 #tri38 { animation: pop-out 25s 3800ms infinite forwards;
}
.anim-4 #tri38 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri38 .triangle-side { border-radius: 100%;
}
.anim-4 #tri38:before, .anim-4 #tri38:after { opacity: 0;
}
#tri39 { z-index: 21;
}
#tri39 .triangle-side { background-position: -738px -260px;
}
.anim-1 #tri39 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri39 { animation: domino 25s 3900ms infinite forwards;
}
.anim-3 #tri39 { animation: pop-out 25s 3900ms infinite forwards;
}
.anim-4 #tri39 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri39 .triangle-side { border-radius: 100%;
}
.anim-4 #tri39:before, .anim-4 #tri39:after { opacity: 0;
}
#tri40 { z-index: 20;
}
#tri40 .triangle-side { background-position: -830px -260px;
}
.anim-1 #tri40 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri40 { animation: domino 25s 4000ms infinite forwards;
}
.anim-3 #tri40 { animation: pop-out 25s 4000ms infinite forwards;
}
.anim-4 #tri40 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri40 .triangle-side { border-radius: 100%;
}
.anim-4 #tri40:before, .anim-4 #tri40:after { opacity: 0;
}
#tri41 { z-index: 19;
}
#tri41 .triangle-side { background-position: -2px -346px;
}
.anim-1 #tri41 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri41 { animation: domino 25s 4100ms infinite forwards;
}
.anim-3 #tri41 { animation: pop-out 25s 4100ms infinite forwards;
}
.anim-4 #tri41 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri41 .triangle-side { border-radius: 100%;
}
.anim-4 #tri41:before, .anim-4 #tri41:after { opacity: 0;
}
#tri42 { z-index: 18;
}
#tri42 .triangle-side { background-position: -94px -346px;
}
.anim-1 #tri42 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri42 { animation: domino 25s 4200ms infinite forwards;
}
.anim-3 #tri42 { animation: pop-out 25s 4200ms infinite forwards;
}
.anim-4 #tri42 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri42 .triangle-side { border-radius: 100%;
}
.anim-4 #tri42:before, .anim-4 #tri42:after { opacity: 0;
}
#tri43 { z-index: 17;
}
#tri43 .triangle-side { background-position: -186px -346px;
}
.anim-1 #tri43 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri43 { animation: domino 25s 4300ms infinite forwards;
}
.anim-3 #tri43 { animation: pop-out 25s 4300ms infinite forwards;
}
.anim-4 #tri43 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri43 .triangle-side { border-radius: 100%;
}
.anim-4 #tri43:before, .anim-4 #tri43:after { opacity: 0;
}
#tri44 { z-index: 16;
}
#tri44 .triangle-side { background-position: -278px -346px;
}
.anim-1 #tri44 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri44 { animation: domino 25s 4400ms infinite forwards;
}
.anim-3 #tri44 { animation: pop-out 25s 4400ms infinite forwards;
}
.anim-4 #tri44 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri44 .triangle-side { border-radius: 100%;
}
.anim-4 #tri44:before, .anim-4 #tri44:after { opacity: 0;
}
#tri45 { z-index: 15;
}
#tri45 .triangle-side { background-position: -370px -346px;
}
.anim-1 #tri45 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri45 { animation: domino 25s 4500ms infinite forwards;
}
.anim-3 #tri45 { animation: pop-out 25s 4500ms infinite forwards;
}
.anim-4 #tri45 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri45 .triangle-side { border-radius: 100%;
}
.anim-4 #tri45:before, .anim-4 #tri45:after { opacity: 0;
}
#tri46 { z-index: 14;
}
#tri46 .triangle-side { background-position: -462px -346px;
}
.anim-1 #tri46 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri46 { animation: domino 25s 4600ms infinite forwards;
}
.anim-3 #tri46 { animation: pop-out 25s 4600ms infinite forwards;
}
.anim-4 #tri46 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri46 .triangle-side { border-radius: 100%;
}
.anim-4 #tri46:before, .anim-4 #tri46:after { opacity: 0;
}
#tri47 { z-index: 13;
}
#tri47 .triangle-side { background-position: -554px -346px;
}
.anim-1 #tri47 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri47 { animation: domino 25s 4700ms infinite forwards;
}
.anim-3 #tri47 { animation: pop-out 25s 4700ms infinite forwards;
}
.anim-4 #tri47 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri47 .triangle-side { border-radius: 100%;
}
.anim-4 #tri47:before, .anim-4 #tri47:after { opacity: 0;
}
#tri48 { z-index: 12;
}
#tri48 .triangle-side { background-position: -646px -346px;
}
.anim-1 #tri48 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri48 { animation: domino 25s 4800ms infinite forwards;
}
.anim-3 #tri48 { animation: pop-out 25s 4800ms infinite forwards;
}
.anim-4 #tri48 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri48 .triangle-side { border-radius: 100%;
}
.anim-4 #tri48:before, .anim-4 #tri48:after { opacity: 0;
}
#tri49 { z-index: 11;
}
#tri49 .triangle-side { background-position: -738px -346px;
}
.anim-1 #tri49 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri49 { animation: domino 25s 4900ms infinite forwards;
}
.anim-3 #tri49 { animation: pop-out 25s 4900ms infinite forwards;
}
.anim-4 #tri49 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri49 .triangle-side { border-radius: 100%;
}
.anim-4 #tri49:before, .anim-4 #tri49:after { opacity: 0;
}
#tri50 { z-index: 10;
}
#tri50 .triangle-side { background-position: -830px -346px;
}
.anim-1 #tri50 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri50 { animation: domino 25s 5000ms infinite forwards;
}
.anim-3 #tri50 { animation: pop-out 25s 5000ms infinite forwards;
}
.anim-4 #tri50 { animation: shape-shifter 20s 4200ms infinite forwards;
}
.anim-4 #tri50 .triangle-side { border-radius: 100%;
}
.anim-4 #tri50:before, .anim-4 #tri50:after { opacity: 0;
}
#tri51 { z-index: 9;
}
#tri51 .triangle-side { background-position: -2px -432px;
}
.anim-1 #tri51 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri51 { animation: domino 25s 5100ms infinite forwards;
}
.anim-3 #tri51 { animation: pop-out 25s 5100ms infinite forwards;
}
.anim-4 #tri51 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri51 .triangle-side { border-radius: 100%;
}
.anim-4 #tri51:before, .anim-4 #tri51:after { opacity: 0;
}
#tri52 { z-index: 8;
}
#tri52 .triangle-side { background-position: -94px -432px;
}
.anim-1 #tri52 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri52 { animation: domino 25s 5200ms infinite forwards;
}
.anim-3 #tri52 { animation: pop-out 25s 5200ms infinite forwards;
}
.anim-4 #tri52 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri52 .triangle-side { border-radius: 100%;
}
.anim-4 #tri52:before, .anim-4 #tri52:after { opacity: 0;
}
#tri53 { z-index: 7;
}
#tri53 .triangle-side { background-position: -186px -432px;
}
.anim-1 #tri53 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri53 { animation: domino 25s 5300ms infinite forwards;
}
.anim-3 #tri53 { animation: pop-out 25s 5300ms infinite forwards;
}
.anim-4 #tri53 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri53 .triangle-side { border-radius: 100%;
}
.anim-4 #tri53:before, .anim-4 #tri53:after { opacity: 0;
}
#tri54 { z-index: 6;
}
#tri54 .triangle-side { background-position: -278px -432px;
}
.anim-1 #tri54 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri54 { animation: domino 25s 5400ms infinite forwards;
}
.anim-3 #tri54 { animation: pop-out 25s 5400ms infinite forwards;
}
.anim-4 #tri54 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri54 .triangle-side { border-radius: 100%;
}
.anim-4 #tri54:before, .anim-4 #tri54:after { opacity: 0;
}
#tri55 { z-index: 5;
}
#tri55 .triangle-side { background-position: -370px -432px;
}
.anim-1 #tri55 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri55 { animation: domino 25s 5500ms infinite forwards;
}
.anim-3 #tri55 { animation: pop-out 25s 5500ms infinite forwards;
}
.anim-4 #tri55 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri55 .triangle-side { border-radius: 100%;
}
.anim-4 #tri55:before, .anim-4 #tri55:after { opacity: 0;
}
#tri56 { z-index: 4;
}
#tri56 .triangle-side { background-position: -462px -432px;
}
.anim-1 #tri56 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri56 { animation: domino 25s 5600ms infinite forwards;
}
.anim-3 #tri56 { animation: pop-out 25s 5600ms infinite forwards;
}
.anim-4 #tri56 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri56 .triangle-side { border-radius: 100%;
}
.anim-4 #tri56:before, .anim-4 #tri56:after { opacity: 0;
}
#tri57 { z-index: 3;
}
#tri57 .triangle-side { background-position: -554px -432px;
}
.anim-1 #tri57 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri57 { animation: domino 25s 5700ms infinite forwards;
}
.anim-3 #tri57 { animation: pop-out 25s 5700ms infinite forwards;
}
.anim-4 #tri57 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri57 .triangle-side { border-radius: 100%;
}
.anim-4 #tri57:before, .anim-4 #tri57:after { opacity: 0;
}
#tri58 { z-index: 2;
}
#tri58 .triangle-side { background-position: -646px -432px;
}
.anim-1 #tri58 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri58 { animation: domino 25s 5800ms infinite forwards;
}
.anim-3 #tri58 { animation: pop-out 25s 5800ms infinite forwards;
}
.anim-4 #tri58 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri58 .triangle-side { border-radius: 100%;
}
.anim-4 #tri58:before, .anim-4 #tri58:after { opacity: 0;
}
#tri59 { z-index: 1;
}
#tri59 .triangle-side { background-position: -738px -432px;
}
.anim-1 #tri59 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri59 { animation: domino 25s 5900ms infinite forwards;
}
.anim-3 #tri59 { animation: pop-out 25s 5900ms infinite forwards;
}
.anim-4 #tri59 { animation: shape-shifter 20s 4200ms infinite forwards;
}
.anim-4 #tri59 .triangle-side { border-radius: 100%;
}
.anim-4 #tri59:before, .anim-4 #tri59:after { opacity: 0;
}
#tri60 { z-index: 0;
}
#tri60 .triangle-side { background-position: -830px -432px;
}
.anim-1 #tri60 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri60 { animation: domino 25s 6000ms infinite forwards;
}
.anim-3 #tri60 { animation: pop-out 25s 6000ms infinite forwards;
}
.anim-4 #tri60 { animation: shape-shifter 20s 4500ms infinite forwards;
}
.anim-4 #tri60 .triangle-side { border-radius: 100%;
}
.anim-4 #tri60:before, .anim-4 #tri60:after { opacity: 0;
}
@keyframes column-chase { 0% { transform: rotateY(-60deg); } 5% { transform: rotateY(60deg); } 33% { transform: rotateY(60deg); } 38% { transform: rotateY(180deg); } 66% { transform: rotateY(180deg); } 71% { transform: rotateY(300deg); } 100% { transform: rotateY(300deg); }
}
@keyframes domino { 0% { transform: rotateY(-60deg); } 5% { transform: rotateY(60deg); } 33% { transform: rotateY(60deg); } 38% { transform: rotateY(180deg); } 66% { transform: rotateY(180deg); } 71% { transform: rotateY(300deg); } 100% { transform: rotateY(300deg); }
}
@keyframes pop-out { 0% { transform: translateZ(0) rotateY(-60deg); } 1% { transform: translateZ(200px) rotateY(-60deg); } 4% { transform: translateZ(200px) rotateY(420deg); } 5% { transform: translateZ(0) rotateY(420deg); } 33% { transform: translateZ(0) rotateY(420deg); } 34% { transform: translateZ(200px) rotateY(420deg); } 37% { transform: translateZ(200px) rotateY(900deg); } 38% { transform: translateZ(0) rotateY(900deg); } 66% { transform: translateZ(0) rotateY(900deg); } 67% { transform: translateZ(200px) rotateY(900deg); } 70% { transform: translateZ(200px) rotateY(1380deg); } 71% { transform: translateZ(0) rotateY(1380deg); } 100% { transform: translateZ(0) rotateY(1380deg); }
}
@keyframes shape-shifter { 0% { transform: rotateY(-60deg); } 1% { transform: rotateY(-60deg); } 5% { transform: rotateY(420deg); } 33% { transform: rotateY(420deg); } 34% { transform: rotateY(420deg); } 38% { transform: rotateY(900deg); } 66% { transform: rotateY(900deg); } 67% { transform: rotateY(900deg); } 71% { transform: rotateY(1380deg); } 100% { transform: rotateY(1380deg); }
}
nav { background: #F7F7F5; height: 50px; line-height: 50px; box-shadow: 0px 1px 1px 0px #D8D8D8; opacity: 1; transition: opacity 2s;
}
nav ul { display: inline-block;
}
nav ul.actions li:after { content: ""; display: block; position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px; background: orange; transition: bottom 100ms;
}
nav ul.actions li:hover:after { bottom: 0;
}
nav ul.settings { position: absolute; top: 0; right: 0;
}
nav ul.settings li { color: #444;
}
nav ul.settings li * { vertical-align: middle;
}
nav ul li { list-style-type: none; display: inline-block; padding-left: 10px; padding-right: 10px; color: #448ab8; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden;
}
nav ul li:first-child { margin-left: 10px;
}
nav ul li:last-child { margin-right: 10px;
}
.opacity { appearance: none; background: #444; width: 50px; height: 14px; border-radius: 8px; padding-right: 2px; padding-left: 2px;
}
.opacity::-webkit-slider-thumb { appearance: none; background: #F7F7F5; width: 10px; height: 10px; border-radius: 100%;
}
.anim-1 ul.actions li:nth-child(1) { color: orange;
}
.anim-1 ul.actions li:nth-child(1):after { bottom: 0;
}
.anim-2 ul.actions li:nth-child(2) { color: orange;
}
.anim-2 ul.actions li:nth-child(2):after { bottom: 0;
}
.anim-3 ul.actions li:nth-child(3) { color: orange;
}
.anim-3 ul.actions li:nth-child(3):after { bottom: 0;
}
.anim-4 ul.actions li:nth-child(4) { color: orange;
}
.anim-4 ul.actions li:nth-child(4):after { bottom: 0;
}
body { perspective: 1200px; perspective-origin: 50% 50%; background: #EAEAEA; font-family: 'Open Sans', sans-serif; font-weight: 300;
}
.preload .wall { transition: none; transform: rotateX(-90deg) translateZ(-100px);
}
.preload nav { transition: none; opacity: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <ul class='actions'> <li data-name='anim-1'> <i class='fa fa-columns'></i> <a>Column Chase</a> </li> <li data-name='anim-2'> <i class='fa fa-th'></i> <a>Domino</a> </li> <li data-name='anim-3'> <i class='fa fa-level-up'></i> <a>Pop Out</a> </li> <li data-name='anim-4'> <i class='fa fa-circle-blank'></i> <a>Shape Shifter</a> </li> </ul> <ul class='settings'> <li> <i class='fa fa-eye' onclick='toggleOpacity()'></i> <input class='opacity' max='100' min='50' type='range' value='100'> </li> <li onclick='rotateHorizontal()'> <i class='fa fa-rotate-left'></i> <a>Rotate</a> </li> <li onclick='rotateVertical()'> <i class='fa fa-sort'></i> <a>Front/Side</a> </li> </ul>
</nav>
<div class='wall'> <div class='triangle' id='tri1'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri2'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri3'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri4'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri5'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri6'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri7'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri8'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri9'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri10'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri11'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri12'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri13'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri14'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri15'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri16'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri17'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri18'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri19'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri20'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri21'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri22'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri23'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri24'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri25'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri26'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri27'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri28'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri29'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri30'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri31'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri32'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri33'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri34'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri35'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri36'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri37'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri38'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri39'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri40'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri41'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri42'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri43'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri44'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri45'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri46'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri47'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri48'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri49'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri50'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri51'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri52'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri53'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri54'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri55'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri56'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri57'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri58'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri59'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div> <div class='triangle' id='tri60'> <div class='triangle-side'></div> <div class='triangle-side'></div> <div class='triangle-side'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s.cdpn.io/4389/prefixfree.jquery.js'></script> <script src="js/index.js"></script>
</body>
</html>

Triangles From Another Dimension - Script Codes CSS Codes

@charset "UTF-8";
/* ====================================== */
/* The Triangle Experiment © Yogev Ahuvia */
/* ====================================== */
/* A bulletin-board-like wall of */
/* triangular shapes that is being */
/* animated to uncover images in a 3D */
/* gallery style slideshow: em; */
/* Helper options allows the user to */
/* change their point of view over the */
/* stage, thus getting a closer look at */
/* the animations. */
/* ====================================== */
/* Chrome or Safari only for now. */
/* ====================================== */
.wall { width: 920px; height: 516px; margin: 75px auto; transform-style: preserve-3d; transform-origin: 50% 50% 25.98076px; transition: transform 3s;
}
.triangle { position: relative; width: 90px; height: 84px; transform-style: preserve-3d; transform-origin: 50% 50% 25.98076px; transform: rotateY(-60deg); margin: 1px; float: left;
}
.triangle:before, .triangle:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 90px; height: 77.94229px; transition: opacity 1s; transform-origin: 50% 0%;
}
.triangle:before { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMDM3MjI2IiB5MT0iLTAuMDMyMzYiIHgyPSIwLjk2Mjc3NCIgeTI9IjEuMDMyMzYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(311deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: -webkit-linear-gradient(311deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: linear-gradient(139deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); transform: rotateX(90deg) skew(30deg);
}
.triangle:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuOTYyNzc0IiB5MT0iLTAuMDMyMzYiIHgyPSIwLjAzNzIyNiIgeTI9IjEuMDMyMzYiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjIyMjIyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(229deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: -webkit-linear-gradient(229deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); background-image: linear-gradient(-139deg, #222222 0%, #222222 50%, rgba(34, 34, 34, 0) 51%); transform: rotateX(90deg) skew(-30deg) translateZ(-84px);
}
.triangle-side { position: absolute; background: #000; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; transition: border-radius 1s;
}
.triangle-side:nth-child(1) { transform-origin: 100% 50%; transform: rotateY(60deg); background-image: url(https://s.cdpn.io/4389/earth-920.jpg);
}
.triangle-side:nth-child(2) { transform-origin: 0% 50%; transform: rotateY(-60deg); background-image: url(https://s.cdpn.io/4389/newyork-920.jpg);
}
.triangle-side:nth-child(3) { transform-origin: 50% 0%; transform: rotateY(180deg); background-image: url(https://s.cdpn.io/4389/centralpark-920.jpg);
}
#tri1 { z-index: 1;
}
#tri1 .triangle-side { background-position: -2px -2px;
}
.anim-1 #tri1 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri1 { animation: domino 25s 100ms infinite forwards;
}
.anim-3 #tri1 { animation: pop-out 25s 100ms infinite forwards;
}
.anim-4 #tri1 { animation: shape-shifter 20s 300ms infinite forwards;
}
.anim-4 #tri1 .triangle-side { border-radius: 100%;
}
.anim-4 #tri1:before, .anim-4 #tri1:after { opacity: 0;
}
#tri2 { z-index: 2;
}
#tri2 .triangle-side { background-position: -94px -2px;
}
.anim-1 #tri2 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri2 { animation: domino 25s 200ms infinite forwards;
}
.anim-3 #tri2 { animation: pop-out 25s 200ms infinite forwards;
}
.anim-4 #tri2 { animation: shape-shifter 20s 600ms infinite forwards;
}
.anim-4 #tri2 .triangle-side { border-radius: 100%;
}
.anim-4 #tri2:before, .anim-4 #tri2:after { opacity: 0;
}
#tri3 { z-index: 3;
}
#tri3 .triangle-side { background-position: -186px -2px;
}
.anim-1 #tri3 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri3 { animation: domino 25s 300ms infinite forwards;
}
.anim-3 #tri3 { animation: pop-out 25s 300ms infinite forwards;
}
.anim-4 #tri3 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri3 .triangle-side { border-radius: 100%;
}
.anim-4 #tri3:before, .anim-4 #tri3:after { opacity: 0;
}
#tri4 { z-index: 4;
}
#tri4 .triangle-side { background-position: -278px -2px;
}
.anim-1 #tri4 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri4 { animation: domino 25s 400ms infinite forwards;
}
.anim-3 #tri4 { animation: pop-out 25s 400ms infinite forwards;
}
.anim-4 #tri4 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri4 .triangle-side { border-radius: 100%;
}
.anim-4 #tri4:before, .anim-4 #tri4:after { opacity: 0;
}
#tri5 { z-index: 5;
}
#tri5 .triangle-side { background-position: -370px -2px;
}
.anim-1 #tri5 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri5 { animation: domino 25s 500ms infinite forwards;
}
.anim-3 #tri5 { animation: pop-out 25s 500ms infinite forwards;
}
.anim-4 #tri5 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri5 .triangle-side { border-radius: 100%;
}
.anim-4 #tri5:before, .anim-4 #tri5:after { opacity: 0;
}
#tri6 { z-index: 6;
}
#tri6 .triangle-side { background-position: -462px -2px;
}
.anim-1 #tri6 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri6 { animation: domino 25s 600ms infinite forwards;
}
.anim-3 #tri6 { animation: pop-out 25s 600ms infinite forwards;
}
.anim-4 #tri6 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri6 .triangle-side { border-radius: 100%;
}
.anim-4 #tri6:before, .anim-4 #tri6:after { opacity: 0;
}
#tri7 { z-index: 7;
}
#tri7 .triangle-side { background-position: -554px -2px;
}
.anim-1 #tri7 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri7 { animation: domino 25s 700ms infinite forwards;
}
.anim-3 #tri7 { animation: pop-out 25s 700ms infinite forwards;
}
.anim-4 #tri7 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri7 .triangle-side { border-radius: 100%;
}
.anim-4 #tri7:before, .anim-4 #tri7:after { opacity: 0;
}
#tri8 { z-index: 8;
}
#tri8 .triangle-side { background-position: -646px -2px;
}
.anim-1 #tri8 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri8 { animation: domino 25s 800ms infinite forwards;
}
.anim-3 #tri8 { animation: pop-out 25s 800ms infinite forwards;
}
.anim-4 #tri8 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri8 .triangle-side { border-radius: 100%;
}
.anim-4 #tri8:before, .anim-4 #tri8:after { opacity: 0;
}
#tri9 { z-index: 9;
}
#tri9 .triangle-side { background-position: -738px -2px;
}
.anim-1 #tri9 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri9 { animation: domino 25s 900ms infinite forwards;
}
.anim-3 #tri9 { animation: pop-out 25s 900ms infinite forwards;
}
.anim-4 #tri9 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri9 .triangle-side { border-radius: 100%;
}
.anim-4 #tri9:before, .anim-4 #tri9:after { opacity: 0;
}
#tri10 { z-index: 10;
}
#tri10 .triangle-side { background-position: -830px -2px;
}
.anim-1 #tri10 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri10 { animation: domino 25s 1000ms infinite forwards;
}
.anim-3 #tri10 { animation: pop-out 25s 1000ms infinite forwards;
}
.anim-4 #tri10 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri10 .triangle-side { border-radius: 100%;
}
.anim-4 #tri10:before, .anim-4 #tri10:after { opacity: 0;
}
#tri11 { z-index: 11;
}
#tri11 .triangle-side { background-position: -2px -88px;
}
.anim-1 #tri11 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri11 { animation: domino 25s 1100ms infinite forwards;
}
.anim-3 #tri11 { animation: pop-out 25s 1100ms infinite forwards;
}
.anim-4 #tri11 { animation: shape-shifter 20s 600ms infinite forwards;
}
.anim-4 #tri11 .triangle-side { border-radius: 100%;
}
.anim-4 #tri11:before, .anim-4 #tri11:after { opacity: 0;
}
#tri12 { z-index: 12;
}
#tri12 .triangle-side { background-position: -94px -88px;
}
.anim-1 #tri12 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri12 { animation: domino 25s 1200ms infinite forwards;
}
.anim-3 #tri12 { animation: pop-out 25s 1200ms infinite forwards;
}
.anim-4 #tri12 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri12 .triangle-side { border-radius: 100%;
}
.anim-4 #tri12:before, .anim-4 #tri12:after { opacity: 0;
}
#tri13 { z-index: 13;
}
#tri13 .triangle-side { background-position: -186px -88px;
}
.anim-1 #tri13 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri13 { animation: domino 25s 1300ms infinite forwards;
}
.anim-3 #tri13 { animation: pop-out 25s 1300ms infinite forwards;
}
.anim-4 #tri13 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri13 .triangle-side { border-radius: 100%;
}
.anim-4 #tri13:before, .anim-4 #tri13:after { opacity: 0;
}
#tri14 { z-index: 14;
}
#tri14 .triangle-side { background-position: -278px -88px;
}
.anim-1 #tri14 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri14 { animation: domino 25s 1400ms infinite forwards;
}
.anim-3 #tri14 { animation: pop-out 25s 1400ms infinite forwards;
}
.anim-4 #tri14 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri14 .triangle-side { border-radius: 100%;
}
.anim-4 #tri14:before, .anim-4 #tri14:after { opacity: 0;
}
#tri15 { z-index: 15;
}
#tri15 .triangle-side { background-position: -370px -88px;
}
.anim-1 #tri15 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri15 { animation: domino 25s 1500ms infinite forwards;
}
.anim-3 #tri15 { animation: pop-out 25s 1500ms infinite forwards;
}
.anim-4 #tri15 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri15 .triangle-side { border-radius: 100%;
}
.anim-4 #tri15:before, .anim-4 #tri15:after { opacity: 0;
}
#tri16 { z-index: 16;
}
#tri16 .triangle-side { background-position: -462px -88px;
}
.anim-1 #tri16 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri16 { animation: domino 25s 1600ms infinite forwards;
}
.anim-3 #tri16 { animation: pop-out 25s 1600ms infinite forwards;
}
.anim-4 #tri16 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri16 .triangle-side { border-radius: 100%;
}
.anim-4 #tri16:before, .anim-4 #tri16:after { opacity: 0;
}
#tri17 { z-index: 17;
}
#tri17 .triangle-side { background-position: -554px -88px;
}
.anim-1 #tri17 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri17 { animation: domino 25s 1700ms infinite forwards;
}
.anim-3 #tri17 { animation: pop-out 25s 1700ms infinite forwards;
}
.anim-4 #tri17 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri17 .triangle-side { border-radius: 100%;
}
.anim-4 #tri17:before, .anim-4 #tri17:after { opacity: 0;
}
#tri18 { z-index: 18;
}
#tri18 .triangle-side { background-position: -646px -88px;
}
.anim-1 #tri18 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri18 { animation: domino 25s 1800ms infinite forwards;
}
.anim-3 #tri18 { animation: pop-out 25s 1800ms infinite forwards;
}
.anim-4 #tri18 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri18 .triangle-side { border-radius: 100%;
}
.anim-4 #tri18:before, .anim-4 #tri18:after { opacity: 0;
}
#tri19 { z-index: 19;
}
#tri19 .triangle-side { background-position: -738px -88px;
}
.anim-1 #tri19 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri19 { animation: domino 25s 1900ms infinite forwards;
}
.anim-3 #tri19 { animation: pop-out 25s 1900ms infinite forwards;
}
.anim-4 #tri19 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri19 .triangle-side { border-radius: 100%;
}
.anim-4 #tri19:before, .anim-4 #tri19:after { opacity: 0;
}
#tri20 { z-index: 20;
}
#tri20 .triangle-side { background-position: -830px -88px;
}
.anim-1 #tri20 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri20 { animation: domino 25s 2000ms infinite forwards;
}
.anim-3 #tri20 { animation: pop-out 25s 2000ms infinite forwards;
}
.anim-4 #tri20 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri20 .triangle-side { border-radius: 100%;
}
.anim-4 #tri20:before, .anim-4 #tri20:after { opacity: 0;
}
#tri21 { z-index: 21;
}
#tri21 .triangle-side { background-position: -2px -174px;
}
.anim-1 #tri21 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri21 { animation: domino 25s 2100ms infinite forwards;
}
.anim-3 #tri21 { animation: pop-out 25s 2100ms infinite forwards;
}
.anim-4 #tri21 { animation: shape-shifter 20s 900ms infinite forwards;
}
.anim-4 #tri21 .triangle-side { border-radius: 100%;
}
.anim-4 #tri21:before, .anim-4 #tri21:after { opacity: 0;
}
#tri22 { z-index: 22;
}
#tri22 .triangle-side { background-position: -94px -174px;
}
.anim-1 #tri22 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri22 { animation: domino 25s 2200ms infinite forwards;
}
.anim-3 #tri22 { animation: pop-out 25s 2200ms infinite forwards;
}
.anim-4 #tri22 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri22 .triangle-side { border-radius: 100%;
}
.anim-4 #tri22:before, .anim-4 #tri22:after { opacity: 0;
}
#tri23 { z-index: 23;
}
#tri23 .triangle-side { background-position: -186px -174px;
}
.anim-1 #tri23 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri23 { animation: domino 25s 2300ms infinite forwards;
}
.anim-3 #tri23 { animation: pop-out 25s 2300ms infinite forwards;
}
.anim-4 #tri23 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri23 .triangle-side { border-radius: 100%;
}
.anim-4 #tri23:before, .anim-4 #tri23:after { opacity: 0;
}
#tri24 { z-index: 24;
}
#tri24 .triangle-side { background-position: -278px -174px;
}
.anim-1 #tri24 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri24 { animation: domino 25s 2400ms infinite forwards;
}
.anim-3 #tri24 { animation: pop-out 25s 2400ms infinite forwards;
}
.anim-4 #tri24 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri24 .triangle-side { border-radius: 100%;
}
.anim-4 #tri24:before, .anim-4 #tri24:after { opacity: 0;
}
#tri25 { z-index: 25;
}
#tri25 .triangle-side { background-position: -370px -174px;
}
.anim-1 #tri25 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri25 { animation: domino 25s 2500ms infinite forwards;
}
.anim-3 #tri25 { animation: pop-out 25s 2500ms infinite forwards;
}
.anim-4 #tri25 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri25 .triangle-side { border-radius: 100%;
}
.anim-4 #tri25:before, .anim-4 #tri25:after { opacity: 0;
}
#tri26 { z-index: 26;
}
#tri26 .triangle-side { background-position: -462px -174px;
}
.anim-1 #tri26 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri26 { animation: domino 25s 2600ms infinite forwards;
}
.anim-3 #tri26 { animation: pop-out 25s 2600ms infinite forwards;
}
.anim-4 #tri26 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri26 .triangle-side { border-radius: 100%;
}
.anim-4 #tri26:before, .anim-4 #tri26:after { opacity: 0;
}
#tri27 { z-index: 27;
}
#tri27 .triangle-side { background-position: -554px -174px;
}
.anim-1 #tri27 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri27 { animation: domino 25s 2700ms infinite forwards;
}
.anim-3 #tri27 { animation: pop-out 25s 2700ms infinite forwards;
}
.anim-4 #tri27 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri27 .triangle-side { border-radius: 100%;
}
.anim-4 #tri27:before, .anim-4 #tri27:after { opacity: 0;
}
#tri28 { z-index: 28;
}
#tri28 .triangle-side { background-position: -646px -174px;
}
.anim-1 #tri28 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri28 { animation: domino 25s 2800ms infinite forwards;
}
.anim-3 #tri28 { animation: pop-out 25s 2800ms infinite forwards;
}
.anim-4 #tri28 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri28 .triangle-side { border-radius: 100%;
}
.anim-4 #tri28:before, .anim-4 #tri28:after { opacity: 0;
}
#tri29 { z-index: 29;
}
#tri29 .triangle-side { background-position: -738px -174px;
}
.anim-1 #tri29 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri29 { animation: domino 25s 2900ms infinite forwards;
}
.anim-3 #tri29 { animation: pop-out 25s 2900ms infinite forwards;
}
.anim-4 #tri29 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri29 .triangle-side { border-radius: 100%;
}
.anim-4 #tri29:before, .anim-4 #tri29:after { opacity: 0;
}
#tri30 { z-index: 30;
}
#tri30 .triangle-side { background-position: -830px -174px;
}
.anim-1 #tri30 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri30 { animation: domino 25s 3000ms infinite forwards;
}
.anim-3 #tri30 { animation: pop-out 25s 3000ms infinite forwards;
}
.anim-4 #tri30 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri30 .triangle-side { border-radius: 100%;
}
.anim-4 #tri30:before, .anim-4 #tri30:after { opacity: 0;
}
#tri31 { z-index: 29;
}
#tri31 .triangle-side { background-position: -2px -260px;
}
.anim-1 #tri31 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri31 { animation: domino 25s 3100ms infinite forwards;
}
.anim-3 #tri31 { animation: pop-out 25s 3100ms infinite forwards;
}
.anim-4 #tri31 { animation: shape-shifter 20s 1200ms infinite forwards;
}
.anim-4 #tri31 .triangle-side { border-radius: 100%;
}
.anim-4 #tri31:before, .anim-4 #tri31:after { opacity: 0;
}
#tri32 { z-index: 28;
}
#tri32 .triangle-side { background-position: -94px -260px;
}
.anim-1 #tri32 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri32 { animation: domino 25s 3200ms infinite forwards;
}
.anim-3 #tri32 { animation: pop-out 25s 3200ms infinite forwards;
}
.anim-4 #tri32 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri32 .triangle-side { border-radius: 100%;
}
.anim-4 #tri32:before, .anim-4 #tri32:after { opacity: 0;
}
#tri33 { z-index: 27;
}
#tri33 .triangle-side { background-position: -186px -260px;
}
.anim-1 #tri33 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri33 { animation: domino 25s 3300ms infinite forwards;
}
.anim-3 #tri33 { animation: pop-out 25s 3300ms infinite forwards;
}
.anim-4 #tri33 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri33 .triangle-side { border-radius: 100%;
}
.anim-4 #tri33:before, .anim-4 #tri33:after { opacity: 0;
}
#tri34 { z-index: 26;
}
#tri34 .triangle-side { background-position: -278px -260px;
}
.anim-1 #tri34 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri34 { animation: domino 25s 3400ms infinite forwards;
}
.anim-3 #tri34 { animation: pop-out 25s 3400ms infinite forwards;
}
.anim-4 #tri34 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri34 .triangle-side { border-radius: 100%;
}
.anim-4 #tri34:before, .anim-4 #tri34:after { opacity: 0;
}
#tri35 { z-index: 25;
}
#tri35 .triangle-side { background-position: -370px -260px;
}
.anim-1 #tri35 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri35 { animation: domino 25s 3500ms infinite forwards;
}
.anim-3 #tri35 { animation: pop-out 25s 3500ms infinite forwards;
}
.anim-4 #tri35 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri35 .triangle-side { border-radius: 100%;
}
.anim-4 #tri35:before, .anim-4 #tri35:after { opacity: 0;
}
#tri36 { z-index: 24;
}
#tri36 .triangle-side { background-position: -462px -260px;
}
.anim-1 #tri36 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri36 { animation: domino 25s 3600ms infinite forwards;
}
.anim-3 #tri36 { animation: pop-out 25s 3600ms infinite forwards;
}
.anim-4 #tri36 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri36 .triangle-side { border-radius: 100%;
}
.anim-4 #tri36:before, .anim-4 #tri36:after { opacity: 0;
}
#tri37 { z-index: 23;
}
#tri37 .triangle-side { background-position: -554px -260px;
}
.anim-1 #tri37 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri37 { animation: domino 25s 3700ms infinite forwards;
}
.anim-3 #tri37 { animation: pop-out 25s 3700ms infinite forwards;
}
.anim-4 #tri37 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri37 .triangle-side { border-radius: 100%;
}
.anim-4 #tri37:before, .anim-4 #tri37:after { opacity: 0;
}
#tri38 { z-index: 22;
}
#tri38 .triangle-side { background-position: -646px -260px;
}
.anim-1 #tri38 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri38 { animation: domino 25s 3800ms infinite forwards;
}
.anim-3 #tri38 { animation: pop-out 25s 3800ms infinite forwards;
}
.anim-4 #tri38 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri38 .triangle-side { border-radius: 100%;
}
.anim-4 #tri38:before, .anim-4 #tri38:after { opacity: 0;
}
#tri39 { z-index: 21;
}
#tri39 .triangle-side { background-position: -738px -260px;
}
.anim-1 #tri39 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri39 { animation: domino 25s 3900ms infinite forwards;
}
.anim-3 #tri39 { animation: pop-out 25s 3900ms infinite forwards;
}
.anim-4 #tri39 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri39 .triangle-side { border-radius: 100%;
}
.anim-4 #tri39:before, .anim-4 #tri39:after { opacity: 0;
}
#tri40 { z-index: 20;
}
#tri40 .triangle-side { background-position: -830px -260px;
}
.anim-1 #tri40 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri40 { animation: domino 25s 4000ms infinite forwards;
}
.anim-3 #tri40 { animation: pop-out 25s 4000ms infinite forwards;
}
.anim-4 #tri40 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri40 .triangle-side { border-radius: 100%;
}
.anim-4 #tri40:before, .anim-4 #tri40:after { opacity: 0;
}
#tri41 { z-index: 19;
}
#tri41 .triangle-side { background-position: -2px -346px;
}
.anim-1 #tri41 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri41 { animation: domino 25s 4100ms infinite forwards;
}
.anim-3 #tri41 { animation: pop-out 25s 4100ms infinite forwards;
}
.anim-4 #tri41 { animation: shape-shifter 20s 1500ms infinite forwards;
}
.anim-4 #tri41 .triangle-side { border-radius: 100%;
}
.anim-4 #tri41:before, .anim-4 #tri41:after { opacity: 0;
}
#tri42 { z-index: 18;
}
#tri42 .triangle-side { background-position: -94px -346px;
}
.anim-1 #tri42 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri42 { animation: domino 25s 4200ms infinite forwards;
}
.anim-3 #tri42 { animation: pop-out 25s 4200ms infinite forwards;
}
.anim-4 #tri42 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri42 .triangle-side { border-radius: 100%;
}
.anim-4 #tri42:before, .anim-4 #tri42:after { opacity: 0;
}
#tri43 { z-index: 17;
}
#tri43 .triangle-side { background-position: -186px -346px;
}
.anim-1 #tri43 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri43 { animation: domino 25s 4300ms infinite forwards;
}
.anim-3 #tri43 { animation: pop-out 25s 4300ms infinite forwards;
}
.anim-4 #tri43 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri43 .triangle-side { border-radius: 100%;
}
.anim-4 #tri43:before, .anim-4 #tri43:after { opacity: 0;
}
#tri44 { z-index: 16;
}
#tri44 .triangle-side { background-position: -278px -346px;
}
.anim-1 #tri44 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri44 { animation: domino 25s 4400ms infinite forwards;
}
.anim-3 #tri44 { animation: pop-out 25s 4400ms infinite forwards;
}
.anim-4 #tri44 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri44 .triangle-side { border-radius: 100%;
}
.anim-4 #tri44:before, .anim-4 #tri44:after { opacity: 0;
}
#tri45 { z-index: 15;
}
#tri45 .triangle-side { background-position: -370px -346px;
}
.anim-1 #tri45 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri45 { animation: domino 25s 4500ms infinite forwards;
}
.anim-3 #tri45 { animation: pop-out 25s 4500ms infinite forwards;
}
.anim-4 #tri45 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri45 .triangle-side { border-radius: 100%;
}
.anim-4 #tri45:before, .anim-4 #tri45:after { opacity: 0;
}
#tri46 { z-index: 14;
}
#tri46 .triangle-side { background-position: -462px -346px;
}
.anim-1 #tri46 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri46 { animation: domino 25s 4600ms infinite forwards;
}
.anim-3 #tri46 { animation: pop-out 25s 4600ms infinite forwards;
}
.anim-4 #tri46 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri46 .triangle-side { border-radius: 100%;
}
.anim-4 #tri46:before, .anim-4 #tri46:after { opacity: 0;
}
#tri47 { z-index: 13;
}
#tri47 .triangle-side { background-position: -554px -346px;
}
.anim-1 #tri47 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri47 { animation: domino 25s 4700ms infinite forwards;
}
.anim-3 #tri47 { animation: pop-out 25s 4700ms infinite forwards;
}
.anim-4 #tri47 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri47 .triangle-side { border-radius: 100%;
}
.anim-4 #tri47:before, .anim-4 #tri47:after { opacity: 0;
}
#tri48 { z-index: 12;
}
#tri48 .triangle-side { background-position: -646px -346px;
}
.anim-1 #tri48 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri48 { animation: domino 25s 4800ms infinite forwards;
}
.anim-3 #tri48 { animation: pop-out 25s 4800ms infinite forwards;
}
.anim-4 #tri48 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri48 .triangle-side { border-radius: 100%;
}
.anim-4 #tri48:before, .anim-4 #tri48:after { opacity: 0;
}
#tri49 { z-index: 11;
}
#tri49 .triangle-side { background-position: -738px -346px;
}
.anim-1 #tri49 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri49 { animation: domino 25s 4900ms infinite forwards;
}
.anim-3 #tri49 { animation: pop-out 25s 4900ms infinite forwards;
}
.anim-4 #tri49 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri49 .triangle-side { border-radius: 100%;
}
.anim-4 #tri49:before, .anim-4 #tri49:after { opacity: 0;
}
#tri50 { z-index: 10;
}
#tri50 .triangle-side { background-position: -830px -346px;
}
.anim-1 #tri50 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri50 { animation: domino 25s 5000ms infinite forwards;
}
.anim-3 #tri50 { animation: pop-out 25s 5000ms infinite forwards;
}
.anim-4 #tri50 { animation: shape-shifter 20s 4200ms infinite forwards;
}
.anim-4 #tri50 .triangle-side { border-radius: 100%;
}
.anim-4 #tri50:before, .anim-4 #tri50:after { opacity: 0;
}
#tri51 { z-index: 9;
}
#tri51 .triangle-side { background-position: -2px -432px;
}
.anim-1 #tri51 { animation: column-chase 10s 100ms infinite forwards;
}
.anim-2 #tri51 { animation: domino 25s 5100ms infinite forwards;
}
.anim-3 #tri51 { animation: pop-out 25s 5100ms infinite forwards;
}
.anim-4 #tri51 { animation: shape-shifter 20s 1800ms infinite forwards;
}
.anim-4 #tri51 .triangle-side { border-radius: 100%;
}
.anim-4 #tri51:before, .anim-4 #tri51:after { opacity: 0;
}
#tri52 { z-index: 8;
}
#tri52 .triangle-side { background-position: -94px -432px;
}
.anim-1 #tri52 { animation: column-chase 10s 200ms infinite forwards;
}
.anim-2 #tri52 { animation: domino 25s 5200ms infinite forwards;
}
.anim-3 #tri52 { animation: pop-out 25s 5200ms infinite forwards;
}
.anim-4 #tri52 { animation: shape-shifter 20s 2100ms infinite forwards;
}
.anim-4 #tri52 .triangle-side { border-radius: 100%;
}
.anim-4 #tri52:before, .anim-4 #tri52:after { opacity: 0;
}
#tri53 { z-index: 7;
}
#tri53 .triangle-side { background-position: -186px -432px;
}
.anim-1 #tri53 { animation: column-chase 10s 300ms infinite forwards;
}
.anim-2 #tri53 { animation: domino 25s 5300ms infinite forwards;
}
.anim-3 #tri53 { animation: pop-out 25s 5300ms infinite forwards;
}
.anim-4 #tri53 { animation: shape-shifter 20s 2400ms infinite forwards;
}
.anim-4 #tri53 .triangle-side { border-radius: 100%;
}
.anim-4 #tri53:before, .anim-4 #tri53:after { opacity: 0;
}
#tri54 { z-index: 6;
}
#tri54 .triangle-side { background-position: -278px -432px;
}
.anim-1 #tri54 { animation: column-chase 10s 400ms infinite forwards;
}
.anim-2 #tri54 { animation: domino 25s 5400ms infinite forwards;
}
.anim-3 #tri54 { animation: pop-out 25s 5400ms infinite forwards;
}
.anim-4 #tri54 { animation: shape-shifter 20s 2700ms infinite forwards;
}
.anim-4 #tri54 .triangle-side { border-radius: 100%;
}
.anim-4 #tri54:before, .anim-4 #tri54:after { opacity: 0;
}
#tri55 { z-index: 5;
}
#tri55 .triangle-side { background-position: -370px -432px;
}
.anim-1 #tri55 { animation: column-chase 10s 500ms infinite forwards;
}
.anim-2 #tri55 { animation: domino 25s 5500ms infinite forwards;
}
.anim-3 #tri55 { animation: pop-out 25s 5500ms infinite forwards;
}
.anim-4 #tri55 { animation: shape-shifter 20s 3000ms infinite forwards;
}
.anim-4 #tri55 .triangle-side { border-radius: 100%;
}
.anim-4 #tri55:before, .anim-4 #tri55:after { opacity: 0;
}
#tri56 { z-index: 4;
}
#tri56 .triangle-side { background-position: -462px -432px;
}
.anim-1 #tri56 { animation: column-chase 10s 600ms infinite forwards;
}
.anim-2 #tri56 { animation: domino 25s 5600ms infinite forwards;
}
.anim-3 #tri56 { animation: pop-out 25s 5600ms infinite forwards;
}
.anim-4 #tri56 { animation: shape-shifter 20s 3300ms infinite forwards;
}
.anim-4 #tri56 .triangle-side { border-radius: 100%;
}
.anim-4 #tri56:before, .anim-4 #tri56:after { opacity: 0;
}
#tri57 { z-index: 3;
}
#tri57 .triangle-side { background-position: -554px -432px;
}
.anim-1 #tri57 { animation: column-chase 10s 700ms infinite forwards;
}
.anim-2 #tri57 { animation: domino 25s 5700ms infinite forwards;
}
.anim-3 #tri57 { animation: pop-out 25s 5700ms infinite forwards;
}
.anim-4 #tri57 { animation: shape-shifter 20s 3600ms infinite forwards;
}
.anim-4 #tri57 .triangle-side { border-radius: 100%;
}
.anim-4 #tri57:before, .anim-4 #tri57:after { opacity: 0;
}
#tri58 { z-index: 2;
}
#tri58 .triangle-side { background-position: -646px -432px;
}
.anim-1 #tri58 { animation: column-chase 10s 800ms infinite forwards;
}
.anim-2 #tri58 { animation: domino 25s 5800ms infinite forwards;
}
.anim-3 #tri58 { animation: pop-out 25s 5800ms infinite forwards;
}
.anim-4 #tri58 { animation: shape-shifter 20s 3900ms infinite forwards;
}
.anim-4 #tri58 .triangle-side { border-radius: 100%;
}
.anim-4 #tri58:before, .anim-4 #tri58:after { opacity: 0;
}
#tri59 { z-index: 1;
}
#tri59 .triangle-side { background-position: -738px -432px;
}
.anim-1 #tri59 { animation: column-chase 10s 900ms infinite forwards;
}
.anim-2 #tri59 { animation: domino 25s 5900ms infinite forwards;
}
.anim-3 #tri59 { animation: pop-out 25s 5900ms infinite forwards;
}
.anim-4 #tri59 { animation: shape-shifter 20s 4200ms infinite forwards;
}
.anim-4 #tri59 .triangle-side { border-radius: 100%;
}
.anim-4 #tri59:before, .anim-4 #tri59:after { opacity: 0;
}
#tri60 { z-index: 0;
}
#tri60 .triangle-side { background-position: -830px -432px;
}
.anim-1 #tri60 { animation: column-chase 10s 1000ms infinite forwards;
}
.anim-2 #tri60 { animation: domino 25s 6000ms infinite forwards;
}
.anim-3 #tri60 { animation: pop-out 25s 6000ms infinite forwards;
}
.anim-4 #tri60 { animation: shape-shifter 20s 4500ms infinite forwards;
}
.anim-4 #tri60 .triangle-side { border-radius: 100%;
}
.anim-4 #tri60:before, .anim-4 #tri60:after { opacity: 0;
}
@keyframes column-chase { 0% { transform: rotateY(-60deg); } 5% { transform: rotateY(60deg); } 33% { transform: rotateY(60deg); } 38% { transform: rotateY(180deg); } 66% { transform: rotateY(180deg); } 71% { transform: rotateY(300deg); } 100% { transform: rotateY(300deg); }
}
@keyframes domino { 0% { transform: rotateY(-60deg); } 5% { transform: rotateY(60deg); } 33% { transform: rotateY(60deg); } 38% { transform: rotateY(180deg); } 66% { transform: rotateY(180deg); } 71% { transform: rotateY(300deg); } 100% { transform: rotateY(300deg); }
}
@keyframes pop-out { 0% { transform: translateZ(0) rotateY(-60deg); } 1% { transform: translateZ(200px) rotateY(-60deg); } 4% { transform: translateZ(200px) rotateY(420deg); } 5% { transform: translateZ(0) rotateY(420deg); } 33% { transform: translateZ(0) rotateY(420deg); } 34% { transform: translateZ(200px) rotateY(420deg); } 37% { transform: translateZ(200px) rotateY(900deg); } 38% { transform: translateZ(0) rotateY(900deg); } 66% { transform: translateZ(0) rotateY(900deg); } 67% { transform: translateZ(200px) rotateY(900deg); } 70% { transform: translateZ(200px) rotateY(1380deg); } 71% { transform: translateZ(0) rotateY(1380deg); } 100% { transform: translateZ(0) rotateY(1380deg); }
}
@keyframes shape-shifter { 0% { transform: rotateY(-60deg); } 1% { transform: rotateY(-60deg); } 5% { transform: rotateY(420deg); } 33% { transform: rotateY(420deg); } 34% { transform: rotateY(420deg); } 38% { transform: rotateY(900deg); } 66% { transform: rotateY(900deg); } 67% { transform: rotateY(900deg); } 71% { transform: rotateY(1380deg); } 100% { transform: rotateY(1380deg); }
}
nav { background: #F7F7F5; height: 50px; line-height: 50px; box-shadow: 0px 1px 1px 0px #D8D8D8; opacity: 1; transition: opacity 2s;
}
nav ul { display: inline-block;
}
nav ul.actions li:after { content: ""; display: block; position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px; background: orange; transition: bottom 100ms;
}
nav ul.actions li:hover:after { bottom: 0;
}
nav ul.settings { position: absolute; top: 0; right: 0;
}
nav ul.settings li { color: #444;
}
nav ul.settings li * { vertical-align: middle;
}
nav ul li { list-style-type: none; display: inline-block; padding-left: 10px; padding-right: 10px; color: #448ab8; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden;
}
nav ul li:first-child { margin-left: 10px;
}
nav ul li:last-child { margin-right: 10px;
}
.opacity { appearance: none; background: #444; width: 50px; height: 14px; border-radius: 8px; padding-right: 2px; padding-left: 2px;
}
.opacity::-webkit-slider-thumb { appearance: none; background: #F7F7F5; width: 10px; height: 10px; border-radius: 100%;
}
.anim-1 ul.actions li:nth-child(1) { color: orange;
}
.anim-1 ul.actions li:nth-child(1):after { bottom: 0;
}
.anim-2 ul.actions li:nth-child(2) { color: orange;
}
.anim-2 ul.actions li:nth-child(2):after { bottom: 0;
}
.anim-3 ul.actions li:nth-child(3) { color: orange;
}
.anim-3 ul.actions li:nth-child(3):after { bottom: 0;
}
.anim-4 ul.actions li:nth-child(4) { color: orange;
}
.anim-4 ul.actions li:nth-child(4):after { bottom: 0;
}
body { perspective: 1200px; perspective-origin: 50% 50%; background: #EAEAEA; font-family: 'Open Sans', sans-serif; font-weight: 300;
}
.preload .wall { transition: none; transform: rotateX(-90deg) translateZ(-100px);
}
.preload nav { transition: none; opacity: 0;
}

Triangles From Another Dimension - Script Codes JS Codes

var wallElement = $(".wall");
var opacityElement = $(".opacity");
var povHorizontalValues = [0, 132, 228];
var povHorizontalState = 0;
var povVerticalValues = [0, 90];
var povVerticalState = 0;
$(".actions li").on("click", function(e) { var toggleOff = false; if ($("html").hasClass($(this).attr("data-name"))) { toggleOff = true; } $("html").removeClass(function(index, css) { return (css.match (/\banim-\S+/g) || []).join(' '); }); if (!toggleOff) { $("html").addClass($(this).attr("data-name")); }
});
opacityElement.on("input", function(e) { var opacityValue = $(this).val(); if (opacityValue) { $(".triangle").css("opacity", opacityValue/100); }
});
function setPOV() { var transformValue = ""; var povHorizontal = parseInt(wallElement.data("pov-horizontal")); var povVertical = parseInt(wallElement.data("pov-vertical")); if (isNaN(povHorizontal)) povHorizontal = 0; if (isNaN(povVertical)) povVertical = 0; if (povHorizontal > 0) { transformValue += "rotateY(" + povHorizontal + "deg)"; } if (povVertical > 0) { transformValue += " rotateX(-" + povVertical + "deg) translateZ(-100px)"; } wallElement.css("transform", transformValue);
}
function rotateHorizontal() { var currentPovValue = parseInt(wallElement.data("pov-horizontal")); var newPovState = povHorizontalState + 1; var delta, newPovValue; if (isNaN(currentPovValue)) currentPovValue = 0; if (newPovState > (povHorizontalValues.length - 1)) { newPovState = 0; delta = 360 - povHorizontalValues[povHorizontalState]; } else { delta = povHorizontalValues[newPovState] - povHorizontalValues[povHorizontalState]; } newPovValue = currentPovValue + delta; povHorizontalState = newPovState; wallElement.data("pov-horizontal", newPovValue); setPOV();
}
function rotateVertical() { var currentPovValue = parseInt(wallElement.data("pov-vertical")); var newPovState = povVerticalState + 1; var newPovValue; if (isNaN(currentPovValue)) currentPovValue = 0; if (newPovState > (povVerticalValues.length - 1)) { newPovState = 0; } newPovValue = povVerticalValues[newPovState]; povVerticalState = newPovState; wallElement.data("pov-vertical", newPovValue); setPOV();
}
function toggleOpacity() { var maxOpacityValue = opacityElement.attr("max"); var minOpacityValue = opacityElement.attr("min"); var currentOpacityValue = opacityElement.val(); if ((maxOpacityValue - currentOpacityValue) < (currentOpacityValue - minOpacityValue)) { opacityElement.val(minOpacityValue); $(".triangle").css("opacity", minOpacityValue/100); } else { opacityElement.val(maxOpacityValue); $(".triangle").css("opacity", maxOpacityValue/100); }
}
$(document).ready(function() { setTimeout(function() { $("html").removeClass("preload"); }, 2000);
});
Triangles From Another Dimension - Script Codes
Triangles From Another Dimension - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 07, 2022
Rating 4.5
Size 15,606 Kb
Views 22,264
Do you need developer help for Triangles From Another Dimension?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yogev Ahuvia (kindofone) Script Codes
Name
Reactive CSS Transitions
Subtle Buttons
A Circular Form
Live Bricks
The CodePen Logo
Playing with fixed header
Humble Progress
Real-Time Love Meter
3D Cube of 3D Balls
CSS-Only Countdown Clock
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!