Магическая рандомизация с помощью nth-child и принципа Цикады

Магическая рандомизация с помощью nth-child и принципа Цикады

От автора: псевдокласс nth-child в сумме с принципом Цикады – это хитрый способ имитации рандомизации шаблонов. Компьютеры не умеют генерировать случайные числа, поэтому самое лучшее, что мы можем сделать — это задавать псевдослучайное начальное значение, которое вычисляется по переменной, которую нельзя предугадать. К примеру, тот же самый метод math.random() в JS не дает полностью случайного числа. Основная наша задача сводится к тому, чтобы представить так много переменных, чтобы результат стало очень сложно предсказать. В таком случае мы получаем случайную последовательность.

Почему метод называется принципом Цикады?

Цикада – это небольшое, страшное насекомое. Вы должны были о них слышать. Есть такой род, периодические цикады, которые выползают на свет через 7, 11, 13 или 17 лет. После чего они находят себе партнера и умирают. Не самая длинная часть их жизни.

Однако интересно здесь то, что это все простые числа. Природа устроила циклы именно так, чтобы цикады, выползая на землю, не сталкивались с хищниками. По отношению к веб-сайтам принцип работает на простых числах.

Случайная бесформенность

Этот метод я применил на сайте UX London, чтобы поместить изображения выступающих в круги со случайным искажением.

Как это работает?

С помощью nth-child мы можем получить доступ ко всем элементам, которые будут идти по простым числам.

.Item:nth-child(2n) {...}
.Item:nth-child(3n) {...}
.Item:nth-child(5n) {...}
.Item:nth-child(7n) {...}
.Item:nth-child(11n) {...}

Я заметил, что одного раза nth-child недостаточно, чтобы элементы смотрелись действительно случайно. Поэтому я добавил еще один слой из nth-child:

.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 я меняю форму кругов.

.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

Источник: http://www.lottejackson.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree