LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Popular This Week
These Goats Are Pretty Cool
Facebook now reads people's minds
What did Uber do this time?
Meteor shower to occur Friday night
Jellyfish Cam Offers Stunning Views
Oculus Rift and VR
Your favorite gadgets ever
A new planet found near us
Project Microsoft Hololens
Oculus Rift and Minecraft
Your favorite games ever
Jak and Daxter reboot
Silicon Valley Sparks Debate
Fast and Furious needs to slow down
Deadpool sequel might not suck
Why are you reading these?
CSS
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
#app {
  height: 555px;
  width: 315px;
  font-family: Open Sans, sans-serif;
  background-image: -webkit-linear-gradient(left, #5D3384, #335679);
  background-image: linear-gradient(to right, #5D3384, #335679);
  background-size: cover;
  overflow: hidden;
  --not-panning: calc(1 + -1 * var(--panning));
  z-index: 1;
  box-shadow: 0 0 8rem rgba(0, 0, 0, 0.3);
}
#app[data-state="START"]:not([data-pending]):after {
  content: '';
  position: absolute;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 100;
  bottom: 30%;
  right: 30%;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
  -webkit-animation: hint 2s 5s cubic-bezier(0.6, 0, 0.2, 1) both infinite;
          animation: hint 2s 5s cubic-bezier(0.6, 0, 0.2, 1) both infinite;
}
@-webkit-keyframes hint {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50%, 80% {
    opacity: 1;
    -webkit-transform: translateY(-15rem);
            transform: translateY(-15rem);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-15rem);
            transform: translateY(-15rem);
  }
}
@keyframes hint {
  from {
    opacity: 0;
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50%, 80% {
    opacity: 1;
    -webkit-transform: translateY(-15rem);
            transform: translateY(-15rem);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-15rem);
            transform: translateY(-15rem);
  }
}
svg.ui-gradient {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vmax;
  height: 100vmax;
  -webkit-transform: scale(3, 2);
          transform: scale(3, 2);
}
svg.ui-gradient stop {
  -webkit-transition: stop-color 0.6s ease-out;
  transition: stop-color 0.6s ease-out;
}

.ui-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  will-change: transform;
}

.ui-nav-buttons {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}

.ui-icon {
  width: 2rem;
  height: 2rem;
}
.ui-icon.-search {
  border: 3px solid white;
  border-radius: 50%;
  -webkit-transform: scale(0.65) rotate(-45deg);
          transform: scale(0.65) rotate(-45deg);
}
.ui-icon.-search:after {
  content: '';
  position: absolute;
  top: 100%;
  width: 3px;
  height: 75%;
  background-color: white;
  left: calc(50% - 1px);
}
.ui-icon.-menu {
  width: 1.5rem;
  height: 2px;
  background-color: #fff;
  -webkit-transform: scaleX(0.8);
          transform: scaleX(0.8);
}
.ui-icon.-menu, .ui-icon.-menu:before, .ui-icon.-menu:after {
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
}
.ui-icon.-menu:before, .ui-icon.-menu:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100%;
  width: 120%;
}
.ui-icon.-menu:before {
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.ui-icon.-menu:after {
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
#app:not([data-state="START"]) .ui-icon.-menu {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
#app:not([data-state="START"]) .ui-icon.-menu:before {
  -webkit-transform: rotate(-45deg) scaleX(0.5);
          transform: rotate(-45deg) scaleX(0.5);
}
#app:not([data-state="START"]) .ui-icon.-menu:after {
  -webkit-transform: rotate(45deg) scaleX(0.5);
          transform: rotate(45deg) scaleX(0.5);
}

.ui-nav-items {
  position: absolute;
  bottom: 1rem;
  left: 60px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform calc(var(--not-panning) * .6s) ease;
  transition: -webkit-transform calc(var(--not-panning) * .6s) ease;
  transition: transform calc(var(--not-panning) * .6s) ease;
  transition: transform calc(var(--not-panning) * .6s) ease, -webkit-transform calc(var(--not-panning) * .6s) ease;
  will-change: transform;
}

.ui-nav-item {
  display: inline-block;
  height: 250px;
  width: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: white;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(calc((var(--delta-left) + var(--py) * var(--delta-left)) * 1px), calc((var(--delta-top) + var(--py) * var(--delta-top)) * 1px), 0);
          transform: translate3d(calc((var(--delta-left) + var(--py) * var(--delta-left)) * 1px), calc((var(--delta-top) + var(--py) * var(--delta-top)) * 1px), 0);
  -webkit-transition: -webkit-transform calc(var(--not-panning) * .6s) ease;
  transition: -webkit-transform calc(var(--not-panning) * .6s) ease;
  transition: transform calc(var(--not-panning) * .6s) ease;
  transition: transform calc(var(--not-panning) * .6s) ease, -webkit-transform calc(var(--not-panning) * .6s) ease;
  will-change: transform;
  pointer-events: none;
}
.ui-nav-item:before {
  pointer-events: auto;
}
.ui-nav-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
@-moz-document url-prefix() {
  .ui-nav-item:before {
    top: 0;
    left: 0;
  }
}
.ui-nav-item[data-key="1"]::before {
  background-image: -webkit-linear-gradient(top left, var(--colors-1-0), var(--colors-1-1));
  background-image: linear-gradient(to bottom right, var(--colors-1-0), var(--colors-1-1));
}
.ui-nav-item[data-key="2"]::before {
  background-image: -webkit-linear-gradient(top left, var(--colors-2-0), var(--colors-2-1));
  background-image: linear-gradient(to bottom right, var(--colors-2-0), var(--colors-2-1));
}
.ui-nav-item[data-key="3"]::before {
  background-image: -webkit-linear-gradient(top left, var(--colors-3-0), var(--colors-3-1));
  background-image: linear-gradient(to bottom right, var(--colors-3-0), var(--colors-3-1));
}
.ui-nav-item[data-key="4"]::before {
  background-image: -webkit-linear-gradient(top left, var(--colors-4-0), var(--colors-4-1));
  background-image: linear-gradient(to bottom right, var(--colors-4-0), var(--colors-4-1));
}

.ui-nav-item-title {
  -webkit-transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out, -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.25ch;
  width: 100%;
  text-align: left;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.ui-nav-item-title > span {
  -webkit-transition: inherit;
  transition: inherit;
  display: inline-block;
  -webkit-transform: translateX(-2rem);
          transform: translateX(-2rem);
}

#app[data-state="START"] .ui-nav-item {
  margin-top: -70px;
  margin-bottom: -70px;
}
#app[data-state="START"] .ui-nav-item:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transform: scaleY(0.44);
          transform: scaleY(0.44);
}

#app[data-state="NAV2"][data-prev-state="NAV1"][data-pending]:not(#important) .ui-nav-items {
  -webkit-transform: translateX(var(--x)) translateY(calc(var(--dy) * .25px)) !important;
          transform: translateX(var(--x)) translateY(calc(var(--dy) * .25px)) !important;
}
#app[data-state="NAV2"][data-prev-state="NAV1"][data-pending]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(100%)) !important;
          transform: translateZ(2px) translateX(calc(100%)) !important;
  opacity: calc(1 + 2 * var(--py)) !important;
}
#app[data-state="NAV2"][data-prev-state="NAV1"][data-pending]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-50% - 100% * var(--py)));
          transform: translateZ(2px) translateX(calc(-50% - 100% * var(--py)));
}
#app[data-state="NAV2"][data-prev-state="NAV1"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(0) !important;
          transform: translateZ(2px) translateX(0) !important;
  opacity: calc(1 + 2 * var(--py)) !important;
}
#app[data-state="NAV2"][data-prev-state="NAV1"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-50% + 100% * var(--py)));
          transform: translateZ(2px) translateX(calc(-50% + 100% * var(--py)));
}

#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending]:not(#important) .ui-nav-items {
  -webkit-transform: translateX(var(--x)) translateY(calc(var(--dy) * 1px)) !important;
          transform: translateX(var(--x)) translateY(calc(var(--dy) * 1px)) !important;
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(150%)) !important;
          transform: translateZ(2px) translateX(calc(150%)) !important;
  opacity: calc(-1 * var(--py)) !important;
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-50% + 100% * var(--py))) !important;
          transform: translateZ(2px) translateX(calc(-50% + 100% * var(--py))) !important;
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(-50%) !important;
          transform: translateZ(2px) translateX(-50%) !important;
  opacity: calc(-1 * var(--py)) !important;
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-50% - 100% * var(--py))) !important;
          transform: translateZ(2px) translateX(calc(-50% - 100% * var(--py))) !important;
}

#app[data-state="NAV2"]:not(#important) .ui-nav-items {
  top: -92.5px;
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item-title {
  opacity: 0;
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item-title > span {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(150% - var(--dx) * 1px));
          transform: translateZ(2px) translateX(calc(150% - var(--dx) * 1px));
  opacity: calc(var(--px));
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.prev-active .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-100% + 50% * var(--px)));
          transform: translateZ(2px) translateX(calc(-100% + 50% * var(--px)));
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(50% - var(--dx) * 1px));
          transform: translateZ(2px) translateX(calc(50% - var(--dx) * 1px));
  opacity: calc(1 - var(--px-abs));
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.active > .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(-50% + 50% * var(--px)));
          transform: translateZ(2px) translateX(calc(-50% + 50% * var(--px)));
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(-50% - var(--dx) * 1px));
          transform: translateZ(2px) translateX(calc(-50% - var(--dx) * 1px));
  opacity: calc(-1 * var(--px));
}
#app[data-state="NAV2"]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(calc(50% * var(--px)));
          transform: translateZ(2px) translateX(calc(50% * var(--px)));
}

#app[data-state="START"][data-pending]:not(#important) .ui-nav-item::before {
  -webkit-transform: scaleY(calc((250 + (140 * var(--py))) / 250));
          transform: scaleY(calc((250 + (140 * var(--py))) / 250));
}
#app[data-state="START"][data-pending]:not(#important) .ui-nav-item.active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(50% + 50% * var(--py)));
          transform: translateZ(2px) translateX(calc(50% + 50% * var(--py)));
}
#app[data-state="START"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(0);
          transform: translateZ(2px) translateX(0);
}
#app[data-state="START"][data-pending]:not(#important) .ui-nav-item.prev-active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(100% + 100% * var(--py)));
          transform: translateZ(2px) translateX(calc(100% + 100% * var(--py)));
}
#app[data-state="START"][data-pending]:not(#important) .ui-nav-item-title {
  opacity: 1;
  -webkit-transform: translateZ(2px) translateX(calc(50% + 50% * var(--py)));
          transform: translateZ(2px) translateX(calc(50% + 50% * var(--py)));
}

#app[data-state="START"]:not([data-pending]) stop:first-child {
  stop-color: #231133;
}
#app[data-state="START"]:not([data-pending]) stop:last-child {
  stop-color: #2F6692;
}

#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending] .ui-nav-items {
  -webkit-transform: translateX(var(--x)) translateY(calc(var(--dy) * 1px)) !important;
          transform: translateX(var(--x)) translateY(calc(var(--dy) * 1px)) !important;
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending] .ui-nav-item.active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(50%);
          transform: translateZ(2px) translateX(50%);
}

#app[data-state="NAV1"]:not([data-pending]) .ui-nav-item::before,
#app[data-state="NAV2"] .ui-nav-item::before {
  width: 300%;
}

#app[data-state="NAV1"][data-prev-state="START"][data-pending] .ui-nav-item.prev-active::before {
  opacity: 1;
}

#app[data-state="NAV1"] .ui-nav-item.active > .ui-nav-item-title {
  opacity: calc(1 - var(--px-abs));
  -webkit-transform: translateZ(2px) translateX(calc(50% - var(--px) * 50%));
          transform: translateZ(2px) translateX(calc(50% - var(--px) * 50%));
}
#app[data-state="NAV1"] .ui-nav-item.active > .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(-50%) scale(1.1);
          transform: translateZ(2px) translateX(-50%) scale(1.1);
}
#app[data-state="NAV1"] .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  opacity: calc(-1 * var(--px) + .5);
  -webkit-transform: translateZ(2px) translateX(calc(-50% * var(--px)));
          transform: translateZ(2px) translateX(calc(-50% * var(--px)));
}
#app[data-state="NAV1"] .ui-nav-item.active + * ~ .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(-50% - var(--px) * 50%));
          transform: translateZ(2px) translateX(calc(-50% - var(--px) * 50%));
}
#app[data-state="NAV1"] .ui-nav-item.prev-active > .ui-nav-item-title {
  opacity: calc(var(--px) + .5);
  -webkit-transform: translateZ(2px) translateX(calc(100% - 50% * var(--px)));
          transform: translateZ(2px) translateX(calc(100% - 50% * var(--px)));
}
#app[data-state="NAV1"] .ui-nav-item-title {
  opacity: .5;
  -webkit-transform: translateZ(2px) translateX(calc(150% - var(--px) * 50%));
          transform: translateZ(2px) translateX(calc(150% - var(--px) * 50%));
}
#app[data-state="NAV1"] .ui-nav-item-title > span {
  -webkit-transform: translateZ(2px) translateX(-50%);
          transform: translateZ(2px) translateX(-50%);
}

#app[data-state="NAV1"][data-prev-state="START"][data-pending]:not(#important) .ui-nav-item::before {
  -webkit-transform: scaleY(calc((110 - (140 * var(--py))) / 250));
          transform: scaleY(calc((110 - (140 * var(--py))) / 250));
}
#app[data-state="NAV1"][data-prev-state="START"][data-pending]:not(#important) .ui-nav-item.active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(-50% * var(--py)));
          transform: translateZ(2px) translateX(calc(-50% * var(--py)));
}
#app[data-state="NAV1"][data-prev-state="START"][data-pending]:not(#important) .ui-nav-item.active + .ui-nav-item > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(0);
          transform: translateZ(2px) translateX(0);
}
#app[data-state="NAV1"][data-prev-state="START"][data-pending]:not(#important) .ui-nav-item.prev-active > .ui-nav-item-title {
  -webkit-transform: translateZ(2px) translateX(calc(-100% * var(--py)));
          transform: translateZ(2px) translateX(calc(-100% * var(--py)));
}
#app[data-state="NAV1"][data-prev-state="START"][data-pending]:not(#important) .ui-nav-item-title {
  opacity: 1;
  -webkit-transform: translateZ(2px) translateX(calc(-50% * var(--py)));
          transform: translateZ(2px) translateX(calc(-50% * var(--py)));
}

#app[data-state="NAV1"] .ui-nav-items,
#app[data-state="NAV2"] .ui-nav-items {
  left: 0;
  -webkit-transform: translateX(calc(-1 * var(--x) * var(--py) + var(--dx) * 1px));
          transform: translateX(calc(-1 * var(--x) * var(--py) + var(--dx) * 1px));
  -webkit-transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out, -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
}
#app[data-state="NAV1"]:not([data-pending]) .ui-nav-items,
#app[data-state="NAV2"]:not([data-pending]) .ui-nav-items {
  -webkit-transform: translateX(calc(var(--x) + var(--dx) * 1px));
          transform: translateX(calc(var(--x) + var(--dx) * 1px));
}
#app[data-state="NAV1"][data-pending] .ui-nav-item.active,
#app[data-state="NAV2"][data-pending] .ui-nav-item.active {
  z-index: 1;
}
#app[data-state="NAV1"] .ui-nav-items,
#app[data-state="NAV2"] .ui-nav-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 250px;
  top: 0;
  width: 100%;
  z-index: 1;
}
#app[data-state="NAV1"] .ui-nav-item,
#app[data-state="NAV2"] .ui-nav-item {
  height: 100%;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 315px;
      flex-basis: 315px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: -2;
}
#app[data-state="NAV1"] .ui-nav-item:before,
#app[data-state="NAV2"] .ui-nav-item:before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  opacity: 0;
  -webkit-transition: opacity calc(var(--not-panning) * .6s) ease-out, width 0s 0.6s, z-index 0s 0.6s, -webkit-transform calc(var(--not-panning) * .6s);
  transition: opacity calc(var(--not-panning) * .6s) ease-out, width 0s 0.6s, z-index 0s 0.6s, -webkit-transform calc(var(--not-panning) * .6s);
  transition: opacity calc(var(--not-panning) * .6s) ease-out, transform calc(var(--not-panning) * .6s), width 0s 0.6s, z-index 0s 0.6s;
  transition: opacity calc(var(--not-panning) * .6s) ease-out, transform calc(var(--not-panning) * .6s), width 0s 0.6s, z-index 0s 0.6s, -webkit-transform calc(var(--not-panning) * .6s);
}
#app[data-state="NAV1"] .ui-nav-item:last-child::before,
#app[data-state="NAV2"] .ui-nav-item:last-child::before {
  opacity: 1 !important;
}
#app[data-state="NAV1"] .ui-nav-item.active,
#app[data-state="NAV2"] .ui-nav-item.active {
  z-index: 0;
}
#app[data-state="NAV1"] .ui-nav-item.active:before,
#app[data-state="NAV2"] .ui-nav-item.active:before {
  opacity: calc(1 + var(--px));
}
#app[data-state="NAV1"] .ui-nav-item.active + .ui-nav-item,
#app[data-state="NAV2"] .ui-nav-item.active + .ui-nav-item {
  z-index: -1;
}
#app[data-state="NAV1"] .ui-nav-item.active + .ui-nav-item:before,
#app[data-state="NAV2"] .ui-nav-item.active + .ui-nav-item:before {
  opacity: 1;
}
#app[data-state="NAV1"] .ui-nav-item.prev-active,
#app[data-state="NAV2"] .ui-nav-item.prev-active {
  z-index: 1;
}
#app[data-state="NAV1"] .ui-nav-item.prev-active:before,
#app[data-state="NAV2"] .ui-nav-item.prev-active:before {
  opacity: calc(var(--px));
}

.ui-main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background-color: white;
  -webkit-transition: -webkit-transform 0.6s ease-out;
  transition: -webkit-transform 0.6s ease-out;
  transition: transform 0.6s ease-out;
  transition: transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  will-change: transform;
}
#app[data-state="START"][data-pending] .ui-main {
  -webkit-transform: translateY(calc((-100% + 250px) - (100% - 250px) * var(--py)));
          transform: translateY(calc((-100% + 250px) - (100% - 250px) * var(--py)));
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
#app[data-state="NAV1"][data-prev-state="START"][data-pending] .ui-main {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transform: translateY(calc((-100% + 250px) * -1 * var(--py)));
          transform: translateY(calc((-100% + 250px) * -1 * var(--py)));
}
#app[data-state="NAV1"][data-prev-state="NAV2"][data-pending] .ui-main {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transform: translateY(calc((-100% + 65px) + 4px * var(--dy)));
          transform: translateY(calc((-100% + 65px) + 4px * var(--dy)));
}
#app[data-state="NAV1"]:not([data-pending]) .ui-main {
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform: translateY(calc((-100% + 250px)));
          transform: translateY(calc((-100% + 250px)));
}
#app[data-state="NAV2"][data-pending] .ui-main {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transform: translateY(calc((-100% + 250px) + (-100% + 65px) * -.5 * var(--py)));
          transform: translateY(calc((-100% + 250px) + (-100% + 65px) * -.5 * var(--py)));
}
#app[data-state="NAV2"]:not([data-pending]) .ui-main {
  -webkit-transition-duration: 0.6s;
          transition-duration: 0.6s;
  -webkit-transform: translateY(calc((-100% + 65px)));
          transform: translateY(calc((-100% + 65px)));
}
.ui-main > .ui-header {
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
}

.ui-filter {
  color: var(--gradient-1);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0 1rem;
  -webkit-transition: color 0.6s ease;
  transition: color 0.6s ease;
}
.ui-filter:after {
  content: '';
  display: inline-block;
  border: .3rem solid transparent;
  top: .15rem;
  border-top-color: #CCC;
  margin-left: 1ch;
}
.ui-filter + .ui-filter {
  border-left: 1px solid #DDD;
}

.ui-articles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: translateX(calc(var(--x) + var(--dx) * 1px));
          transform: translateX(calc(var(--x) + var(--dx) * 1px));
  -webkit-transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out;
  transition: transform calc(var(--not-panning) * 0.6s) ease-out, -webkit-transform calc(var(--not-panning) * 0.6s) ease-out;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}
.ui-articles > .ui-article {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ui-article {
  padding: 1rem;
}
.ui-article, .ui-article * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.ui-article > .ui-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.ui-article .ui-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2rem;
  font-weight: 500;
}
.ui-article .ui-title:after {
  font-size: 0.75rem;
  line-height: 1.2rem;
  content: attr(data-views) " views · " attr(data-days) " days";
  display: block;
  color: #BABABA;
}

.ui-header {
  padding: 0.5rem 0;
  border-bottom: 1px solid #DADADA;
}

.ui-content {
  margin: 1rem 0;
  overflow: hidden;
  height: 12rem;
}

.ui-photo {
  width: 100%;
  min-height: 5rem;
}

.ui-thumbnail {
  height: 2.5rem;
  width: 2.5rem;
  margin-right: 1rem;
  background-color: #DDD;
  border-radius: 2px;
}

.ui-fab {
  height: 4rem;
  width: 4rem;
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  background-color: var(--gradient-1);
  z-index: 10;
  -webkit-transform: translateY(150%);
          transform: translateY(150%);
  border-radius: .1rem;
  -webkit-transition: .6s ease;
  transition: .6s ease;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: transform, background-color;
  transition-property: transform, background-color, -webkit-transform;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  text-align: center;
}
.ui-fab:before {
  content: '+';
  display: inline-block;
  font-size: 3rem;
  line-height: 4rem;
  height: 100%;
  width: 100%;
  text-align: center;
  color: white;
}
#app:not([data-state="START"]) .ui-fab {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}
JS
const nav = document.querySelector('.ui-nav');
const navItems = document.querySelectorAll('.ui-nav-item');
const app = document.querySelector('#app');
const appRect = app.getBoundingClientRect();

const log = console.log.bind(console);
const mapValues = (obj, iteratee) => {
  const res = {};
  Object.keys(obj).forEach(key => res[key] = iteratee(obj[key], key, obj));
  
  return res;
}

const clamp = (min, max) => val => Math.min(Math.max(min, val), max);

const colors = {
  0: ['#2F6692', '#231133'],
  1: ['#9A45DB', '#4D88DB'],
  2: ['#FB2474', '#934CDB'],
  3: ['#FB9C2C', '#FD2472'],
  4: ['#D8D6CD', '#FD9722'],
};

RxCSS.set(app, {
  colors,
});

const hNav = new Hammer(nav, {
  direction: Hammer.DIRECTION_ALL,
});

hNav.get('pan')
  .set({ direction: Hammer.DIRECTION_ALL });

const pan$ = Rx.Observable
  .fromEventPattern(h => hNav.on('panstart panup pandown panleft panright panend', h))
  .map(event => ({
    key: +event.target.getAttribute('data-key'),
    type: event.type,
    deltaX: event.deltaX,
    deltaY: event.deltaY,
  }));

const initialState = {
  appState: 'START',
  panning: false,
  x: 0,
  dx: 0,
  n: undefined,
};

const af$ = Rx.Observable.interval(0, Rx.Scheduler.animationFrame);

const Flipper = new Flipping({
  onFlip: ({key, delta, node}) => RxCSS.set(node, { delta })
});

const flip$ = Rx.Observable
  .fromEventPattern(h => Flipper.on('flip', h))
  .map(flip => ({ type: 'flip', deltas: flip }))

const action$ = pan$
  .merge(flip$);

const setNthItemClass = (n) => {
  const navItem = navItems[n - 1];
  const prevNavItem = navItems[n - 2]; 

  const currActive = document.querySelector('.ui-nav-item.active');
  const currPrevActive = document.querySelector('.ui-nav-item.prev-active');
  if (currActive === navItem) return;
  
  currActive && currActive.classList.remove('active');
  currPrevActive && currPrevActive.classList.remove('prev-active');

  navItem.classList.add('active');
  prevNavItem && prevNavItem.classList.add('prev-active');
};

const machine = {
  START: {
    panup: 'NAV1',
    pandown: 'START',
  },
  NAV1: {
    panup: 'NAV2',
    pandown: 'START',
  },
  NAV2: {
    pandown: 'NAV1',
    panup: 'NAV2',
  }
};

const state$ = action$
  .startWith(initialState)
  .scan((state, action) => {
    let panning = {
      'panstart': true,
      'panend': false,
    }[action.type];
    if (panning === undefined) panning = state.panning;

    if (action.type === 'panstart' && state.appState === 'START') {
      return {
        ...state,
        n: action.key,
        direction: 'y',
      }
    }
  
    if (!state.pending && (action.type === 'panup' || action.type === 'pandown') && state.direction !== 'x') {
      return {
        ...state,
        prevState: state.appState,
        appState: machine[state.appState][action.type],
        direction: 'y',
        pending: true,
        panning: true,
        changed: true,
      }
    }

    if (state.pending && (action.type === 'panup' || action.type === 'pandown')) {
      let dy = state.dy;
      if (state.appState === 'NAV1' && state.prevState === 'START') {
        dy = clamp(-75, 0)(action.deltaY);
      } else if (state.appState === 'NAV1' && state.prevState === 'NAV2') {
        dy = clamp(0, 75)(action.deltaY);
      } else if (state.appState === 'NAV2') {
        dy = clamp(-75, 100)(action.deltaY);
      } else if (state.appState === 'START') {
        dy = clamp(0, 75)(action.deltaY);
      }

      return {
        ...state,
        dy,
      };
    }

    let n = state.n;
    if (action.type === 'panend') {
      if (state.appState === 'START') {
        n = undefined;
      } else if (state.dx > 100) {
        n = n - 1;
      } else if (state.dx < -100) {
        n = n + 1;
      }

      return {
        ...state,
        n: clamp(1, 4)(n),
        dx: 0,
        dy: 0,
        type: action.type,
        pending: false,
        panning: false,
        changed: false,
        direction: undefined,
      }
    }
  
    const direction = action.type === 'panend'
      ? undefined
      : state.direction
        || {
          panleft: 'x',
          panright: 'x',
          panup: 'y',
          pandown: 'y',
          panend: undefined,
        }[action.type];

    return {
      ...state,
      n,
      direction,
      panning,
      type: action.type,
      x: action.type === 'panend'
        ? 0
        : state.x,
      dx: (action.type === 'panend' || direction === 'y')
        ? 0
        : action.deltaX || state.dx,
      dy: (action.type === 'panend' || direction === 'x')
        ? 0
        : action.deltaY || state.dy,
    }
  }).share();
  
state$.subscribe(state => {
    const end = state.type === 'panend';

    if (end) {
      navItems.forEach(item => RxCSS.set(item, { delta: { top: 0, left: 0 } }));
    }

    nav.style
      .setProperty('--nav-panning', +state.panning);
    
    if (state.changed) {
      Flipper.read();
      if (state.pending) {
        app.setAttribute('data-pending', true);
      } else {
        app.removeAttribute('data-pending');
      }
      app.setAttribute('data-state', state.appState);
      app.setAttribute('data-prev-state', state.prevState);

      Flipper.flip();
    }

    if (!state.pending) {
      app.removeAttribute('data-pending');      
    }

    if (state.n) setNthItemClass(state.n);

    const px = state.dx / appRect.width;
    RxCSS.set(document.body, {
        gradient: colors[state.n || 0],
        pending: state.pending,
        'not-pending': !state.pending,
        panning: state.panning,
        'not-panning': !state.panning,
        n: state.n,
        x: `-${(state.n - 1) * 100}%`,
        dx: state.dx,
        dy: state.dy,   
        px,
        'px-abs': Math.abs(state.dx / appRect.width),
        py: !state.prevState ? 0 : state.dy / {
          START: { NAV1: 75 },
          NAV1: { START: -75, NAV2: 75 },
          NAV2: { NAV1: -75}
        }[state.prevState][state.appState],
      });
  });
Host Instantly Drag and Drop Website Builder

 

Description

Based on a Dribbble by Aurelien Salomon.
Term
Mon, 11/27/2017 - 21:49

Related Codes

Pen ID
Pen ID
Pen ID