3 приклади анімації картинок на css
Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.
4-09-2016, 22:33
1 419
0
Технологія CSS3 дозволяє створювати красиві інтерактивні сайти без допомоги jаvascript.
3 приклади анімації картинок на css:
У цій статті ми створимо красиві ефекти при наведенні на картинку. Ці ефекти ідеально підійдуть для галереї та допоможуть раціонально розмістити інформацію.
Приклад 1
Для першого прикладу ми будемо використовувати ненумерованний список (ul), всередині якого розташуємо заголовок і опис картинки. Розмітка для прикладу:
<ul class="effect00">
<li>
<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="img/img1.jpg" alt=""/></li>
</ul>
</li>
<li>
<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="img/img2.jpg" alt=""/></li>
</ul>
</li>
<li>
<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="img/img3.jpg" alt=""/></li>
</ul>
</li>
</ul>
<style>
.effect00 {list-style:none;}
.demo-1 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-1 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-1 h2 {
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;
}
.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}
</style>
Приклад 2
У другому прикладі картинка буде з'їжджати вниз при наведенні, показуючи при цьому заголовок і опис.
Розмітка дуже схожа на попередній приклад. Але тепер використовується клас demo-2 і новий клас zero:
<ul class="effect00">
<li>
<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>
</li>
<li>
<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image2.jpg" alt=""/></li>
</ul>
</li>
<li>
<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image3.jpg" alt=""/></li>
</ul>
</li>
</ul>
<style>.effect00 {list-style:none;}
.demo-2 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
</style>
Приклад 3
Для останнього прикладу створимо ефект повертання навколо осі: при наведенні на картинку, вона буде обертатися навколо своєї осі і показвать опис і заголовок.
На цей раз розмітка трохи зміниться. Ми будемо використовувати HTML5 елемент figure разом з figcaption. І, як зазвичай, клас змінився на demo-3:
<ul class="effect00">
<li>
<ul class="demo-3">
<li>
<figure>
<img src="images/image1.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>
</li>
<li>
<ul class="demo-3">
<li>
<figure>
<img src="images/image2.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>
</li>
<li>
<ul class="demo-3">
<li>
<figure>
<img src="images/image3.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>
</li>
</ul>
<style>.effect00 {list-style:none;}
ul li {
display:inline-block;
margin:0 10px
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
</style>
Коментарі
