Проскальзывающие ячейки изображения

В данном уроке мы создадим эффект проскальзывающих ячеек изображения. Он будет похож на маленькую фотогалерею. Для урока приготовлены 3 демонстрации с разными эффектами. В качестве основы функционирования используются свойства CSS3.

 

Шаг 1. Разметка HTML

Для нашей демонстрации используется следующий код. В примере задействованы 5 изображений, и имеется такое же количество элементов навигации.

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Эффект проскальзывания с помощью jQuery | Материалы сайта RUSELLER.COM</title>
        <link href="/css/main.css" rel="stylesheet" type="text/css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="/js/main.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <ul class="nav">
                <li id="m1">Pic 1</li>
                <li id="m2">Pic 2</li>
                <li id="m3">Pic 3</li>
                <li id="m4">Pic 4</li>
                <li id="m5">Pic 5</li>
            </ul>

            <ul class="grid">
                <li id="g1">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g2">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g3">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g4">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g5">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g6">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
            </ul>
            <ul class="demos">
                <li><a href="/index.html">Демо 1</a></li>
                <li><a href="/index2.html">Демо 2</a></li>
                <li><a href="/index3.html">Демо 3</a></li>
            </ul>
        </div>
    </body>
</html>

 

Шаг 2. CSS

Теперь стили для демонстрации. В представленном ниже коде оставлены только самые важные свойства для наглядности:

css/main.css

.nav {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 140px;
}
.nav li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    cursor:pointer;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}

.demos {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 165px;
}
.demos li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}
.demos li a {
    color:#000;
    cursor:pointer;
    display:block;
    font-size:20px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    text-decoration:none;
}

.grid {
    background-color:#DDD;
    list-style:none outside none;
    width:100%;
}
.grid li {
    border:1px solid #777777;
    float:left;
    height:240px;
    width:211px;

    transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
}
.grid li div {
    transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;

    float:left;
}
.grid li .d1 {
    background:transparent url(../images/grid1.jpg) no-repeat top left;
    height:100%;
    width:211px;
}
.grid li .d2 {
    background:transparent url(../images/grid2.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d3 {
    background:transparent url(../images/grid3.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d4 {
    background:transparent url(../images/grid4.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d5 {
    background:transparent url(../images/grid5.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li#g2 div {
    background-position:-211px 0;
}
.grid li#g3 div {
    background-position:-422px 0;
}
.grid li#g4 div {
    background-position:0 -240px;
}
.grid li#g5 div {
    background-position:-211px -240px;
}
.grid li#g6 div {
    background-position:-422px -240px;
}


Каждый элемент ячейки (LI) имеет собственный фон с определенным положением. Для анимации сдвига положения будет использоваться jQuery при переключении изображения.

 

Шаг 3. JavaScript

js/main.js

$(function(){
    $(".nav li").hover(
      function () {
        $('.grid li div').stop().animate({width:"0"},0);

        var ind = $(".nav li").index(this);
        $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
        $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
        $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
        $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
        $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
        $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
      }
    );
});

 

Заключение

Две остальные демонстрации очень похожи по принципу действия, некоторые свойства и код JavaScript немного изменены.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/X8eudZ2oyOM/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Проскальзывающие ячейки изображения | | 2012-06-19 12:00:53 | | Статьи Web-мастеру | | В данном уроке мы создадим эффект проскальзывающих ячеек изображения. Он будет похож на маленькую фотогалерею. Для урока приготовлены 3 демонстрации с разными эффектами. В качестве основы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: