Анимация появления блоков для Landing Page и не только при помощи fm.revealator.jquery.js
Revealator
Особенности
Как работает плагин
Краткая инструкция по работе с плагином
Анимация
Задержка:
Продолжительность:
Полезные ссылки
Глянуть на работу плагина в живую
Revealator страница на GitHub
Загрузить Revealator
Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы.
Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта.
Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид веб проекту.
Revealator
Revealator – это простой плагин анимации, запускаемый из области просмотра, который анимирует любые элементы с помощью пользовательских эффектов CSS3 при их прокрутке в окне просмотра.
В этом посте мы рассмотрим jQuery плагин Revealator, при помощи которого Вы сможете реализовать красивую анимацию блоков, почти не вдаваясь в детали разработки cкрипта. Все что вам нужно будет сделать это подставить определенные классы предоставленные revealator к элементам которые Вы хотите анимировать, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.
Особенности
- Определяет, находится ли элемент в области просмотра, и добавляет к нему класс
- 8 встроенных анимаций на основе анимации CSS3.
- Вы можете добавить свои собственные эффекты, используя CSS3.
- Пользовательская продолжительность анимации и задержка.
Как работает плагин
Плагин Revealator состоит из двух основных файлов:
fm.revealator.jquery.css – CSS стили эффектов,
fm.revealator.jquery.js – скрипт.
Для работы плагина, необходимо наличие подключенной библиотеки jQuery.
Краткая инструкция по работе с плагином
- Загрузите таблицу стилей fm.revealator.jquery.css в head раздел и fm.revealator.jquery.js в конец документа.
<link rel="stylesheet" href="fm.revealator.jquery.css"> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="fm.revealator.jquery.js"></script>
- Укажите тип эффекта, который вы хотите применить к элементу, когда он появляется.
revealator-fade revealator-rotateleft revealator-rotateright revealator-slideleft revealator-sliderightt revealator-slideup revealator-ZoomIn revealator-ZoomOut
Что бы в верстке объект выглядел примерно так:
revealator-once
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз.
При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Анимация
Обычное появление элемента
revealator-fade
Появление элемента с легким поворотом влево
revealator-rotateleft
Появление элемента с легким поворотом вправо
revealator-rotateright
Появление элемента слайдом справа на лево
revealator-slideleft
Появление элемента слайдом слева на право
revealator-slideright
Появление элемента слайдом снизу на вверх
revealator-slideup
Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomin
Появление элемента с эффектом увеличения от меньшего к большему
revealator-zoomout
Задержка:
Установить задержку эффекта на 100ms
revealator-delay1
Установить задержку эффекта на 200ms
revealator-delay2
Установить задержку эффекта на 300ms
revealator-delay3
Установить задержку эффекта на 1900ms
revealator-delay19
Установить задержку эффекта на 2000ms
revealator-delay20
Продолжительность:
Установить длительность эффекта на 100ms
revealator-duration1
Установить длительность эффекта на 200ms
revealator-duration2
Установить длительность эффекта на 300ms
revealator-duration3
… … Установить длительность эффекта на 1900ms
revealator-duration19
Установить длительность эффекта на 2000ms
revealator-duration20
Полезные ссылки
Глянуть на работу плагина в живую
jQuery-Revealator готовый пример применения
Так же не плохой пример от коллеги по цеху
И еще от одного коллеги
Revealator страница на GitHub
https://github.
com/QODIO/revealator
Загрузить Revealator
Источник записи: https://techblog.sdstudio.top/blog/javascript-animaciya-poyavleniya-blokov-dlya-landing-page-i-ne-tolko-pri-pomoshi-fmrevealatorjqueryjs
javascript — экрану — Как сделать перемещение вверх и вниз при прокрутке страницы?
элемента экрану фиксируем фиксация страницы скроллинге скролле прокрутке прокрутка при появление перемещение объекта меню исчезновение движение выезжающий блок div javascript jquery css html
26 эффектов прокрутки jQuery
Коллекция бесплатных примеров кода прокрутки jQuery из Codepen, Github и других ресурсов.
Обновление коллекции марта 2021 года. 6 новых предметов.
- Эффекты прокрутки CSS
О коде
jQuery Различные скорости прокрутки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Прокрутка одной страницы с эффектом глубины
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery.easing.js
О коде
Отображение круга текста на прокрутке
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Эффект прокрутки коробки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css, scrollTrigger.js, gsap.js
О коде
Кнопка «Ракета наверх»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.
css
О коде
Flavortown Scrolltrigger
Ответ: да
Зависимости: gsap.js, scrollTrigger.js, splitting.js
О коде
Текст с горизонтальной прокруткой
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Трансформация треугольного свитка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tweenmax.js, morphsvgplugin.js
О коде
Секция масштабного героя на свитке
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Искажение прокрутки
Tornis.js + GSAP для обновления значений фильтра SVG при прокрутке.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: tornis.js, tweenmax.js
О коде
Уникальная презентация прокрутки
Эта уникальная презентация с прокруткой использует CSS Grid и немного JavaScript для изменения фиксированного изображения, когда пользователь прокручивает страницу.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Прокрутка со всех сторон
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: font-awesome.css
О коде
Карточка с прокруткой статей
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: smooth-scrollbar.js, overscroll.js
О коде
Zoom Hero Image On Scroll
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Одностраничная прокрутка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимация списка прокрутки
Пример анимации плавной прокрутки для листинга.
Сделано с помощью smooth-scrollbar.js и плагина overscroll.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: smooth-scrollbar.js, overscroll.js
О коде
Показать элементы в прокрутке
Использование jQuery и SCSS для постепенного вывода элементов на экран.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Самурай — ScrollMagic и TweenMax
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tweenmax.js, scrollmagic.js
О коде
Анимация отображения маски изображения
Эффект прокрутки вниз в jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Горизонтальная прокрутка с GSAP и ScrollMagic
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: bootstrap.
css, tweenmax.js, scrollmagic.js
О коде
Эффект прокрутки jQuery для текста
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tweenmax.js, smooth-scrollbar.js
О коде
Фиксированный элемент Momentum Scroll
Часто фиксированные элементы могут показаться немного неестественными. Я хотел придать немного больше веса плавающему объекту. Я попытался передать ощущение естественной прокрутки браузера. Это также не мешает прокрутке страницы по умолчанию, поэтому здесь не происходит «прокрутки».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Плавная прокрутка страниц в jQuery
Вы меняете стиль :focus . Но то, что синее поле вообще бывает, очень хорошо для доступности.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Перекошенный свиток на одну страницу
Просто прокрутите вниз.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект свитка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект прокручивающейся волны на границе
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Вернуться к верхней стрелке
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Как отображать элемент при прокрутке вниз и скрывать при прокрутке вверх с помощью Elementor
Выбор Elementor в качестве конструктора страниц дает много преимуществ. Elementor предоставляет множество вариантов настройки большинства незначительных вещей, чтобы сделать ваш сайт WordPress привлекательным.
Одним из преимуществ является обнаружение и скрытие элемента путем прокрутки вниз и прокрутки вверх.
Некоторые элементы можно показать или скрыть с помощью прокрутки, например:
- Кнопка «Наверх»
- Плавающая кнопка призыва к действию
- и т. д.,
В этой статье показано, как отображать элемент при прокрутке вниз и скрывать его при прокрутке вверх с помощью Elementor.
Как отображать элемент при прокрутке вниз и скрывать при прокрутке вверх с помощью Elementor
Прежде чем продолжить обучение, мы хотели бы убедиться, что у вас уже есть Elementor Pro, поскольку нам понадобятся две функции, доступные только в Elementor Pro: Theme Builder и пользовательский CSS.
Итак, приступим!
Как отобразить кнопку «Наверх» с помощью прокрутки вниз и скрыть с помощью прокрутки вверх
Перейдите в редактор Elementor; вы можете редактировать существующее содержимое (страницу, сообщение и шаблон) или создать новое.
Шаг 1. Создайте кнопку «Вверх»
Войдите в редактор Elementor, выберите виджет «Кнопка» на панели виджетов, перетащите его в область холста. Вы можете разместить этот виджет в любом месте на своей странице, потому что мы отрегулируем его положение. В этом примере мы поместили виджет «Кнопка» внизу страницы.
На панели «Настройки », Мы применили некоторые изменения, как ниже:
Содержание Вклад Стрелка UP ИЗОН из библиотеки
Стиль Вкладка:
- Фиксированная позиция :
- Высота : 1
- .0304
- Ширина : 1
Advanced
- Смещение : 50 PX
- Смещение 3 9000 PX0004
Далее мы собираемся сделать кнопку доступной для нажатия.
Вернитесь на вкладку Content на панели настроек и начните связывать кнопку с верхней частью страницы, заполнив поле Link . Нам нужно перейти в верхний раздел и нажать кнопку Edit Section . На вкладке Advanced перейдите к CSS ID , добавьте любое имя идентификатора и скопируйте его. После того, как вы скопировали имя CSS ID, вернитесь к кнопке Edit 9.0004 -> вкладка Content и вставьте имя CSS ID в поле Link .
Так что теперь, независимо от того, где вы находитесь на этой странице, вы будете перемещены наверх, если вы нажмете кнопку.
Шаг 2. Скрытие и отображение кнопки «Наверх»
Как видно из приведенного выше GIF, функция кнопки работает хорошо. Но когда вы находитесь в верхней части страницы, вы все равно можете видеть кнопку «Наверх». Итак, это выглядит не очень хорошо. Таким образом, было бы полезно, если бы вы сделали так, чтобы кнопка исчезала, когда вы находитесь в верхней части, и чтобы кнопка появлялась, когда вы прокручиваете несколько высот вниз.
Хорошо, давайте так!
- JavaScript
Вам нужно добавить несколько фрагментов JavaScript, чтобы действие произошло. Но не стоит беспокоиться, потому что мы уже написали для вас фрагмент JavaScript; скопировать и вставить.
Создайте новый раздел, щелкнув значок плюса ( + ), выбрав виджет HTML на панели виджетов, а затем перетащив его в область холста. В этом примере мы добавляем виджет HTML выше в верхнюю часть этого примера.
Затем добавьте следующий фрагмент JavaScript в HTML Code , скопировав и вставив приведенный ниже фрагмент кода JavaScript:
<скрипт>
смещение переменной = 400
$(окно).on('загрузить прокрутку', function(){
если($(окно). scrollTop() > смещение){
$('тело').addClass('показать')
}еще{
$('тело').removeClass('показать')
}
})
scrollTop() > смещение){
$('тело').addClass('показать')
}еще{
$('тело').removeClass('показать')
}
})
Мы дадим вам краткое описание приведенного выше фрагмента кода JavaScript. Когда вы прокручиваете 400 пикселей, тело имени класса будет добавлено и показано, а когда вы перейдете в верхнюю часть страницы, имя класса шоу будет удалено.
- Пользовательский CSS
Завершив добавление фрагмента кода JavaScript в поле HTML, вернитесь к настройкам виджета «Кнопка». На вкладке Advanced откройте блок Custom CSS и добавьте следующий фрагмент CSS:
selector{
непрозрачность: 0;
переход: все 0,3 с плавного входа-выхода;
}
селектор body.show{
непрозрачность: 1;
} Теперь кнопка «Вернуться к началу» отлично скрывается и открывается.
Не забудьте нажать UPDATE или ПУБЛИКАЦИЯ , чтобы сохранить работу, которую вы только что сделали.
Как отобразить плавающую кнопку призыва к действию с помощью прокрутки вниз и скрыть с помощью прокрутки вверх
Перейдите в редактор Elementor; вы можете редактировать существующее содержимое (страницу, сообщение и шаблон) или создать новое.
Шаг 1. Создание плавающей кнопки призыва к действию
В Elementor существует два метода создания плавающей кнопки призыва к действию:
- Путем установки Z-Index
- Путем создания всплывающего окна
В этом примере мы будем использовать первый метод с использованием Z-Index. Мы уже публиковали статью «Как создать плавающую кнопку в Elementor)». Вы можете нажать на ссылку для более подробной информации. Давайте начнем!
Зайдите в свой редактор Elementor; вы можете отредактировать существующий контент (страницы, посты, шаблон) или создать новый.
В этом примере мы будем редактировать нашу текущую страницу. Сначала создайте новый раздел с одним столбцом. Выберите виджет «Кнопка» и перетащите его в область холста с панели виджетов. Далее отредактируйте Текстовая кнопка и ссылка . В этом уроке мы будем использовать кнопку в качестве триггера для перехода посетителей на сайт продажи билетов на концерт Тейлор Свифт.
Шаг 2: Скрытие и отображение плавающей кнопки призыва к действию
Как видно из приведенного выше GIF-файла, вы все еще можете видеть плавающую кнопку призыва к действию в верхней части страницы. Чтобы плавающая кнопка призыва к действию исчезала, когда вы находитесь в верхней части и завершаете работу, плавающая кнопка появляется при прокрутке вниз на несколько высот. Вы можете повторить свои действия, скрывая и открывая кнопку «Наверх» выше.
Примечание. Когда вы редактируете, чтобы скрыть и показать кнопку «Вверх» и кнопку «Плавающий призыв к действию» на одной странице, вам нужно всего лишь вставить фрагмент кода CSS в поле Custom CSS .