Как сделать preloader как на сайте?

Всем привет. Может кто-нибудь подсказать как сделать preloader как на uix.me с анимацией? Как я понял анимация у них работает через JavaScript, с которым у меня проблемы. Да ещё всё перекомпресировано, не могу найти откуда ноги растут. Вроде перенёс весь HTML и CSS
codepen
, а вот что делать с JS не знаю.
.preloader, .ovly { display: none; position: absolute; text-align: center; height: 100%; width: 100%; align-items: center; justify-content: center; background-color: #fff; z-index: 999; color: #000; text-align: center; height: 100%; width: 100%; align-items: center; justify-content: center; overflow: hidden; } .preloader section, .ovly section { z-index: 1 } .preloader h3, .ovly h3 { display: inline-block; font-size: 3rem; font-family: Sansation-Light; } .preloader section { width: 100%; } .preloader span, .ovly span { display: inline-block } .preloader .p1 span:nth-child(1) { animation: span-1 1s ease-in-out 1; } .preloader .p1 span:nth-child(2) { animation: span-2 3s ease-in-out 1; } .preloader .p1 span:nth-child(3) { animation: span-3 5s ease-in-out 1; } .preloader .p1 span:nth-child(4) { animation: span-4 7s ease-in-out 1; } .preloader .p1 span:nth-child(5) { animation: span-5 9s ease-in-out 1; } @media screen and (max-width:640px) { .preloader span, .ovly span { display: block; margin: 12px 0 } } @media screen and (max-width:640px) { .preloader span.dot { display: none } } @media screen and (max-width:640px) { .preloader span:nth-child(5):after { content: "." } } @media screen and (max-width:640px) { .preloader span:nth-child(6) { color: #eb9e66 } } .preloader.active, .ovly.active { display: flex } .pline { position: absolute; height: 2px; width: 20%; left: 40%; bottom: 20%; background-color: #bbb; -webkit-animation-name: pline; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */ animation-name: pline; animation-duration: 10s; animation-iteration-count: infinite; } @media screen and (max-width:640px) { .pline { width: 50%; left: 25%; bottom: 10% } } .pdisc { width: 100%; position: absolute; left: 0; color: #bbb; position: absolute; bottom: 24px } .pdisc p { font-size: 1rem } .pdisc span p { -webkit-animation-name: pdisc; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ animation-name: pdisc; animation-duration: 1s; } .ovly .pdisc { bottom: 25% } @media screen and (max-width:640px) { .ovly .pdisc { bottom: 24px } } .ovly .pdisc p { font-size: 1.25rem } /* Standard syntax */ @keyframes span-1 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-2 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-3 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-4 { 0% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes span-5 { 25% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 1;} 50% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0.2;} 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60);opacity: 0;display: none;} to {display: none;} } @keyframes pdisc { 100% {transform: matrix(0.99619, 0.08715, 0.08715, 0.99619, 0, 60)} } @keyframes pline { 0% {width: 20%} 100% {width: 0%} }

Just doing what I love

Diese Seite nutzt Cookies. Willkommen im Jahr 2018.

Ответ

Вот preloader написанный мной на codepen
Он использует GSAP в качестве анимационного движка. Это только JS который вам нужен:
var tlpl = new TimelineMax(), $p1 = $('.p1 span');
tlpl.staggerTo($p1, 0.5,{ opacity: 0, y: '-30', skewX: '5deg', skewY: '5deg',
},0.10,'+=1.65');