Я не очень опытен в анимации Javascript/jQuery/CSS3.
Мне нужен анимированный слайдер, поэтому я загрузил пример из Интернета и попытался его модифицировать.
На этом изображении баннера были справа, а тексты были на левой стороне. Но мне нужно изображение с левой стороны и тексты с правой стороны. Поэтому я меняю образ div
и текст css следующим образом:
Предыдущий код CSS:
.da-img {
position: absolute;
left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 10%;
}
После меня изменил:
.da-img {
position: absolute;
left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
position: absolute;
left: 40%;
}
После его изменения он работал нормально:
Но, когда слайдер идет влево-вправо или вправо, все идет в их предыдущее положение:
Я не понимаю, почему это произошло. Каждый раз после обновления страницы изображение отображается в левой части div
в первый раз, но после перемещения ползунка все меняется!
Пожалуйста, скажите мне, как я могу это исправить. Вы можете увидеть мои файлы прикасались здесь.
Чтобы лучше понять, как ключевые кадры работа идет здесь и есть читать об этом. они, как он объясняет, это просто очень хорошо.
есть некоторые вещи, с которыми вам нужно играть, прежде чем вы сможете заставить их работать: вот ваше начальное состояние:
.da-slide-fromleft h2{
-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
остальное находится в образце в строке css/style.css # 337, так как название подсказывает, что происходит, когда оно скользит с левой стороны. эта анимация реагирует на этот ключевой кадр:
@-webkit-keyframes fromLeftAnim1{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
0%{ left: -110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
это похоже на то, что вы меняете мой элемент с -110%
до 10%
и пока вы делаете это, измените его непрозрачность на 1. то, что вам нужно сделать, - это увидеть, есть ли какой-либо существующий ключевой кадр, который соответствует тому, что вам нужно, скопируйте один из них, измените имя и сыграйте с позициями (справа или слева) и %
поэтому он будет выглядеть примерно так:
.da-slide-fromleft h2{
-webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
-moz-animation: your_custom_name 0.6s ease-in 0.6s both;
-o-animation: your_custom_name 0.6s ease-in 0.6s both;
-ms-animation: your_custom_name 0.6s ease-in 0.6s both;
animation: your_custom_name 0.6s ease-in 0.6s both;
}
и является ключевым элементом:
@-webkit-keyframes your_custom_name{
0%{ left: -10%; opacity: 0; }
100%{ left: 110%; opacity: 1; }
}
также вы можете играть, чтобы сделать его лучше с переходами анимации и временем, easy-in
, easy-out
и т.д. подробнее здесь: CLICK ME:
@keyframes fromRightAnim1
в правильное положение? так это работает с вашим стилем анимации?