3 приклади анімації картинок на css

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{4-09-2016, 22:33
2 902
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>

Розробка сайтів | Створення сайтів

Наступна ⟫