Как редактировать слайдер jquery

0

Я не очень опытен в анимации 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%;
}

После его изменения он работал нормально:

Изображение 174551

Но, когда слайдер идет влево-вправо или вправо, все идет в их предыдущее положение:

Изображение 174551

Я не понимаю, почему это произошло. Каждый раз после обновления страницы изображение отображается в левой части div в первый раз, но после перемещения ползунка все меняется!

Пожалуйста, скажите мне, как я могу это исправить. Вы можете увидеть мои файлы прикасались здесь.

  • 0
    Вы отрегулировали @keyframes fromRightAnim1 в правильное положение? так это работает с вашим стилем анимации?
  • 0
    Нет, я не могу понять, как я это настраиваю :(
Показать ещё 1 комментарий

1 ответ

0
Лучший ответ

Чтобы лучше понять, как ключевые кадры работа идет здесь и есть читать об этом. они, как он объясняет, это просто очень хорошо.

есть некоторые вещи, с которыми вам нужно играть, прежде чем вы сможете заставить их работать: вот ваше начальное состояние:

.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:

  • 0
    Что касается вас, я говорю, что у меня нет никаких знаний об изменении анимации javascript / css3. Мне сложно понять ваши URL и точки. Я думал, что всего 1 или 2-строчный код в js может исправить это. Но, Теперь я понимаю, что это сложно для меня. Если я удаляю все CSS для анимации, все помещается в выбранное место без какой-либо анимации. Но в ie7 они все равно противоположны выбранному мной направлению. Так что я могу Не справитесь. Можете ли вы дать мне URL другого слайдера контента, где мне не нужно сложное изменение? Мне нужен слайдер для этого контента: i.imgur.com/RutfmRw.png
  • 0
    @ user1896653 Я помогу тебе больше завтра .. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню