ПоделитьсяTweetПоделитьсяGoogle
Доброго времени суток читателям. Хочу поведать о хорошем адаптивном революционном слайдере, он так и называется Slider Revolution.
Это плагин для wordpress, хотя я его ставил и в html документ, разные лендинги. Если его забросить на хост, то потом в iframe можно куда угодно ставить.
Чем хорош этот плагин?
- Своей адаптивностью, работает на всех устройствах (девайсах)
- Изобилует встроенными эффектами анимации
- Многослойностью — можете создавать элементы слоями
- Многовариантностю — один плагин, а слайдеров разных хоть на каждой странице блога в 500 страниц
Расположить этот слайдер можно как в шапке главной страницы, то есть на всю ивановскую (на всю ширину браузера)
так и в отдельном блоке или через виджет в сайдбаре.
Если вы делаете слайдер для сайдбара или какого-то блока (не на всю ширину , то есть какие-то компактные параметры), то особо мудрствовать с адаптацией не нужно, подобрали картинки ближе к нужному размеру, задали размеры сетки плагина и лепите слои. Слайдер будет работать удовлетворительно.
Но если вы делаете слайдер на всю ширину экрана, то:
- фон нужно подобрать или однотонный или где много объектов, так как он будет обрезаться на разных устройствах, допустим на фоне у вас стоят студенты или бизнесмены, то на широком экране 1920х1080 они приблизятся и им будет секир башка и ног, а на узком обрежет крайних (совет никогда не стойте с краю 🙂 ) или вообще руки и плечи
- изображения не должны быть размером заданной сетки, а намного меньше по ширине, по высоте могут быть равными.
Допустим я делаю слайдер для блокового сайта, то есть не на всю ширину экрана, а на всю ширину моего сайта, то задаю размер сетки такой как на скрине
Подбираю картинки и ни очём не догадываюсь, что картинки должны быть не фоновыми и вообще желательно без фона в png . Подобрал людей стоящих или автомобиль на всю ширину сетки и смотрю балдею как слайды прыгают, затем проверяю на ipad .
О, чё за фигня получилась…. Людей порезало и автомобиль не весь влазит. Так это ещё я слайдер не на всю ширину экрана выбирал.
Я думаю смысл понятен, нужны картинки мелкие и без фона, фон картинок обрезаем в фотошопе или находим уже без него.
Сам бекграунд или фон по нашему (фон барон) делаем или подбираем под тему общий, для слайда на котором слоями будет происходить действие. Фон который можно обрезать не теряя смысл изображения, или вообще поставить прозрачный, он (слайдер) примет фон сайта, на этом фоне и будут происходить движения остальных слоёв картинок в png или gif (без фоновые расширения). Такие изображения делаете сами или просто набираете, допустим стрелка нужна, пишем в поиске arrow.png
Добавляете новый слайд в только, что созданном слайдере, переходите в настройки слайда, лепите фон первым изображением или ставите галочку «Прозрачность»
Теперь делаем движения на этом слайде. У меня на моём сайте ( по кнопке в меню «В студию«) первый слайд идёт картинка фон — солнечная система с минимум фона. Картинка фон компактна потому подойдёт под большинство расширений
следующий движ, добавляем слой для текста, кнопка «Добавить слой» или слой Изображение — соответствующая кнопка,
у меня это картинка выезжаещего создателя, для меня это Сварог, может у вас другие имена, базара нет, имён много смысл один.
Картинка активна в редакции, также при добавлении других, когда их много , кликнув по картинке она становится активной и её редактирование возможно.
Зажав мышкой передвигаю картинку в нужный мне угол, слева в редакционном меню выбираю
параметры, размер и точный сдвиг, анимацию
По умолчанию время появления, так же как и исчезновения стоит 300 , то есть 0,3 сек, это слишком мало , то есть слишком быстро выскакавает, я поставил 1800. Сама анимация Long from Top — Долго сверху, вы выберите своё, то что вам более подойдёт.
Так, я думаю этот процесс ясен, теперь по времени появления элемента, справа шкала добавленных елементов и их время появления на этом слайде, каждый новый добавленный элемент автоматически задаётся временем начала показа на слайде предыдущего элемента и окончания показа самого слайда, то есть время работы этого общего слайда 8 секунд, вы добавили первый элемент, задали ему время появления 4000 (4 сек) конец оставили 8 сек или пусть он уедет раньше конца всего слайда, допустим в 6 сек — 6000, добавляете следующий элемент (текст или картинку) автоматически пропишется время выезда 4000 и уезда 8000 , редактируете нужное вам время движения
Изменения можно тут же увидеть в живую — кнопки находятся справа в экране просмотра.
- Сначала на зелёную, обновим — перезапишем параметры изменений
- Затем на кнопку лупы — просмотр в действии
Чем хорош слайдер, так это тем что сюда можно добавлять свой код html. Допустим вам не подходят кнопки предлагаемые слайдером или вы хотите, чтобы выезжала форма подписки, например взятая из Джастклика, или по кнопке выплывала во всплывающем окне форма подписки, пожалуйста, всё что угодно, только для своих кнопок, css потребуется добавить в сам шаблон сайта, в тему и помните, что в предпросмотре слайдер не отобразит ваш css, смотреть ваши изменения в css нужно уже в оригинале на сайте.
Короче дуйте сюда и качайте этот правильный Слайдер Революшн здесь даром..
просмотреть Слайдер Революшн
Вот и всё, всем удачи!
ПоделитьсяTweetПоделитьсяGoogle