dimayakovlev.ru


Live & Demo

Многие примеры рассчитаны на работу на десктопе и имеют ограниченные возможности при запуске на мобильных устройствах.

Поздравительная открытка с Новым годом

Анимированная поздравительная открытка к новому году. В полноэкранном режиме может использоваться как скринсейвер.

Для вывода номера года в тексте поздравления, его следует передать через параметр URL year. Например: C новым, 2024 годом!.

Random Color Screensaver

Простой скринсейвер, заполняющий страницу случайными цветами через заданный промежуток времени. Запускается автоматически после открытия страницы.

Для лучшего эффекта перейдите в полноэкранный режим работы веб-браузера нажатием кнопки F11.

Работой скринсейвера можно управлять с клавитуры:

  • ? - открытие и закрытие окна подсказки;
  • * - включение и выключение эффекта перехода между сменой цветов;
  • + или - - увеличение и уменьшение интервала между сменой цветов. Каждое нажатие изменяет интервал на половину секунды. Минимальное время между сменой цветов - половина секунды;
  • Left Mouse Button, Space или Enter - приостановка и возобновление работы скринсейвера.

Доступны три варианта работы скринсейвера:

  • Dark - используются цвета из нижнего диапазона яркости;
  • Normal - используются цвета из всего диапазона яркости;
  • Light - используются цвета из верхнего диапазона яркости.

PANTONE® Color of the Year

Каталог цветов, выбранных компанией PANTONE® цветом года, за период с 2000 года по настоящее время.

Примеры на HTML и CSS

Снегопад на HTML и CSS

В примере показан вариант создания эффекта снегопада на чистом HTML и CSS, без использования JavaScript.

Снегопад состоит из 100 снежинок. Каждая снежинка это отдельный HTML-элемент <span> с уникализированными при помощи CSS-свойств размерами, прозрачностью и анимацией падения.

Достоинство такого решения - отказ от использования и выполнения лишнего JavaScript-кода. В тоже время, так как HTML-разметка и CSS-код хранятся и отдаются клиенту в неизменном виде, они не могут изменяться динамически. Это ограничение позволяет обойти генерирование HTML-разметки и CSS-кода на стороне веб-сервера.

Примеры с JavaScript

Горизонтальная прокрутка с использованием JavaScript

В примере показан вариант горизонтальной прокрутки контейнера, выходящего за пределы ширины окна веб-браузера, путём вращения колеса мыши. Такая горизонтальная прокрутка работает аналогично вертикальной.

Горизонтальная прокрутка контейнера реализована на JavaScript. Для этого для контейнера отслеживается событие wheel, возвращающее значение свойства deltaY. На основании значения deltaY для контейнера вычисляется значение свойства scrollLeft.

Для горизонтальной раскладки элементов внутри контейнера использовано CSS свойство display: flex.

Счётчик оставшегося времени

В примере показана реализация простого счётчика времени, оставшегося до заданной даты. Отсчёт ведётся до 1 января следующего года.

Для работы счётчика используется метод setInterval(), циклично выполняющий переданную ему функцию, сравнивающую текущее время с заданной датой и обновляющую текст на странице, с задержкой в 1000 миллисекунд.