滑块转换

下载代码

html

css

分享到微信朋友圈

html

</div>
          <div class="i-card js-i-card">
            <div class="i-card__title js-separate-text">creative frontend developer</div>
            <div class="i-card__name js-separate-text">Andrey Manoylov</div>
            
          </div>
        </div>
      </div>
    </div>
    <div class="m-cursor-w js-cursor-wrap hide">
      <div class="m-cursor js-cursor">
        <div class="m-cursor__dot"></div>
      </div>
    </div>
    <div class="m-cursor-line js-cursor-line"></div>
  </main>

css

.icon-0 {
  width: 0.9em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-1 {
  width: 0.51em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-2 {
  width: 0.81em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-behance {
  width: 1.57em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-brutalism {
  width: 7.85em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-codepen {
  width: 1em;
  height: 1em;
  fill: #fff;
  stroke: initial;
}

.icon-dribbble {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-facebook {
  width: 0.56em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-instagram {
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-op-pr {
  width: 1.31em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-soulless {
  width: 7.08em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-tumblr {
  width: 0.56em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

.icon-twitter {
  width: 1.14em;
  height: 1em;
  fill: currentColor;
  stroke: initial;
}

/* COMPONENTS */
/* PAGES */
body {
  background-color: #ededed;
}

body, .content, .slides, .slide {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: none !important;
}

.preload {
  display: inline-block;
  position: absolute;
  width: 142px;
  height: 70px;
  top: calc(50% - 20px);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 0;
  z-index: 10;
  pointer-events: none;
}

.preload__pillar {
  position: absolute;
  display: inline-block;
  width: 26px;
  height: 0;
  bottom: 0;
  background: #fff;
  overflow: hidden;
  z-index: 5;
}

.preload__pillar:nth-child(3) {
  width: 44px;
}

.preload__pillar:nth-child(1) {
  left: 0%;
}

.preload__pillar:nth-child(2) {
  left: 26px;
}

.preload__pillar:nth-child(3) {
  left: 52px;
}

.preload__pillar:nth-child(4) {
  left: 96px;
}

.preload__pillar:nth-child(5) {
  left: 122px;
}

.preload__pillar .preload__counter {
  z-index: 10;
  top: inherit;
  bottom: 22px;
}

.preload__counter {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-family: "montserrat-b", sans-serif;
  font-weight: bold;
  z-index: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-size: 0;
  z-index: 0;
  opacity: 0;
  background-size: 0;
}

.slide.active-slide {
  z-index: 10 !important;
  opacity: 1;
}

.slide.next {
  z-index: 5 !important;
  opacity: 1;
}

.slide.next .slide__slice {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.slide.next .slide__num span {
  -webkit-transform: translateY(102%);
  -ms-transform: translateY(102%);
  transform: translateY(102%);
}

.slide.top .slide__slice, .slide.prev-555 .slide__slice {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.slide.top .slide__num span, .slide.prev-555 .slide__num span {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.slide.orig-scale .slide__slice-img {
  -webkit-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  transform: scale(1) !important;
}

.slide.light-slide .slide__num, .slide.light-slide .slide__num svg {
  color: #121212;
  fill: #121212;
}

.slide.dark-slide .slide__num, .slide.dark-slide .slide__num svg {
  color: #fff;
  fill: #fff;
}

.slide__slice {
  position: absolute;
  top: 0;
  display: inline-block;
  height: 100%;
  background: #000;
  width: calc(18.5vw + 1.2px);
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.slide__slice:nth-child(3) {
  width: calc(26vw + 1.2px);
}

.slide__slice:nth-child(1) {
  left: 0%;
}

.slide__slice:nth-child(1) .slide__slice-img {
  -webkit-transform: scale(1.2) translateY(-10px);
  -ms-transform: scale(1.2) translateY(-10px);
  transform: scale(1.2) translateY(-10px);
}

.slide__slice:nth-child(2) {
  left: 18.5vw;
}

.slide__slice:nth-child(2) .slide__slice-img {
  -webkit-transform: scale(1.16) translateY(20px);
  -ms-transform: scale(1.16) translateY(20px);
  transform: scale(1.16) translateY(20px);
}

.slide__slice:nth-child(3) {
  left: 37vw;
}

.slide__slice:nth-child(3) .slide__slice-img {
  -webkit-transform: scale(1.08) translateY(-20px);
  -ms-transform: scale(1.08) translateY(-20px);
  transform: scale(1.08) translateY(-20px);
}

.slide__slice:nth-child(4) {
  left: 63vw;
}

.slide__slice:nth-child(4) .slide__slice-img {
  -webkit-transform: scale(1.16) translateY(20px);
  -ms-transform: scale(1.16) translateY(20px);
  transform: scale(1.16) translateY(20px);
}

.slide__slice:nth-child(5) {
  left: 81.5vw;
}

.slide__slice:nth-child(5) .slide__slice-img {
  -webkit-transform: scale(1.2) translateY(-10px);
  -ms-transform: scale(1.2) translateY(-10px);
  transform: scale(1.2) translateY(-10px);
}

.slide__slice-img {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out;
  transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide__num {
  pointer-events: none;
  position: absolute;
  height: 9vw;
  overflow: hidden;
  top: 10vh;
  right: 11vh;
  z-index: 10;
  color: #121212;
  font-size: 8vw;
  font-family: "montserrat-bk", sans-serif;
}

.slide:first-child .slide__num {
  display: none;
}

.slide__num span {
  display: inline-block;
  vertical-align: top;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  height: 100%;
}

/* .slide__num span:nth-child(2) {
  margin-left: -2.0vw;
} */

.dd {
  pointer-events: none;
  position: absolute;
  bottom: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 0;
  text-align: center;
  z-index: 10;
}

.dd.light-mode .dd__dot, .dd.light-mode .dd__circle {
  background: #fff;
  transition: background 0.5s ease !important;
}

.dd.light-mode .dd__text {
  color: #fff;
}

.dd.dark-mode .dd__dot, .dd.dark-mode .dd__circle {
  background: #121212;
  transition: background 0.5s ease !important;
}

.dd.dark-mode .dd__text {
  color: #121212;
}

.dd__hint {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  width: 40px;
  height: 76px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.dd__hint.active .dd__dot {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.dd__hint.active .dd__circle {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.dd__hint.anim .dd__circle {
  transition: none;
}

.dd__dots {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 54px;
  overflow: hidden;
}

.dd__dot {
  display: inline-block;
  width: 1px;
  height: 2px;
  background: #fff;
  opacity: 0;
  transition: background 0.5s, -webkit-transform 0.3s;
  transition: transform 0.3s, background 0.5s;
  transition: transform 0.3s, background 0.5s, -webkit-transform 0.3s;
  margin-top: 6px;
}

.dd__dot:nth-child(6) {
  -webkit-transform: translateY(18px);
  -ms-transform: translateY(18px);
  transform: translateY(18px);
  transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
  transition-delay: .25s;
}

.dd__dot:nth-child(5) {
  -webkit-transform: translateY(26px);
  -ms-transform: translateY(26px);
  transform: translateY(26px);
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
  transition-delay: .25s;
}

.dd__dot:nth-child(4) {
  -webkit-transform: translateY(34px);
  -ms-transform: translateY(34px);
  transform: translateY(34px);
  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;
  transition-delay: .25s;
}

.dd__dot:nth-child(3) {
  -webkit-transform: translateY(42px);
  -ms-transform: translateY(42px);
  transform: translateY(42px);
  transition: -webkit-transform 0.7s ease-out;
  transition: transform 0.7s ease-out;
  transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
  transition-delay: .25s;
}

.dd__dot:nth-child(2) {
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  transition: -webkit-transform 0.8s ease-out;
  transition: transform 0.8s ease-out;
  transition: transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition-delay: .25s;
}

.dd__dot:nth-child(1) {
  -webkit-transform: translateY(58px);
  -ms-transform: translateY(58px);
  transform: translateY(58px);
  transition: -webkit-transform 0.9s ease-out;
  transition: transform 0.9s ease-out;
  transition: transform 0.9s ease-out, -webkit-transform 0.9s ease-out;
  transition-delay: .25s;
}

.dd__dot + .dd__dot {
  margin-top: 6px;
}

.dd__circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  transition: opacity .3s ease, -webkit-transform .36s ease-out;
  transition: transform .36s ease-out, opacity .3s ease;
  transition: transform .36s ease-out, opacity .3s ease, -webkit-transform .36s ease-out;
}

.dd__text {
  margin-top: 18px;
  font-size: 12px;
  color: #fff;
  font-family: "montserrat-b", sans-serif;
  text-align: center;
  display: block;
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
  white-space: pre;
  opacity: 0;
  transition: color 0.5s;
}

.dd__text span {
  display: inline-block;
}

.dd__text span:nth-child(5) {
  width: 4px;
}

.dd__text span:nth-child(6), .dd__text span:nth-child(7) {
  width: 10px;
}

.dd__text span.hide {
  transition: width .6s, opacity .6s;
  width: 0;
  opacity: 0 !important;
}

.taglines {
  position: fixed;
  height: 8vw;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

.tagline {
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-size: 8vw;
  font-family: "montserrat-bk", sans-serif;
  text-transform: uppercase;
  color: transparent;
  z-index: 0;
  opacity: 0;
  margin-left: -2px;
}

.tagline svg {
  fill-opacity: 0;
}

.tagline.light-mode .tagline__text, .tagline.light-mode .tagline__text svg {
  color: #fff;
  fill: #fff;
}

.tagline.dark-mode .tagline__text, .tagline.dark-mode .tagline__text svg {
  color: #121212;
  fill: #121212;
}

.tagline.active-slide {
  z-index: 10 !important;
  opacity: 1;
}

.tagline.next {
  z-index: 5 !important;
  opacity: 1;
}

.tagline.next .tagline__slice {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.tagline__slice {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(14.2% + 2px);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  height: 100%;
  overflow: hidden;
}

.tagline__slice:nth-of-type(1) {
  left: calc(0% + 2px);
}

.tagline__slice:nth-of-type(1) .tagline__text {
  left: -0%;
}

.tagline__slice:nth-of-type(2) {
  left: calc(14.2% + 4px);
}

.tagline__slice:nth-of-type(2) .tagline__text {
  left: -100%;
}

.tagline__slice:nth-of-type(3) {
  left: calc(28.4% + 6px);
}

.tagline__slice:nth-of-type(3) .tagline__text {
  left: -200%;
}

.tagline__slice:nth-of-type(4) {
  left: calc(42.6% + 8px);
}

.tagline__slice:nth-of-type(4) .tagline__text {
  left: -300%;
}

.tagline__slice:nth-of-type(5) {
  left: calc(56.8% + 10px);
}

.tagline__slice:nth-of-type(5) .tagline__text {
  left: -400%;
}

.tagline__slice:nth-of-type(6) {
  left: calc(71% + 12px);
}

.tagline__slice:nth-of-type(6) .tagline__text {
  left: -500%;
}

.tagline__slice:nth-of-type(7) {
  left: calc(85.2% + 14px);
}

.tagline__slice:nth-of-type(7) .tagline__text {
  left: -600%;
}

.tagline__text, .tagline__text svg {
  display: inline-block;
  height: 100%;
  position: absolute;
  top: 0;
  color: #121212;
  fill: #121212;
  fill-opacity: 1;
}

.info__text, .i-card__title, .i-card__name {
  font-size: 12px;
  font-family: "montserrat-sb", sans-serif;
  text-transform: uppercase;
}

.info {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
}

.info.open-info {
  display: inline-block;
}

.info__aside {
  pointer-events: all;
  color: #fff;
  font-size: 0;
  position: absolute;
}

.info__aside.active {
  z-index: 10;
}

.info__aside.light-mode .info__slot {
  background: #fff;
}

.info__aside.light-mode .info__text {
  color: #121212;
}

.info__aside.light-mode .info__show-btn:before, .info__aside.light-mode .info__show-btn:after {
  background: #121212;
}

.info__aside.btn-open .info__slot {
  background: #fff;
  transition: background .6s .4s;
}

.info__aside.btn-open .info__text {
  color: #121212;
  transition: color .6s .4s;
}

.info__aside.btn-open .info__show-btn:before, .info__aside.btn-open .info__show-btn:after {
  background: #121212;
}

.info__aside.btn-open .info__show-btn:before {
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}

.info__aside.btn-open .info__show-btn:after {
  -webkit-transform: translateX(-4px);
  -ms-transform: translateX(-4px);
  transform: translateX(-4px);
}

.info__aside_lt {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: translate(130px, 0%) rotate(90deg);
  -ms-transform: translate(130px, 0%) rotate(90deg);
  transform: translate(130px, 0%) rotate(90deg);
  width: 214px;
  height: 130px;
  top: 0;
  left: 0;
}

.info__aside_rb {
  -webkit-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translate(0, -170px) rotate(-90deg);
  -ms-transform: translate(0, -170px) rotate(-90deg);
  transform: translate(0, -170px) rotate(-90deg);
  width: 170px;
  height: 130px;
  right: 0;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
}

.info__slot {
  padding-left: 30px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #121212;
  transition: background .6s .6s;
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}

.info__slot div {
  margin: auto 0;
}

.info__slot_bgg {
  height: 80px;
  width: 100%;
}

.info__slot_sml {
  height: 51px;
  width: 80px;
  margin-bottom: -1px;
}

.info__slot_sml div {
  margin: auto 0 0;
}

.info__text {
  transition: color .6s .6s;
}

.info__show-btn {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  height: 100%;
  width: 10px;
}

.info__show-btn:before, .info__show-btn:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background: #fff;
  bottom: 0;
  transition: background .6s .6s, -webkit-transform .6s;
  transition: transform .6s, background .6s .6s;
  transition: transform .6s, background .6s .6s, -webkit-transform .6s;
}

.info__show-btn:before {
  left: 0;
}

.info__show-btn:after {
  right: 0;
  height: 14px;
}

.popup {
  position: relative;
  width: 100%;
  height: 100%;
}

.popup.open {
  pointer-events: all;
}

.popup__slice {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  margin-left: auto;
  background: #121212;
  height: 20%;
}

.popup__slice:nth-child(1) {
  width: 73%;
}

.popup__slice:nth-child(2) {
  width: 58%;
}

.popup__slice:nth-child(3) {
  width: 50%;
}

.popup__slice:nth-child(4) {
  width: 35%;
}

.popup__slice:nth-child(5) {
  width: 43%;
}

.info-cards {
  position: absolute;
  top: 0;
  right: 80px;
}

.i-card {
  margin-top: 80px;
  color: #fff;
  text-align: right;
}

.i-card__title, .i-card__name {
  display: block;
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
  white-space: pre;
}

.i-card__title span, .i-card__name span {
  will-change: transform;
  display: inline-block;
}

.i-card__title {
  font-size: 10px;
}

.i-card__name {
  margin-top: 12px;
}

.i-card__links-w {
  display: block;
  margin-top: 30px;
  overflow: hidden;
}

.i-card__link {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  margin-left: 12px;
}

.i-card__link:first-child {
  margin-left: 0;
}

.i-card__link svg {
  width: 21px;
  min-height: 16px;
}

.c-black {
  color: #121212;
}

.c-white {
  color: #fff;
}

.fade-out {
  opacity: 0;
  transition: opacity .2s;
}

.controls {
  position: absolute;
  bottom: 80px;
  left: 80px;
  width: 160px;
  height: 80px;
  font-size: 0;
  pointer-events: all;
}

.controls__item-w {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.controls__item-w:first-child {
  top: -40px;
}

.controls__item {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: #121212;
  transition: background .5s .1s;
}

.controls__item.active {
  z-index: 10;
}

.controls__item:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
  -ms-transform: translate(-50%, -50%) rotate(-135deg);
  transform: translate(-50%, -50%) rotate(-135deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #fff;
  transition: border .5s .1s;
}

.controls__item_up {
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.controls__item_dn {
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

.controls__item_dn:after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.controls__item.ctrl-b {
  background: #121212;
}

.controls__item.ctrl-b:after {
  border-color: #fff;
}

.controls__item.ctrl-w {
  background: #fff;
}

.controls__item.ctrl-w:after {
  border-color: #121212;
}

.m-cursor-w {
  position: fixed;
  top: -10px;
  left: -10px;
  display: inline-block;
  width: 20px;
  height: 20px;
  z-index: 10;
  pointer-events: none;
  -webkit-transform: translate(100px, 100px);
  -ms-transform: translate(100px, 100px);
  transform: translate(100px, 100px);
  transition: opacity .5s;
}

.m-cursor-w.hide {
  opacity: 0;
}

.m-cursor {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.m-cursor:before, .m-cursor:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  background: inherit;
  transition: width .4s, background .5s .1s, -webkit-transform 0s .2s;
  transition: width .4s, background .5s .1s, transform 0s .2s;
  transition: width .4s, background .5s .1s, transform 0s .2s, -webkit-transform 0s .2s;
  z-index: 0;
}

.m-cursor.close .m-cursor__dot, .m-cursor.active .m-cursor__dot {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}

.m-cursor.close:before, .m-cursor.close:after {
  width: 31px;
  transition: width .4s .1s, background .5s .1s, -webkit-transform .6s .5s;
  transition: width .4s .1s, transform .6s .5s, background .5s .1s;
  transition: width .4s .1s, transform .6s .5s, background .5s .1s, -webkit-transform .6s .5s;
}

.m-cursor.close:before {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  -ms-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
}

.m-cursor.close:after {
  -webkit-transform: translate(-50%, -50%) rotate(225deg);
  -ms-transform: translate(-50%, -50%) rotate(225deg);
  transform: translate(-50%, -50%) rotate(225deg);
}

.m-cursor.dark-mode .m-cursor__dot, .m-cursor.dark-mode:before, .m-cursor.dark-mode:after {
  background: #121212;
}

.m-cursor.light-mode .m-cursor__dot, .m-cursor.light-mode:before, .m-cursor.light-mode:after {
  background: #fff;
}

.m-cursor__dot {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
  transition: background .5s .1s, -webkit-transform .5s;
  transition: background .5s .1s, transform .5s;
  transition: background .5s .1s, transform .5s, -webkit-transform .5s;
}

.m-cursor-line {
  position: fixed;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 0;
  background: #fff;
  z-index: 10;
  pointer-events: none;
}

.m-cursor-line.dark-mode {
  background: #121212;
}

.m-cursor-line.light-mode {
  background: #fff;
}

* {
  cursor: none !important;
}

.bg-slide-2 {
  background-image: url("http://www.jq22.com/tp/8a3e932f-2ff4-4756-ace4-31b8729c43a7.png");
}
.bg-slide-1 {
  background-image: url('http://www.jq22.com/tp/20fa541d-68ab-4a5d-a926-8085d49ca263.png');
}

JavaScript

const globStates = {
  isCanChangeCurrSlider: false,
  isDev: 0,
  freeDragHeight: 200,
  slideSliceCount: 5,
  taglineSliceCount: 7,
  stSliceShift: (7 - 5) / 2, // slide vs tagline index shift
  mouseCursor: document.querySelector('.js-cursor'),
  controls: document.querySelector('.js-controls'),
  isDrag: false,
  isFirstSlide: true
};
let slides;
const jsMatrix = document.querySelectorAll('.js-matrix-r');

// drag down helper block
const DD = new (function () {
  const sNode = document.querySelector('.js-dd');
  const hint = sNode.querySelector('.js-dd-hint');
  const textWrap = sNode.querySelectorAll('.js-separate-text');

function animHint() {
    globStates.isCanChangeCurrSlider = true;
    const circle = sNode.querySelector('.js-dd-cirlce');
    const dotsWrap = sNode.querySelector('.js-dd-dots');
    const ddATL = new TimelineMax({ repeat: -1 });
    const dotsWrapHeight = dotsWrap.offsetHeight;

ddATL
      .to(circle,   0.3, { scale: .4,  ease: 'Power1.easeInOut' }, 0.8)
      .to(dotsWrap, 0.8, { height: 1., ease: 'Power3.easeInOut' }, '-=0.18')
      .to(circle,   0.5, { scale:  1., ease: 'Power1.easeInOut' }, '+=.24')
      .to(dotsWrap, 1.0, { height: dotsWrapHeight, ease: 'Power1.easeInOut' }, '-=0.01');
  }

function animateWords(words) {
    words.forEach(word => {
      const spans = splitTextInSpans(word);
      words.forEach((word) => {
        word.style.opacity = 1;
      });

spans.forEach((spanItem, idx, spans) => {
        let tlWords = new TimelineMax();
        const delay = (.2 + ((Math.abs(spans.length / 2 - idx - .5)) / 20)).toFixed(2);

tlWords
          .set(spanItem, { y: spanItem.clientHeight, opacity: 1 })
          .to(spanItem, 0.5, { y: 0,  ease: 'Expo.easeOut' }, delay);
      });
    });
  }

return { sNode, hint, textWrap, startAnimation };
})();

const contacts = new (function () {
  const btns = document.querySelectorAll('.js-contacts-btn .info__slot');
  const popup = document.querySelector('.js-popup');
  const slices = popup.querySelectorAll('.popup__slice');
  const animTL = new TimelineMax({ reverse: true, paused: true });

const iCards = document.querySelectorAll('.js-i-card');
  const cardLinks = document.querySelectorAll('.i-card__link');
  const linksATL = new TimelineMax({ reverse: true, paused: true });
  const textsATL = new TimelineMax({ reverse: true, paused: true });
  const spans = [];

iCards.forEach((cardItem) => {
    const iCardTexts = cardItem.querySelectorAll('.js-separate-text');
    iCardTexts.forEach(item => {
      spans.push(splitTextInSpans(item));
    });
  });

animTL
    .staggerFromTo(slices, .7,
      { x: '100%', ease: 'Power1.easeInOut' },
      { x: '0%',   ease: 'Power1.easeInOut' }, .07, 0);
  spans.forEach((spanRow, idx) => {
    textsATL.staggerFromTo(spans[idx], 0.3,
      { y: '100%',  ease: 'Expo.easeOut' },
      { y: '0%',    ease: 'Expo.easeOut' }, .03, '-=.7');
  });
  linksATL
    .staggerFromTo(cardLinks, .7,
      { y: '100%',  ease: 'Power3.easeOut' },
      { y: '0%',    ease: 'Power3.easeOut' }, .1, 1.3);

btns.forEach(function (btnItem) {
    btnItem.onclick = function () {
      if (popup.classList.contains('open')) { //close
        closePopup(btnItem);
      } else {
        popup.classList.add('open');
        btnItem.parentNode.classList.add('btn-open');
        linksATL.timeScale(1).restart();
        animTL.restart();
        mouseCursor.cursor.classList.remove('light-mode');
        mouseCursor.cursor.classList.add('close', 'dark-mode');

setTimeout(() => {
          textsATL.timeScale(1).restart();
        }, 780);
      }
    };
  });

popup.addEventListener('mousemove', function(evt) {
    if (popup.classList.contains('open') && evt.target.classList.contains('js-popup')) {
      mouseCursor.cursor.classList.add('close');
    } else {
      mouseCursor.cursor.classList.remove('close');
    }
  });

popup.addEventListener('click', function (e) {
    if (e.target.classList.contains('js-popup')) {
      closePopup();
    }
  });

setTimeout(() => {
      animTL.reverse();
    }, 200);
  }

return { closePopup };
})();

const constorls = new (function () {
  const popup = document.querySelector('.js-popup');
  const sNode = document.querySelector('.js-controls');
  const upBtn = sNode.querySelector('.js-ctrl-w-up');
  const dnBtn = sNode.querySelector('.js-ctrl-w-dn');
  const bCtrl = sNode.querySelectorAll('.js-black-mode');
  const wCtrl = sNode.querySelectorAll('.js-white-mode');
  const animBlackCtrlTL = createCtrlAnim(bCtrl, wCtrl);
  const animWhiteCtrlTL = createCtrlAnim(wCtrl, bCtrl);

function createCtrlAnim(ctrls, nextWrap) {
    return new TimelineMax({ paused: true })
      .set(nextWrap, { className: '-=active' })
      .set(ctrls, { className: '+=active' })
      .fromTo(ctrls[0], .8,
        { y: '100%', ease: 'Power1.easeInOut' },
        { y: '0%',   ease: 'Power1.easeInOut' }, 0)
      .fromTo(ctrls[1], .8,
        { y: '-100%', ease: 'Power1.easeInOut' },
        { y: '0%',    ease: 'Power1.easeInOut' }, 0);
  }

upBtn.addEventListener('click', function () {
    if (!popup.classList.contains('open')) {
      slides.goToNextSlide(3, -1);
    } else {
      contacts.closePopup(dnBtn);
    }
  });

dnBtn.addEventListener('click', function () {
    if (!popup.classList.contains('open')) {
      slides.goToNextSlide(3, 1);
    } else {
      contacts.closePopup(dnBtn);
    }
  });

return { upBtn, dnBtn, animBlackCtrlTL, animWhiteCtrlTL };
})();

const mouseCursor = new (function () {
  const body = document.querySelector('body');
  const cursorWrap = document.querySelector('.js-cursor-wrap');
  const cursor = document.querySelector('.js-cursor');
  const cursorLine = document.querySelector('.js-cursor-line');
  const jsBlackBlocks = document.querySelectorAll('.js-black-mode');
  const jsWhiteBlocks = document.querySelectorAll('.js-white-mode');
  const closeBtns = document.querySelectorAll('.js-contacts-btn .info__slot');
  const popup = document.querySelector('.js-popup');

const targetMousePos = { x: 0, y: 0 };
  const currMousePos = { x: 0, y: 0 };

let cursorLineHeight = 0;
  let targetCursorLineHeight = 0;
  let cursorLineTop = 0;
  let targetCursorLineTop = 0;

setTimeout(() => {
    cursorWrap.classList.remove('hide');
  }, globStates.isDev ? 2000 : 4000);

jsBlackBlocks.forEach(function (itemBlock) {
    itemBlock.addEventListener('mouseenter', function () {
      if (!itemBlock.parentNode.classList.contains('btn-open')) {
        removeThenAddClasses(cursor, 'dark-mode', 'light-mode');
      }
    });
    itemBlock.addEventListener('mouseleave', function () {
      if (!itemBlock.parentNode.classList.contains('btn-open')) {
        removeThenAddClasses(cursor, 'light-mode', 'dark-mode');
      }
    });
  });
  jsWhiteBlocks.forEach(function (itemBlock) {
    itemBlock.addEventListener('mouseenter', function () {
      removeThenAddClasses(cursor, 'light-mode', 'dark-mode');
    });
    itemBlock.addEventListener('mouseleave', function () {
      removeThenAddClasses(cursor, 'dark-mode', 'light-mode');
    });
  });

closeBtns.forEach(function (itemSlot) {
    itemSlot.addEventListener('mouseenter', function () {
      if (popup.classList.contains('open')) {
        cursor.classList.add('close');
      }
    });
    itemSlot.addEventListener('mouseleave', function () {
      if (popup.classList.contains('open')) {
        cursor.classList.remove('close');
      }
    });
  });

body.addEventListener('mousemove', setMouseCursor);
  body.addEventListener('touchmove', setMouseCursor);

body.addEventListener('mousedown', function (e) {
    cursorLine.style.left = targetMousePos.x + 'px';
    cursorLine.style.transform = 'translateY(' + currMousePos.y + 'px)';
    cursor.classList.add('active');
  });
  body.addEventListener('mouseup', function (e) {
    cursor.classList.remove('active');
  });

function resetCursorLine(dir) {
    if (globStates.isDrag) {
      const reset =
      new TimelineMax({
        onComplete: function () {
          cursorLineHeight = targetCursorLineHeight = 0;
          cursorLineTop = targetCursorLineTop = 0;
          mouseCursor.cursorLine.style = '';
        }
      });

if (dir === -1) {
        reset.to(mouseCursor.cursorLine, .26, { height: 0 });
      } else {
        const hh = parseFloat(mouseCursor.cursorLine.style.height);
        reset.to(mouseCursor.cursorLine, .26, { height: 0, y: parseFloat(mouseCursor.cursorLine.style.transform.slice(11)) + hh, clearProps: 'y' });
      }
    }
  }

function updCursorLineHeightAndTop(top) {
    if (globStates.isFirstSlide) {
      top = top > 0 ? 0 : top;
    }
    targetCursorLineHeight = Math.abs(top);
    targetCursorLineTop = top;
  }

function setMouseCursor(evt) {
    let rect = body.getBoundingClientRect();
    targetMousePos.x = evt.clientX - rect.left;
    targetMousePos.y = evt.clientY - rect.top;
  }

function calcCursorPos() {
    currMousePos.x += (targetMousePos.x - currMousePos.x) * .16;
    currMousePos.y += (targetMousePos.y - currMousePos.y) * .16;
    cursorWrap.style.transform = 'translate(' + currMousePos.x + 'px, ' + currMousePos.y + 'px)';

if (globStates.isDrag) {
      cursorLineHeight += (targetCursorLineHeight - cursorLineHeight) * .16;
      cursorLineTop += (targetCursorLineTop - cursorLineTop) * .16;

cursorLine.style.height = cursorLineHeight + 'px';
      cursorLine.style.top = cursorLineTop + 'px';

if (cursorLineTop > 0) {
        cursorLine.style.top = '';
        cursorLine.style.bottom = cursorLineTop + 'px';
      }
    }
    requestAnimationFrame(calcCursorPos);
  }
  requestAnimationFrame(calcCursorPos);

return { cursor, cursorLine, resetCursorLine, updCursorLineHeightAndTop };
})();

const preload = {
  sNode: document.querySelector('.js-preload'),
  pillarsATL: null,
  animate: function () {
    const preloadCounter = { count: 0 };
    const pillars = this.sNode.querySelectorAll('.preload__pillar');
    this.pillarsATL = new TimelineMax({ reverse: true,  onComplete: DD.startAnimation });
    let countDisplay = this.sNode.querySelectorAll('.js-preload-counter');

if (globStates.isDev) { this.pillarsATL.timeScale(7); } else { this.pillarsATL.timeScale(5); }

this.pillarsATL
      .to(preloadCounter, 3.4, { count: 100, roundProps: 'count', ease: 'Power1.easeOut', onUpdate: counterHandler })
      .to(pillars[0], 2.1, { height: '60%',  ease: 'Power1.easeOut' }, 1.35)
      .to(pillars[1], 2.3, { height: '72%',  ease: 'Power1.easeOut' }, 0.85)
      .to(pillars[2], 2.0, { height: '100%', ease: 'Power1.easeOut' }, 0.1)
      .to(pillars[3], 2.3, { height: '84%',  ease: 'Power1.easeOut' }, 0.55)
      .to(pillars[4], 2.1, { height: '70%',  ease: 'Power1.easeOut' }, 1.15);

function counterHandler() {
      countDisplay.forEach(function (item) {
        item.innerHTML = preloadCounter.count;
      });
    }
  }
};

const infoScene = new (function () {
  const sNode = document.querySelector('.js-info');
  const blackAsides = sNode.querySelectorAll('.js-aside-black');
  const whiteAsides = sNode.querySelectorAll('.js-aside-white');
  const bSlots = sNode.querySelectorAll('.js-aside-black .info__slot');
  const wSlots = sNode.querySelectorAll('.js-aside-white .info__slot');
  const animBlackSlotsTL = createSlotAnim(bSlots, blackAsides, whiteAsides);
  const animWhiteSlotsTL = createSlotAnim(wSlots, whiteAsides, blackAsides);

/**
   * @param fourSlots - 4 domEl
   * @param currSlotsWrap
   * @param nextSlotsWraps
   * @returns new TimelineMax
   */
  function createSlotAnim(fourSlots, currSlotsWrap, nextSlotsWrap) {
    return new TimelineMax({ paused: true })
      .set(nextSlotsWrap, { className: '-=active' })
      .set(currSlotsWrap, { className: '+=active' })
      .fromTo([fourSlots[1], fourSlots[3]], .8,
        { x: '-100%', ease: 'Power1.easeInOut' },
        { x: '0%',   ease: 'Power1.easeInOut' }, 0)
      .fromTo([fourSlots[0], fourSlots[2]], .7,
        { x: '-100%', ease: 'Power1.easeInOut' },
        { x: '0%',   ease: 'Power1.easeInOut' }, '-=.7');
  }

return {
    sNode,
    animBlackSlotsTL,
    animWhiteSlotsTL
  };
})();

slides = new (function () {
  const allTaglines  = document.querySelectorAll('.js-taglines .tagline');
  const allSlides    = document.querySelectorAll('.js-slides .slide');
  let currSlide      = document.querySelector('.slide.active-slide');
  const slidersCount = allSlides.length;
  let isFirstSlide   = true;
  let draggedTarget  = null;
  let nextSlide, prevSlide;

function initSlider() {
    const nextSlideIdx = ((+currSlide.dataset['slideNum'] + 1) % slidersCount) || 1;
    const prevSlideIdx = (+currSlide.dataset['slideNum'] - 1) <= 0 ? slidersCount - 1 : +currSlide.dataset['slideNum'] - 1;

nextSlide = document.querySelector('[data-slide-num="' + nextSlideIdx + '"]');
    prevSlide = document.querySelector('[data-slide-num="' + prevSlideIdx + '"]');

nextSlide.classList.add('next');
    prevSlide.classList.add('prev');

allTaglines[nextSlideIdx - 1].classList.add('next');
    allTaglines[prevSlideIdx - 1].classList.add('prev');

initDragableSlices();
  }

function initDragableSlices() {
    allSlides.forEach(function (slideItem) {
      const currSlices = slideItem.querySelectorAll('.slide__slice');

currSlices.forEach(function (sliceElem) {
        sliceElem.dataset.top = 0;
        initDragObj(sliceElem);
      });
    });
  }

function goToNextSlide(targetSliceNum, dir) {
    mouseCursor.resetCursorLine(dir, true);
    globStates.isDrag = false;
    document.onmouseup = document.ontouchcancel = null;
    document.onmousemove = document.ontouchmove = null;

if (!globStates.isCanChangeCurrSlider) { return; }
    dir = dir || -1;

currSlide = document.querySelector('.slide.active-slide');
    nextSlide = document.querySelector('.slide.next');
    prevSlide = document.querySelector('.slide.prev');
    const currSlideDigits = currSlide.querySelectorAll('.js-slide-num span');
    const nextSlideDigits = nextSlide.querySelectorAll('.js-slide-num span');
    const currSlideSlices = currSlide.querySelectorAll('.slide__slice');
    const nextSlideSlices = nextSlide.querySelectorAll('.slide__slice');

const currentSlideSlicesATL = new TimelineMax({ onComplete: onCompleteSlideChange });
    const startSliceNum = targetSliceNum - 2;
    const nextSlideIdx = +nextSlide.dataset['slideNum'];
    const prevSlideIdx = +prevSlide.dataset['slideNum'];
    const isNextSlideDark = nextSlide.classList.contains('dark-slide');

const currTagline = isFirstSlide ? null : document.querySelector('[data-tagline-num="' + currSlide.dataset['slideNum'] + '"]');
    const nextTagline = document.querySelector('[data-tagline-num="' + nextSlide.dataset['slideNum'] + '"]');
    const currTaglineSlices = isFirstSlide ? null : currTagline.querySelectorAll('.tagline__slice');
    const nextTaglineSlices = nextTagline.querySelectorAll('.tagline__slice');

globStates.isCanChangeCurrSlider = false;
    const currSortedSlideSlices = getSortedSlicesBySelectPos(currSlideSlices, startSliceNum);
    const nextSortedSlideSlices = getSortedSlicesBySelectPos(nextSlideSlices, startSliceNum);
    const currSortedTagline = isFirstSlide ? null : getSortedSlicesBySelectPos(currTaglineSlices, startSliceNum);
    const nextSortedTagline = getSortedSlicesBySelectPos(nextTaglineSlices, Math.ceil(startSliceNum / 2));

if (dir === 1) {
      nextSlide.classList.add('top');
    }

currentSlideSlicesATL
      .staggerTo(currSortedTagline,     .6, { y: (dir * -100 + '%'), rotation: 0.0, ease: 'Power1.easeInOut' }, .06, 0)
      .staggerTo(currSortedSlideSlices, .7, { y: (dir * +100 + '%'), rotation: 0.0, ease: 'Power1.easeInOut' }, .08, 0)
      .staggerTo(nextSortedSlideSlices, .7, { y: '0%', rotation: 0.0, ease: 'Power1.easeInOut' }, .08, 0)
      .staggerTo(currSlideDigits,       .8, { y: (dir * -104 + '%'),  ease: 'Power1.easeInOut' }, .1, 0)
      .set(nextSlide, { className: '-=top' });

if (isFirstSlide) {
      const preloadCounters = document.querySelectorAll('.js-preload-counter');
      for (let i = 0; i < preloadCounters.length; i++) {
        preloadCounters[i].classList.add('fade-out');
      }

preload.pillarsATL.timeScale(7).reverse();
      DD.textWrap[0].childNodes[4].classList.add('hide');
      DD.textWrap[0].childNodes[5].classList.add('hide');
      DD.textWrap[0].childNodes[6].classList.add('hide');
      infoScene.sNode.classList.add('open-info');

setTimeout(() => {
        infoScene.animWhiteSlotsTL.restart();
        constorls.animWhiteCtrlTL.restart();
      }, 2000);
    }

setTimeout(() => {
      if (isNextSlideDark) {
        removeThenAddClasses(
          [DD.sNode, nextTagline, infoScene.sNode, globStates.mouseCursor, globStates.controls, mouseCursor.cursorLine],
          'dark-mode', 'light-mode'
        );
      } else {
        removeThenAddClasses(
          [DD.sNode, nextTagline, infoScene.sNode, globStates.mouseCursor, globStates.controls, mouseCursor.cursorLine],
          'light-mode', 'dark-mode'
        );
      }
    }, 240);

function onCompleteSlideChange() {
      const newActiveIdx = (nextSlideIdx + 1) % slidersCount || 1;
      const newPrevIdx = (prevSlideIdx + (isFirstSlide ? 0 : 1)) % slidersCount || 1;
      const onCompleteATL = new TimelineMax({ paused: true, reverse: true });

currSlide.classList.remove('active-slide', 'orig-scale');
      nextSlide.classList.add('active-slide', 'orig-scale');
      nextSlide.classList.remove('next');
      prevSlide.classList.remove('prev');

onCompleteATL
        .staggerFromTo(nextSortedTagline, .55,
          { y: '100%', ease: 'Power1.easeInOut' },
          { y: '0%',   ease: 'Power1.easeInOut', clearProps: 'y' }, .05)
        .staggerFromTo(nextSlideDigits, .8,
          { y: '100%', ease: 'Power1.easeInOut' },
          { y: '0%',   ease: 'Power1.easeInOut', clearProps: 'y' }, .1, 0);

if (dir) {
        onCompleteATL.restart();
      } else {
        onCompleteATL.reverse();
      }

if (!isFirstSlide) {
        if (isNextSlideDark) {
          infoScene.animWhiteSlotsTL.restart();
          constorls.animWhiteCtrlTL.restart();
        } else {
          infoScene.animBlackSlotsTL.restart();
          constorls.animBlackCtrlTL.restart();
        }
      }

if (isFirstSlide) {
        isFirstSlide = false;
        globStates.isFirstSlide = false;
      } else {
        currTagline.classList.remove('active-slide');
      }
      nextTagline.classList.add('active-slide');
      nextTagline.classList.remove('next');

allSlides[newActiveIdx].classList.add('next');
      allSlides[newPrevIdx].classList.add('prev');
      allTaglines[newActiveIdx - 1].classList.add('next');
      allTaglines[newPrevIdx - 1].classList.add('prev');

currSortedSlideSlices.concat(nextSortedSlideSlices).forEach(function (sliceItem) {
        sliceItem.dataset.top = 0;
      });

new TimelineMax()
        .to([currSortedSlideSlices, nextSortedSlideSlices], 0, { clearProps: 'y' })
      ;

setTimeout(() => {
        globStates.isCanChangeCurrSlider = true;
      }, 100);
    }
  }

function initDragObj(elmnt) {
    let pos2 = 0, pos3 = 0, pos4 = 0, topPos = 0;
    elmnt.onmousedown = elmnt.ontouchstart = dragElement;

let nextSlide, nextSlideSlices, nextElem;
    let taglineSlice, taglineSlicePrev, taglineSliceNext, currSlideDigits;

function dragElement(e) {
      if (!globStates.isCanChangeCurrSlider) { return; }

const sliceNum = elmnt.dataset['sliceNum'] - 1;
      currSlide = document.querySelector('.slide.active-slide');
      const currSlideNum = currSlide.dataset['slideNum'];
      currSlideDigits = currSlide.querySelectorAll('.js-slide-num span');

e = e || window.event;

const currTaglineSlices   = document.querySelectorAll('[data-tagline-num="' + currSlideNum + '"] .tagline__slice');
      taglineSlice     = currTaglineSlices[sliceNum + globStates.stSliceShift];
      taglineSliceNext = currTaglineSlices[sliceNum + globStates.stSliceShift + 1];
      taglineSlicePrev = currTaglineSlices[sliceNum + globStates.stSliceShift - 1];

elmnt.parentNode.classList.remove('orig-scale');
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = document.ontouchcancel = stopDragElement;
      document.onmousemove = document.ontouchmove = startDragElement;

draggedTarget = e.target;
      if (!draggedTarget.classList.contains('slide__slice')) {
        draggedTarget = draggedTarget.parentNode;
      }

nextSlide = document.querySelector('.slide.next');
      nextSlideSlices = nextSlide.querySelectorAll('.slide__slice');
      nextElem = nextSlideSlices[sliceNum];
    }

function startDragElement(e) {
      globStates.isDrag = true;
      e = e || window.event;
      // calculate the new cursor position:
      pos2 = pos4 - e.clientY;
      pos4 = e.clientY;
      topPos = +elmnt.dataset.top - pos2;
      mouseCursor.updCursorLineHeightAndTop(topPos);

if (isFirstSlide) {
        topPos = topPos > 0 ? 0 : topPos;
      }

elmnt.style.transform = 'translateY(' + (topPos) + 'px)';

if (topPos < 0) {
        nextElem.style.transform = 'translateY(' + (window.innerHeight + topPos) + 'px)';
      } else {
        if (!isFirstSlide) {
          nextElem.style.transform = 'translateY(' + (-window.innerHeight + topPos) + 'px)';
        }
      }

elmnt.dataset.top = topPos;

if (taglineSlice) {
        let taglineTop     = map(topPos, 0, globStates.freeDragHeight, 0, 60);
        let taglineTopNext = map(topPos, 0, globStates.freeDragHeight, 0, 30);
        let taglineTopPrev = map(topPos, 0, globStates.freeDragHeight, 0, 15);
        taglineSlice.style.transform     = 'translateY(' + -taglineTop + '%)';
        taglineSliceNext.style.transform = 'translateY(' + -taglineTopNext + '%)';
        taglineSlicePrev.style.transform = 'translateY(' + -taglineTopPrev + '%)';

let slideDigitTop     = map(topPos, 0, globStates.freeDragHeight, 0, 60);
        let slideDigitTopNext = map(topPos, 0, globStates.freeDragHeight, 0, 30);
        currSlideDigits[0].style.transform = 'translateY(' + -slideDigitTop + '%)';
        currSlideDigits[1].style.transform = 'translateY(' + -slideDigitTopNext + '%)';
      }

if (topPos > 0) {
        nextSlide.classList.add('top');
      } else {
        nextSlide.classList.remove('top');
      }

if (topPos < -globStates.freeDragHeight) {
        goToNextSlide(draggedTarget.dataset['sliceNum'], -1);
        pos2 = pos3 = topPos = 0;
      } else if (topPos > globStates.freeDragHeight) {
        pos2 = pos3 = topPos = 0;
        goToNextSlide(draggedTarget.dataset['sliceNum'], 1);
      }
    }

function stopDragElement() {
      mouseCursor.resetCursorLine(topPos > 0 ? 1 : -1, false);
      globStates.isDrag = false;

if (topPos < -globStates.freeDragHeight) {
        goToNextSlide(draggedTarget.dataset['sliceNum'], -1);
      } else if (topPos > globStates.freeDragHeight) {
        goToNextSlide(draggedTarget.dataset['sliceNum'], 1);
      } else {
        elmnt.parentNode.classList.add('orig-scale');
          new TimelineMax({ onComplete: slideBackCallback })
            .to([elmnt, taglineSlicePrev, taglineSliceNext, taglineSlice, currSlideDigits], .3, { y: 0, clearProps: 'y' })
            .to(nextElem, 0.3, { y: (topPos < 0 ? '100%' : '-100%'), clearProps: 'y' }, 0);

function slideBackCallback() {
          elmnt.dataset.top = 0;
        }
      }
      /* stop moving when mouse button is released:*/
      document.onmouseup = document.ontouchcancel = null;
      document.onmousemove = document.ontouchmove = null;
    }

pos2 = pos3 = topPos = 0;
  }

return {
    allSlides, slidersCount, allTaglines, goToNextSlide, initSlider
  };
})(globStates);

/////////////////////////////////////////////////////

slides.initSlider();

setTimeout(() => {
  matrixStyleRounding(jsMatrix);
  preload.animate();
}, 200);

function splitTextInSpans(elem) {
  const letters = elem.textContent.split('');
  elem.innerHTML = '';
  return letters.map(letter => {
    const span = document.createElement('span');
    span.textContent = letter;
    elem.appendChild(span);
    return span;
  });
}

/**
 * @param currSlideSlices - array of slices for sorting
 * @param startSliceIdx - select position for sorting
 * @returns {Array} - sorted slices
 */
function getSortedSlicesBySelectPos(currSlideSlices, startSliceIdx) {
  const slicesCount = currSlideSlices.length;
  const sortedSlices = [];
  const posShift = (startSliceIdx - 1.5);
  let slicesNewOrder = [];

// calc new positions for slide slices
  for (let i = slicesCount - 1; i >= 0; --i) {
    slicesNewOrder.push({
      idx: i,
      shift: Math.abs(slicesCount / 2 + posShift - i)
    });
  }

slicesNewOrder
    .sort((a, b) => a.shift - b.shift)
    .forEach((item) => {
      sortedSlices.push(currSlideSlices[item.idx]);
    });

return sortedSlices;
}

window.addEventListener('resize', function () {
  matrixStyleRounding(jsMatrix);
});

// recalc matrix (округление значений к integer)
function matrixStyleRounding(inObj) {
  if (inObj) {
    for (let i = 0; i < inObj.length; ++i) {
      const tmpObj = inObj[i];
      tmpObj.style.transform = '';
      let matrix = getComputedStyle(tmpObj).transform;
      matrix = matrix.slice(7, -1).split(' ').map(function (item) {
        return parseInt(item);
      });
      tmpObj.style.transform = 'matrix(' + matrix.join(',') + ')';
    }
  }
}

function map(target, start1, stop1, start2, stop2) {
  return ((target - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg