Рандомізовані елементи веб-сторінок - простий і ефективний метод для збільшення користувачів на сайті. Цей ефект легко досягнути всього декількома рядками JavaScript.
Потрібно обережніше використовувати термін "випадковий". Процес рандомізації контенту відбувається трьома способами:
-
Випадкова зміна вмісту, який вже присутній на сторінці (самий обмежений варіант). Якщо у вас є тільки три зображення, кожне поєднання буде показано користувачеві в дуже короткий час.
-
Використовувати сервер, щоб тянути дані з папки. Так набагато легше створити ефект випадковості.
-
Використовуючи MySQL або API, щоб тянути випадковий вміст з бази даних, складніше всього реалізувати, але це найбільш ефективний спосіб: бази даних, як правило, складаються з величезної кількості записів, що означає високу різноманітність і непередбачуваність комбінацій.
Випадковий порядок зображень
Ми матимемо справу із серією з п'яти зображень. Розмітка виглядає приблизно так:
<div>
<figure>
<img src="love-bike.jpg">
</figure>
<figure class="halvsies">
<img src="burning-man-pyre.jpg">
</figure>
…
</div>
Цікава частина flexbox полягає в тому, що деякі зображення мають однакову ширину, але подвійну висоту:
#burning-man { display: flex; flex-flow: row wrap; font-size: 0; }
#burning-man figure {
flex: 1; margin: 0;
min-width: 300px; position: relative;
}
#burning-man figure img {
width: 100%; height: auto;
opacity: 0; transition: .5s;
}
#burning-man figure img.halvsies {
flex: .5; min-width: 150px;
}
#burning-man figure img.visible { opacity: 1; }
В цьому випадку, повнорозмірні зображення мають **flex** значення **1** і
**min-width** **300px**; зображення в половину ширини мають властивості, які
дорівнюють половині цих значень.
JavaScript складається з трьох функцій **randomize()**, **sequentize()** і
**makeVis()** \- разом з **fsort()**, функцією, яка викликає перші дві.
function randomize() {
for (var i = rando.children.length; i >= 0; i--){ rando.appendChild(rando.children[Math.random() * i | 0]);
}
}
function makeVis(j) {
var photo = rando.children[j].firstElementChild;
setTimeout(function() { photo.classList.add("visible"); }, 700 * j);
}
function sequentize(){
for (var j = 0; j <= rando.children.length; ++j)
makeVis(j);
}
function fsort() {
randomize();
sequentize();
}
Вони визиваються двома рядками JavaScript:
var rando = document.getElementById('burningman');
fsort();
Функція переставляє порядок **<figure>** елементів. Зверніть увагу, що
JavaScript упорядкування повністю відрізняється від flexbox властивості
**order**: тут ми змінюємо елементи в DOM.
**sequentize()**, у поєднанні з **makeVis()**, представляє **<figure>**
елементи по одному, шляхом застосування **visible**, ефект плавної появи
досягається з допомогою переходу.
Ще немає коментарів