Помогите, пожалуйста! Animations (js/css)

Главные вкладки

Аватар пользователя Викт123 Викт123 16 июня 2018 в 18:03

Установила на сайт Друпал8 Animations (js/css)
3 библиотеки все лежат в папке libraries , модуль их все увидел и запустилась настройка.
Дальше нужно прописать селекторы в нужном эффекте. Прописываю.
пробовала
h2
#page *
#views-field-field-image
и др.
но ничего на сайте не анимировалось.
Что делаю не так? Не правильно пишу селекторы? Или что- то еще не доделала?

ВложениеРазмер
Иконка изображения скрин161.81 КБ

Комментарии

Аватар пользователя VasyOK VasyOK 17 июня 2018 в 1:16

Ваша задача:
1) поставить на сайт любой эффект отсюда https://daneden.github.io/animate.css/. Просто скопируйте к своим стилям стили от нужного эффекта. Например для bounce идем сюда
https://github.com/daneden/animate.css
и копируем отсюда https://github.com/daneden/animate.css/blob/master/source/_base.css и отсюда https://github.com/daneden/animate.css/blob/master/source/attention_seek...
2) поставить к любому элементу вашего сайта нужный класс например .bounce
Все - эффект применен.

Аватар пользователя Викт123 Викт123 17 июня 2018 в 3:55

Пожалуйста, можно подробнее. Куда это прописывать?
В настройки модуля animations?
Или в css темы?
Допустим, я хочу, чтобы при загрузке сайта анимировался блок #block-views-block-slider-block-1
Написала в css своей темы

block-views-block-slider-block-1 .animated {
animation-duration: 1s;
animation-fill-mode: both;
}

block-views-block-slider-block-1 .animated.infinite {
animation-iteration-count: infinite;
}
block-views-block-slider-block-1 .bounce {

animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
Кеш обновила, но ничего не происходит. Напишите, пожалуйста подробнее, что куда нужно писать? Нужно ли заполнять поле во вкладке эффекта в настройке модуля animations или только в css темы писать?

Аватар пользователя Викт123 Викт123 17 июня 2018 в 4:39

Еще попробовала так:
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}

.animated.infinite {
animation-iteration-count: infinite;
}
#block-views-block-slider-block-1 .bounceIn {
animation-iteration-count: infinite;
animation-duration: 0.75s;
animation-name: bounceIn;
}
/*@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}

20% {
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
transform: scale3d(0.9, 0.9, 0.9);
}

60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
transform: scale3d(0.97, 0.97, 0.97);
}

to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}*/

Аватар пользователя VasyOK VasyOK 17 июня 2018 в 4:49

"Куда это прописывать?" В CSS темы!
А чтобы у блока был класс - это можено сделать либо через перписывание шаблона блока либо через модуль block_class
А модуль animations пограйтесь и выкиньте.

Аватар пользователя Викт123 Викт123 17 июня 2018 в 9:05

сработало, поставила модуль block_class.
Но почему то только для эффекта bounceIn работает
делаю по аналогии все для эффекта rotateIn
Сохраняю, в странице кода в браузере на этом элементе отбражаются css стили эффекта, т.е. класс он видит, но почему то этот эффект не работает

Аватар пользователя Викт123 Викт123 17 июня 2018 в 12:24

И как сделать чтобы эффект при прокрутке срабатывал, подскажите, пожалуйста. А перечисленные эфффекты так и не поняла почему не работают

Аватар пользователя VasyOK VasyOK 17 июня 2018 в 20:44

"fadeInLeft тоже не работает" работает прекрасно все если отсюда скопировать стили

Добавление класса при прокрутке. jquery библиотели 2 попрлурные есть. Люди подскажите девшке название их. Я не помню.

Аватар пользователя Викт123 Викт123 18 июня 2018 в 8:48

Анимация заработала, спасибо, нужно было дописать время для анимации.
А по прокрутке, я все 3 библиотеки ( включая animation) копировала в папку libraries, но этого видимо недостаточно... присваиваю объекту класс анимации и wow, но не работает

Аватар пользователя ivnish ivnish 18 июня 2018 в 8:56

Каталоги имеют названия согласно README?

Аватар пользователя Викт123 Викт123 18 июня 2018 в 9:18

Да, точно эти пути. Модуль animations без правильно лежащих папок не запускался). Сейчас я этот модуль отключила, а папки так и остались лежать на месте