Автор

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

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

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


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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

Мы столкнулись с интересной задачей, а именно реализацией эффекта "до-после" для изображений, данный эффект позволяет наглядно продемонстрировать какие изменения были произведены с изображением с помощью разделительной линии. Для этого нам понадобиться небольшой плагин TwentyTwenty.js работа которого будет обеспечиваться с помощью двух библиотек jQuery. Эффект достаточно простой, но отлично справляется с поставленной задачей. Такой эффект станет отличным дополнением до сайта фотографа.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close