Exore LTD » jQuery » Красивый эффект при загрузке новостей
Лого SiteHere.ru

Апрель 21, 2017 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Красивый эффект при загрузке новостей

Красивый эффект при загрузке новостей

Речь пойдет о способе вывода новостей в виде «кирпичей». Раньше я писал о таком способе в уроке — Галерея как у Google, но там внимание было сосредоточено на галереи. В этом случае мы рассмотрим только способ вывода новостей и эффект при наведении. Новости появляются при прокрутке страницы вниз и когда блок появился, тогда блок может появляться: справа, вниз и вращением против часовой.

Пример можно увидеть здесь:

Посмотреть примерСкачать

Эффект при загрузке новостей



Как использовать?

HTML

Для наших новостей мы будем использовать неупорядоченный список, который находится в блоке с классом «grid-wrap». Первый элемент списка с классом «title-box» содержит краткое описание:

1
2
3
4
5
6
7
8
9
10
11

<section class="grid-wrap">
    <ul class="grid swipe-right" id="grid">
        <li class="title-box">
            <h2>Краткое название</h2>
        </li>
        <li><a href="#"><img src="img/1.jpg" alt="img01"><h3>Описание 1</h3></a></li>
        <li><a href="#"><img src="img/2.jpg" alt="img02"><h3>Описание 2</h3></a></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</section>

У неупорядоченного есть класс. Выше этот класс равен «grid swipe-right». И слово «grid swipe-right« (выделено курсивом) можно менять в зависимости от того, как вы хотите видеть появление новостей. Последнее слово можно изменить на: left(появление слева) и rotate(появление против часовой).



CSS

Сперва зададим стиль для блока, в котором находятся все новости:

1
2
3
4
5
6

.grid-wrap {
    clear: both;
    margin: 0 auto;
    padding: 0;
    max-width: 1260px;
}

Далее мы убираем стили, которые заданы по умолчанию у неупорядоченного списка и размещаем его по центру:

1
2
3
4
5
6

.grid {
    margin: 30px auto;
    padding: 0;
    min-height: 500px;
    list-style: none;
}

Задаем стили для заголовков:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.title-box h2 {
    display: block;
    margin: 7px;
    padding: 20px;
    background: #2E3444;
    color: #D3EEE2;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
}
 
.title-box h2 a {
    display: block;
    font-weight: 900;
}
 
.title-box h2 a:hover {
    color: #D3EEE2;
}

Пропишем некоторые стили для ссылок и изображений:

1
2
3
4
5
6

.grid li > a,
.grid li img {
    display: block;
    outline: none;
    border: none;
}

Эффект при наведении реализуется следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.grid li > a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100.5%;
    border: 0px solid transparent;
    background: transparent;
    content: '';
    transition: border-width 0.2s, border-color 0.2s;
}
 
.grid li.shown:hover h3 {
    color: #fff;
    transform: translate3d(0,-30px,0);
}
 
.grid li.shown:hover > a::before {
    border-width: 14px;
    border-color: #2E3444;
}

Чтобы реализовать появление новостей справа — необходимо использовать следующий код для анимации:

1
2
3
4
5
6
7
8

.grid.swipe-right li.animate .curtain {
    animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
 
@keyframes swipeRight {
    50%, 60% { transform: translate(0); }
    100% { transform: translate3d(100%,0,0); }
}

Для появления новостей слева:

1
2
3
4
5
6
7
8

.grid.swipe-down li.animate .curtain {
    animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
 
@keyframes swipeDown {
    50%, 60% { transform: translate(0); }
    100% { transform: translate3d(0,-100%,0); }
}

Для появления новостей с вращением против часовой:

1
2
3
4
5
6
7
8

.grid.swipe-rotate li.animate .curtain {
    animation: swipeRotate 1.5s ease forwards;
}
 
@keyframes swipeRotate {
    50%, 60% { transform: rotate3d(0,0,1,0deg); }
    100% { transform: rotate3d(0,0,1,-90deg); }
}


Javascript

Всё что осталось — это подключить необходимые скрипты для правильной работы(masonry.pkgd.min.js, imagesloaded.pkgd.min.js, classie.js, colorfinder-1.1.js, gridScrollFx.js):

1
2
3
4
5
6
7
8
9
10

<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/colorfinder-1.1.js"></script>
<script src="js/gridScrollFx.js"></script>
<script>
    new GridScrollFx( document.getElementById( 'grid' ), {
         viewportFactor : 0.4
    } );
</script>


Вывод

Этот способ вывода новостей становится всё популярней. Он позволяет выводить много новостей, тем самым при просмотре сайта пользователем он может обратить внимание сразу на несколько новостей — а, значит, задержаться на сайте намного дольше.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

7 комментариев к записи
  • Виталий

    Добрый вечер Юрий ! Много новостей это сколько ? Я могу все записи сайта так вывести если их около 2000 тыс?

     
    Ответить
  • Виталий

    Есть кое-какие задумки

     
    Ответить
  • Виталий

    Ссылка битая

     
    Ответить
    • Юрий Немец

      Здравствуйте, Виталий!

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

       
      Ответить
  • Виталий

    В мозиле не помогло, в хроме нормально скачалось без инкогнито. Юрий так Вы не ответили на мой поставленный вопрос…

     
    Ответить
    • Юрий Немец

      Виталий, конечно вы можете вывести все записи блога в таком виде, только лучше выводить сразу несколько записей, например 20, а затем по кнопке "Далее" подгружать очередные 20 записей. Таким образом нет большой загрузки на базу данных.

       
      Ответить
  • Виталий

    Да, только как это красиво организовать (подгружать еще 20 новостей)

     
    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *