Jquery div плавное появление – Как сделать плавное появление блока при прокрутке вниз (например, 300px)? — Хабр Q&A — Вебджем.рф

Содержание

Как сделать плавное появление блока CSS?

Приветствую вас, дорогие друзья!

В этой статье хочу вам показать два, очень интересных приема работы с CSS3, которые дают возможность сделать плавное появление блока CSS свойствами. Используя данную возможность можно сделать достаточно много интересных вещей для своего сайта. Например, мы можем сделать плавное появление элемента при наведении на какой-либо элемент на странице, или показать элемент через определенный интервал времени не используя при этом никаких скриптов!

Навигация по статье:

Плавное появление блока CSS при наведении

В ситуации, когда нам нужно показать блок при наведении, мы должны сделать следующее:

1.Создаем блок, который будет плавно появляться на странице, и блок, который будет по умолчанию скрыт:
<div> Видимый </div> <div> Скрытый </div>
<div>
Видимый
</div>

<div>
Скрытый
</div>

2. Задаем стили оформления:

.on-hover{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; margin-bottom:20px; text-align:center; } .hidden-block{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; text-align:center; opacity:0; /*Элемент полностью прозрачный (невидимый)*/ transition: 1s; /*Скорость перехода состояния элемента*/ }

.on-hover{

width:300px;

background:#176387;

color:#fff;

font-size:25px;

border:3px solid #2BA2DB;

padding:20px;

margin:auto;

margin-bottom:20px;

text-align:center;

}

.hidden-block{

width:300px;

background:#176387;

color:#fff;

font-size:25px;

border:3px solid #2BA2DB;

padding:20px;

margin:auto;

text-align:center;

opacity:0; /*Элемент полностью прозрачный (невидимый)*/

transition: 1s; /*Скорость перехода состояния элемента*/

}

Скрытый блок делаем полностью прозрачным (opacity:0;), и задаем ему скорость перехода между состояниями элемента (transition: 1s;), в моем случае равное 1 секунде.

3.А теперь, для того, чтобы сделать плавное появление блока CSS нужно сделать следующее:
.on-hover:hover+ .hidden-block{ opacity:1; transition: 1s; }
.on-hover:hover+ .hidden-block{
opacity:1;
transition: 1s;
}

Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом

.on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).

Так как блок .hidden-block не находится внутри .on-hover, то я использую hover с +. В случае если у вас скрытый элемент находится внутри элемента, на который нужно навести указатель мышки, то вам нужно использовать вот такой селектор:
.on-hover:hover .hidden-block

Вот что у нас получилось:

Видимый

Скрытый

Плавное появление блока CSS с задержкой по времени

Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.

В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:

1.Создаем блок, который по умолчанию будет полностью прозрачным:

<div> Плавное появление блока CSS </div>

<div>

Плавное появление блока CSS

</div>

2.В CSS, помимо свойств оформления элемента указываем прозрачность и скорость перехода:

.anim-show{ width:300px; background:#176387; color:#fff; font-size:25px; border:3px solid #2BA2DB; padding:20px; margin:auto; margin-bottom:20px; text-align:center; opacity:0; /*Элемент полностью прозрачный (невидимый)*/ transition: 1s; /*Скорость перехода состояния элемента*/ animation: show 3s 1; /* Указываем название анимации, её время и количество повторов*/ animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */ animation-delay: 1s; /* Задержка перед началом */ }

.anim-show{

width:300px;

background:#176387;

color:#fff;

font-size:25px;

border:3px solid #2BA2DB;

padding:20px;

margin:auto;

margin-bottom:20px;

text-align:center;

opacity:0; /*Элемент полностью прозрачный (невидимый)*/

transition: 1s; /*Скорость перехода состояния элемента*/

animation: show 3s 1; /* Указываем название анимации, её время и количество повторов*/

animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */

animation-delay: 1s; /* Задержка перед началом */

}

Так же мы задаем свойство animation, в котором произвольно задаем название анимации (show), ее скорость (3 секунды) и количество повторений (1), а для того, что бы после выполнения анимации наш элемент не возвращался к первоначальному состоянию указываем свойство animation-fill-mode со значением forwards.

Кроме того, задаем дополнительное свойство, которое отвечает за задержку начала анимации (

animation-delay) равное 1 секунде.

3.Задаем при помощи правила @keyframes последовательность, с которой будет появляться наш блок:
@keyframes show{ 0%{ opacity:0; } 100% { opacity:1; } }
@keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}

Вот, как это работает (нужно обновить страницу):

Плавное появление блока CSS

Как видите анимации, плавного появления блока CSS достаточно просты в использовании, и, я думаю, у вас не должно возникнуть сложностей в их использовании. Если у вас появятся вопросы или замечания, вы можете оставить их в комментариях.

А на этом у меня сегодня все. Обязательно поделитесь статьей в социальных сетях и подпишитесь на мою рассылку.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Анимация появления блоков для Landing Page

На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.

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

Посмотреть Demo

Параметры jQuery плагина Revealator

Класс	Описание
revealator-fade	Обычное появление элемента
revealator-rotateleft	Появление элемента с легким поворотом влево
revealator-rotateright	Появление элемента с легким поворотом вправо
revealator-slideleft	Появление элемента слайдом справа на лево
revealator-slideright	Появление элемента слайдом слева на право
revealator-slideup	Появление элемента слайдом снизу на вверх
revealator-zoomin	Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomout	Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Класс	Описание
revealator-delay1	Установить задержку эффекта на 100ms
revealator-delay2	Установить задержку эффекта на 200ms
revealator-delay3	Установить задержку эффекта на 300ms
…	…
revealator-delay19	Установить задержку эффекта на 1900ms
revealator-delay20	Установить задержку эффекта на 2000ms

Продолжительность:

Класс	Описание
revealator-duration1	Установить длительность эффекта на 100ms
revealator-duration2	Установить длительность эффекта на 200ms
revealator-duration3	Установить длительность эффекта на 300ms
…	…
revealator-duration19	Установить длительность эффекта на 1900ms
revealator-duration20	Установить длительность эффекта на 2000ms

Показывать эффект только один раз

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Revealator

Как это работает?

Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.

Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Revealator Plugin</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="fm.revealator.jquery.css">
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/fm.revealator.jquery.js"></script>
   </head>
   <body>
      <div>
         <h2>
            ↓↓↓ Scroll down ↓↓↓
         </h2>
      </div>
      <div>
         <div>
            revealator-slideup revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slidedown revealator-once revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
      </div>
      <div>
         <div>
            revealator-slideleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
      </div>
      <div>
         <div>
            revealator-slideright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div>
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
      </div>
      <div>
         <div>
            revealator-zoomin revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div>
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
      </div>
      <div>
         <div>
            revealator-zoomout revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
      </div>
      <div>
         <div>
            revealator-fade revealator-delay# revealator-duration10
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div>
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
      </div>
      <div>
         <div>
            revealator-rotateleft revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div>
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
      </div>
      <div>
         <div>
            revealator-rotateright revealator-delay#
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div>
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
      </div>
      <div>
         <div>
            End
         </div>
      </div>
   </body>
</html>

На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.

Скачать демо просмотр

Плавное появление блока CSS | Only to top

Солдатов Николай

Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

<div>i</div>

<div>Скрытый элемент</div>

Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п.

Магия CSS

.o2t-element--hidden {
    opacity: 0;
    visibility: hidden;
    transition: .55s opacity, .55s visibility;
}
.o2t-element:hover ~ .o2t-element--hidden {
    opacity: 1;
    visibility: visible;
}

Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility

До скрытого элемента мы добрались с помощью родственного селектора ~ (тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >

Пример с более сложной структурой

Допустим, у нас следующая структура

<div>i</div>

<div>
    <div>Плавно всплывающий/исчезающий блок при наведении</div>
</div>

Тогда CSS будет следующий

.o2t-element:hover + div > .o2t-element--hidden {
    opacity: 1;
    visibility: visible;
}

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

admin
26/11/2019 14:39
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Боремся с неплавной анимацией скрытых элементов / Habr
Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code:
Отмечу, что глюк на данной конкретной странице можно увидеть во всех браузерах кроме ie6 и ie7. Итак, если нажать на кнопку Run Code, мы увидим плавное появление блока «p.neat» из прозрачного состояния с нулевой высотой и шириной примерно до такого состояния:
После чего высота блока резко скачет до раскрытого состояния:
Может даже показаться, что браузер на долю секунды «тормознул», но настоящяя причина такого поведения в том, что jQuery не верно считает высоту невидимого блока. Но не спешите стрелять в музыканта, давайте лучше попытаемся разобраться, почему так происходит. Отмечу заранее, с этим глюком можно справиться почти всегда.
Во первых, давайте обозначим некоторые условия появления глюка: Он возникает тогда, когда мы хотим «развернуть» ранее не видимый на странице блок с помощью функций show(speed), toggle(speed), slideDown() и animate({height: ‘show’}). Очевидно, что для того, чтобы сделать анимацию раскрытия блока, нужно менять его высоту от нуля до какой-то высоты. Причем, эта высота должна быть вычислена до начала анимации. Как известно, HTML и CSS предоставляют нам только 2 способа спрятать блок, это свойства display: none и visibility: hidden. В первом случае элемент просто выключается, как будто его нет в исходном тексте страницы. При этом браузер не забивает себе голову такими вещами, как подсчет занимаемого блоком пространства и узнать высоту блока просто нельзя. В режиме visibility: hidden браузер делает вид, что блок существует, отводить для него место на странице, но просто не рисует его. Вот в этом режиме как раз можно, не показывая блок пользователю, узнать его размеры. Но просто спрятать блок от пользователя мало, нужно чтобы он все равно не занимал место на странице, и вот тут на сцену выходит свойство position: absolute, которое применяется к блоку перед получением его высоты. Различие высоты блока в конец анимации и настоящей его высотой, есть ни что иное, как различие высоты блока с position: static и position: absolute.
Если мы включим в браузере инспектор объектов и добавим к разворачиваемому блоку, свойство «style=»display: block; position: absolute;»», мы увидим вот такую картину:
Именно до этой высоты jQuery и разворачивает блок. Что же, давайте попробуем пофиксить данный баг. Как известно, ширина элемента с position: absolute ограничена, если не задано другое, шириной ближайшего родителя с position ≠ static. В данном случае нам нужно, чтобы ширина элемента была как у прямого родителя, соответственно этому родителю и нужно задать position: relative. Снова берем в руки инспектор объектов, перезагружаем страницу, добавляем элементу «div.jq-codeDemo» свойство position: relative и жмем на кнопку Run Code. Ура! Мы только что с помощью одного свойства пофиксили анимацию на главной странице самого популярного JavaScript фреймворка 🙂
Конечно, можно только поблагодарить разработчиков сайта jQuery за то, что они сделали такой простой пример к моей статье. В реальной ситуации, возможно, придется сделать еще что-то. В общем случае, всегда нужно проверять появляющиеся блоки в инспекторе, меняя position со static на absolute и следить чтобы при этом не было изменений размера блока. Но можно выделить и более-менее определенные правила, которые нужно проверить до инспектора.
Если возможно задать жесткий размер разворачиваемому блоку, задайте. И следующие правила можно не читать.

Если размер должен быть в процентах от родительского блока, нужно убедиться, чтобы ближайший родитель с position ≠ static имеет тот же размер, что и непосредственный родитель объекта. Если это не так, можно поставить position: relative непосредственному родителю. При этом, если размер должен быть 100% от родителя, лучше указать это явно.

У родителя с position ≠ static не должно быть горизонтальных паддингов. Это связано с тем, что для обычных элементов ширина блока считается от родителя без учета паддингов, а для элементов с position: absolute, с учетом.

После начала анимации (т.е. после момента, когда jQuery посчитал высоту) нельзя изменять никакие свойства, которые могут повлиять на ширину или высоту родителя или анимированного объекта.

Собственно, на этом все, плавной вам анимации, друзья. Возможно, в следующий раз я расскажу вам о такой штуке, как отложенные события мыши и когда они бывают полезны.
Действие при появлении элемента на экране — jQuery | Кабинет Веб-мастера

С каждым днем сайты становятся все сложнее, а дизайнеры придумывают все новые способы привлечь внимание посетителей — и это правильно, ведь удивить становится все труднее. Именно поэтому в последнее время на многих сайтах присутствует анимация и различные эффекты. Но нас сегодня интересует немного другая тема: как определить, виден ли сейчас элемент на экране или нет? И если виден, то сделать какое-нибудь действие. Например перекрасить его в другой цвет. Сайт может быть длинным и если вы назначите анимацию при загрузке страницы, вероятность того, что пользователь ее увидит — очень мала — нужно запускать ее в тот момент, когда элемент появился на странице. Давайте научимся это делать.
Для начала создадим небольшую разметку, с помощью которой мы будем проводить свои эксперименты:
<div> <div>Привет! Я блок!</div> </div>
Одна обертка и один блок. Добавим немного стилей:
.page-site { position:relative; height:5000px; } .block { width:200px; height:200px; background:red; text-align:center; color:#fff; font-family:Arial; font-size:18px; line-height:200px; position:absolute; top:50%; margin-top:-100px; left:50%; margin-left:-100px; } .block.green { background:green; }
Как видите, мы задали высоту обертке и поставили блок по центру — при загрузке страницы его не видно. И заранее описали класс green при котором заливка блока станет зеленой.
Давайте попробуем перекрасить блок, как только он целиком попадет в область видимости экрана.
Для этого напишем следующий скрипт:
$(document).ready(function() { var windowHeight = $(window).height(); $(document).on('scroll', function() { $('.block').each(function() { var self = $(this), height = self.offset().top + self.height(); if ($(document).scrollTop() + windowHeight >= height) { self.addClass('green') } }); }); });
Я немного забежал вперед и предусмотрел наличие на странице сразу множества элементов, поэтому использовал each. Что делает скрипт: при скролле страницы он пробегает все элементы и проверяет, что расстояние до них + их высота меньше расстояния, которое пользователь пролистал + высота окна. Как только условие нарушается, срабатывает скрипт — в нашем случае он добавляет класс green.
Если вам нужно многократное повторение действия (отмена действия если элемент скроется и повтор — если опять появится), достаточно просто дописать условие else.
Если блок по высоте больше высоты экрана
Если блок очень высокий, то он целиком не поместится в экран, а значит что скрипт выполнится поздно. Для такого случая давайте немного модифицируем скрипт. Будем выполнять действие, когда до верха страницы будет оставаться 100px.
Немного обновим стили:
.page-site { position:relative; height:5000px; } .block { width:200px; height:1200px; background:red; text-align:center; color:#fff; font-family:Arial; font-size:18px; line-height:200px; position:absolute; top:50%; margin-top:-600px; left:50%; margin-left:-100px; } .block.green { background:green; }
И теперь сам модифицированный скрипт:
$(document).ready(function() { var windowHeight = $(window).height(); $(document).on('scroll', function() { $('.block').each(function() { var self = $(this), height; if (self.height() >= windowHeight) { height = self.offset().top + windowHeight - 100; } else { height = self.offset().top + self.height(); } if ($(document).scrollTop() + windowHeight >= height) { self.addClass('green') } }); }); });
В скрипте мы выполняем проверку — если элемент больше чем высота экрана, то скрипт сработает, когда до верха останется 100px, в противном случае сработает по «старой» схеме.
Действие по центру экрана
А что если действовать нужно в тот момент, когда элемент находится ровно по центру экрана? И для такого случая найдется свой скрипт:
$(document).ready(function() { var windowHeight = $(window).height(); $(document).on('scroll', function() { $('.block').each(function() { var self = $(this), height = self.offset().top + self.height()/2 - windowHeight/2; if ($(document).scrollTop() >= height) { self.addClass('green'); } }); }); });
Вот и все. Всем удачи!

Jquery div плавное появление – Как сделать плавное появление блока при прокрутке вниз (например, 300px)? — Хабр Q&A

Как сделать плавное появление блока CSS?

Навигация по статье:

Плавное появление блока CSS при наведении

Плавное появление блока CSS с задержкой по времени

Анимация появления блоков для Landing Page

Параметры jQuery плагина Revealator

Плавное появление блока CSS | Only to top

Пример с более сложной структурой

Боремся с неплавной анимацией скрытых элементов / Habr

Действие при появлении элемента на экране — jQuery | Кабинет Веб-мастера

Если блок по высоте больше высоты экрана

Действие по центру экрана

Добавить комментарий Отменить ответ

Рубрики