Домой / Для сайта / Анимация display:none
Анимация display:none

Анимация display:none

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

Для создания данного примера использовался CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery.

Если есть вопросы, задавайте их в комментариях.

Демо

HTML

<div class="flexwrap">
<div class="item i1">
 <p>Для удаления блока просто нажмите на него.</p>
</div>
<div class="item i2">
 Все эффекты созданы с помощью CSS.
</div>
<div class="item i3">
 Простую JQuery фикцию используем для добавления активности классу элемента блока.
</div>
<div class="item i4">
 Удаление блока кликом.
</div>
</div>

CSS

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html, body{
 background: silver;
 width: 100%;
 overflow-x: hidden;
}

.flexwrap{
 margin: 0 auto;
 width: 60%;
}

.item{
 font: 300 36px sans-serif;
 line-height: 1.3;
 padding: 100px 100px;
 text-align: center;
 color: white;
 cursor: pointer;
 clear: both;
 overflow: hidden;
}

.i1{
 background: salmon;
}

.i2{
 background: CornflowerBlue;
}

.i3{
 background: MediumSeaGreen;
}

.i4{
 background: SandyBrown;
}

.item.active{
 animation: remove 1s linear 0s 1 forwards;
 -webkit-animation: remove 1s linear 0s 1 forwards;
}

@-webkit-keyframes remove{
 0% {opacity: 1;
 max-height: 1000px;}
 99.9% {opacity: 0;
 max-height: 0px;
 padding: 0px 100px;}
 100% {opacity: 0;
 max-height: 0;
 padding: 0px 0px;
 animation: poof 0.1s linear 0s 1;
 -webkit-animation: poof 0.1s linear 0s 1;}
}

@keyframes remove{
 0% {opacity: 1;
 max-height: 1000px;}
 99.9% {opacity: 0;
 max-height: 0px;
 padding: 0px 100px;}
 100% {opacity: 0;
 max-height: 0;
 padding: 0px 0px;
 animation: poof 0.1s linear 0s 1;
 -webkit-animation: poof 0.1s linear 0s 1;}
}

@-webkit-keyframes poof{
 from {display: flex;}
 to {display: none;}
}

@keyframes poof{
 from {display: flex;}
 to {display: none;}
}

JS

$('.item').click(function(){
 $(this).addClass('active');
});

Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт. Для создания данного примера использовался CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery. Если есть вопросы, задавайте их в комментариях. HTML &lt;div class=&quot;flexwrap&quot;&gt; &lt;div class=&quot;item i1&quot;&gt; &lt;p&gt;Для удаления блока просто нажмите на него.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;item i2&quot;&gt; Все эффекты созданы с помощью CSS. &lt;/div&gt; &lt;div class=&quot;item i3&quot;&gt; Простую JQuery фикцию используем для добавления активности классу элемента блока. &lt;/div&gt;&hellip;

Обзор

Проголосуйте за урок

Оценка

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

Рейтинг: 4.85 ( 2 голосов )
100

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

Ваш email не будет опубликован.

*