Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт.
Для создания данного примера использовался CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery.
HTML
CSS
JS
Для создания данного примера использовался 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>
<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;}
}
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');
});
$(this).addClass('active');
});