От автора: псевдокласс nth-child в сумме с принципом Цикады – это хитрый способ имитации рандомизации шаблонов. Компьютеры не умеют генерировать случайные числа, поэтому самое лучшее, что мы можем сделать — это задавать псевдослучайное начальное значение, которое вычисляется по переменной, которую нельзя предугадать. К примеру, тот же самый метод math.random() в JS не дает полностью случайного числа. Основная наша задача сводится к тому, чтобы представить так много переменных, чтобы результат стало очень сложно предсказать. В таком случае мы получаем случайную последовательность.
Почему метод называется принципом Цикады?
Цикада – это небольшое, страшное насекомое. Вы должны были о них слышать. Есть такой род, периодические цикады, которые выползают на свет через 7, 11, 13 или 17 лет. После чего они находят себе партнера и умирают. Не самая длинная часть их жизни.
Однако интересно здесь то, что это все простые числа. Природа устроила циклы именно так, чтобы цикады, выползая на землю, не сталкивались с хищниками. По отношению к веб-сайтам принцип работает на простых числах.
Случайная бесформенность
Этот метод я применил на сайте UX London, чтобы поместить изображения выступающих в круги со случайным искажением.
Как это работает?
С помощью nth-child мы можем получить доступ ко всем элементам, которые будут идти по простым числам.
|
1 2 3 4 5 |
.Item:nth-child(2n) {...} .Item:nth-child(3n) {...} .Item:nth-child(5n) {...} .Item:nth-child(7n) {...} .Item:nth-child(11n) {...} |
Я заметил, что одного раза nth-child недостаточно, чтобы элементы смотрелись действительно случайно. Поэтому я добавил еще один слой из nth-child:
|
1 2 3 4 5 |
.Item:nth-child(2n+1) {...} .Item:nth-child(3n+2) {...} .Item:nth-child(5n+3) {...} .Item:nth-child(7n+5) {...} .Item:nth-child(11n+7) {...} |
Число перед n – следующее простое число, а число, которое прибавляется – предыдущее целое число. Таким образом, для каждого правила nth-child у нас есть 4 разных значения свойства border-radius, некоторые из которых еще и немного повернуты. По состоянию hover я меняю форму кругов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.Item:nth-child(2n+1) .Item-image { border-top-left-radius: 59%; border-top-right-radius: 52%; border-bottom-left-radius: 59%; border-bottom-right-radius: 56%; transform: rotate(-6deg); } .Item:nth-child(2n+1) .Item-image:hover { border-top-left-radius: 51%; border-top-right-radius: 67%; border-bottom-left-radius: 64%; border-bottom-right-radius: 56%; transform: rotate(-4deg); } |
На сайте UXLondon можно посмотреть все это в действии.
Автор: Charlotte Jackson
Источник: //www.lottejackson.com/
Редакция: Команда webformyself.
