Гарний ефект при завантаженні новин

Відео: Ефект Марангони. Як повторити вдома?

HTML

Для наших новин ми будемо використовувати невпорядкований список, який знаходиться в блоці з класом «Grid-wrap». Перший елемент списку з класом «Title-box» містить короткий опис:

1234567891011

class="Grid-wrap"gt;lt;ul class="Grid swipe-right" id="Grid"gt;lt;li class="Title-box"gt;lt;h2gt; Коротка назваlt;/h2gt;lt;/ligt;lt;ligt; lt;a href="#"gt; lt;img src="Img / 1.jpg" alt="Img01"gt; lt;h3gt; Опис 1lt;/h3gt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; lt;img src="Img / 2.jpg" alt="Img02"gt; lt;h3gt; Опис 2lt;/h3gt; lt;/agt; lt;/ligt;lt;ligt;lt;/ligt;lt;/ulgt;lt;/sectiongt;

Відео: ЖИВА ОДЯГ [Новини науки і технологій]

У невпорядкованого є клас. Вище цей клас дорівнює «Grid swipe-right». І слово «Grid swipe-right« (Виділено курсивом) можна змінювати в залежності від того, як ви хочете бачити поява новин. Останнє слово можна змінити на: left(Поява зліва) і rotate(Поява проти годинникової).

CSS

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

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

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

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

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

+12345678910111213141516171819

.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-}

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

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

Ефект при наведенні реалізується в такий спосіб:

123456789101112131415161718192021

.grid li gt; 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 gt; a:: before {border-width: 14px-border-color: # 2E3444-}

Щоб реалізувати поява новин справа - необхідно використовувати наступний код для анімації:

12345678

.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)- }}

Для появи новин зліва:

12345678

.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)- }}

Для появи новин з обертанням проти годинникової:

12345678

.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):

Відео: Зачаровують скульптури з діхроічним скла створює Джек Стормс (новини)

12345678910

lt;script src="Js / masonry.pkgd.min.js"gt; lt;/scriptgt;lt;script src="Js / imagesloaded.pkgd.min.js"gt; lt;/scriptgt;lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / colorfinder-1.1.js"gt; lt;/scriptgt;lt;script src="Js / gridScrollFx.js"gt; lt;/scriptgt;lt;scriptgt; new GridScrollFx (document.getElementById ( `grid`), {viewportFactor: 0.4}) -lt;/scriptgt;

висновок

Цей спосіб виведення новин стає все популярнішим. Він дозволяє виводити багато новин, тим самим при перегляді сайту користувачем він може звернути увагу відразу на кілька новин - а, значить, затриматися на сайті набагато довше.