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



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

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

Если на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью CSS и JQuery мы получаем кроссбраузерный раздел, с поддержкой устройств где выключен JS.


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

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


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

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


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

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


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

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


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