Апрель 21, 2017 Запись была обновлена
Красивый эффект при загрузке новостей
Речь пойдет о способе вывода новостей в виде «кирпичей». Раньше я писал о таком способе в уроке — Галерея как у 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)
Добрый вечер Юрий ! Много новостей это сколько ? Я могу все записи сайта так вывести если их около 2000 тыс?
Есть кое-какие задумки
Ссылка битая
Здравствуйте, Виталий!
Обновите страницу с помощью сочетания клавиш CTRL+F5 и попробуйте скачать снова. Если все же кнопка скачивания работать не будет, то зайдите на данную страницу в режиме инкогнито и попробуйте скачать снова, так как некоторые скрипты могут быть закэшированы.
В мозиле не помогло, в хроме нормально скачалось без инкогнито. Юрий так Вы не ответили на мой поставленный вопрос…
Виталий, конечно вы можете вывести все записи блога в таком виде, только лучше выводить сразу несколько записей, например 20, а затем по кнопке "Далее" подгружать очередные 20 записей. Таким образом нет большой загрузки на базу данных.
Да, только как это красиво организовать (подгружать еще 20 новостей)