На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт.

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

Код
<script src="http://uway.ucoz.com/materials/1/9/jquery-1.11.1.js" type="text/javascript"></script>


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');
});
Теги к материалу
анимация, display:none
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев