LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@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;
}
JS
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);
});
Host Instantly Drag and Drop Website Builder

 

Description

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.
Term
Mon, 11/27/2017 - 21:35

Related Codes

Pen ID
Pen ID
Pen ID