Автор

24 12.2015
Анимарованная сортировка блоков с помощью Isotope

Анимарованная сортировка блоков с помощью Isotope


На многих сайтах, особенно на сайтах портфолио, можно встретить сортировку блоков с каким-либо содержимым или обыкновенных картинок выполненную с красивой анимацией. На сегодняшний день есть большое количество jQuery плагинов с помощью которым можно без труда сделать такую сортировку. С помощью одного из них, а именно с помощью плагина isotope, мы и будем создавать свою сортировку блоков. Лично я использовал данный скрипт при создании своего портфолио и при создании каталога продукции на сайте автозапчастей!

 

ДЕМО
ИСХОДНИКИ

 

Подключаем скрипты

Если у Вас уже была подключена сама библиотека jQuery, то подключаем только плагин isotope.

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>

HTML

В первую очередь ссылки, по клику на которые будет происходить фильтр блоков. У каждой ссылки есть атрибут data-filter, в котором содержится класс блоков, которые останутся, если нажать на эту ссылку.

<ul id="filter" class="clearfix">
    <li><a href="" class="current btn" data-filter="*">Все</a></li>
    <li><a href="" class="btn" data-filter=".portfolio">Портфолио</a></li>
    <li><a href="" class="btn" data-filter=".cutaway">Визитки</a></li>
    <li><a href="" class="btn" data-filter=".corporative">Корпоративные</a></li>
</ul>

Затем сами блоки, которые будут сортироваться. Каждый блок имеет класс work и один из классов, который есть в атрибуте ссылки data-filter.

<div class="works clearfix">
    <article class="work portfolio">
        <div>
            <img src="images/portfolio/1.jpg" width="300" height="220" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work cutaway">
        <div>
            <img src="images/cutaway/1.jpg" width="300" height="225" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work corporative">
        <div>
            <img src="images/corporative/1.jpg" width="300" height="260" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    ...
</div>

CSS

Для улучшения анимации.

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}

Также немного приукрасим ссылки и блоки с контентом.

#works,
.works {
    width: 1000px;
    margin: 30px auto;
}
#filter li {
    display: block;
    float: left;
    list-style: none;
    margin-left: 9px;
}
#filter li a {
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px 15px;
    display: block;
    color: #666;
    transition: all 0.4s ease;
}
#filter li a:hover,
#filter li a.current {
    background: #666;
    color: #fff;
}
.work {
    width: 300px;
    float: left;
    margin: 0 9px 10px;
    border: 7px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.work div {
    position: relative;
}
.work div h3 {
    background: rgba(0,0,0, .7);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 0;
    text-align: center;
    font-size: 18px;
    color: #fff;
}
.work div p {
    background: rgba(0,0,0, .7);
    font-size: 14px;
    color: #eee;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 7px 0;
}

javascript

$(document).ready(function() {
 
        $('.works').isotope({
            itemSelector: '.work'
        });
 
        $('#filter a').click(function(){
 
            $('#filter a').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('data-filter');
 
            $('.works').isotope({
                filter: selector,
                animationOptions: {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    queue: false
                }
            });
            return false;
 
        });
 
});

Вот и всё

Материал представлен исключительно в ознакомительных целях.

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

16 04.2013
Анимарованная сортировка блоков с помощью Isotope

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

«Почему «имидж клуб»? В основном, смена имиджа ассоциируется с началом новой жизни. Но поменять одну модную вещь на другую это не значит, что вы поменяли свой имидж. Начинать нужно со своего внутреннего мира, со своего взгляда на окружающий мир, работать не только над дефектами своей фигуры, и учиться правильно одеваться, но и получать от этого огромное достойное Вас (платиновое) удовольствие.»


28 12.2014
Анимарованная сортировка блоков с помощью Isotope

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


19 04.2013
Анимарованная сортировка блоков с помощью Isotope

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий  HTML 5,  jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..


31 10.2018
Анимарованная сортировка блоков с помощью Isotope

В этой статье мы рассмотрим, как установить систему интервалов в CSS и как использовать относительные единицы для реагирования.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close