Автор

Анимарованная сортировка блоков с помощью 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

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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


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

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


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

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close