Всем привет. Может кто-нибудь подсказать как сделать 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');
Комментариев нет:
Отправить комментарий