С информацией
Только заголовки

Блоки с разноцветными пузырями

Анимированные разноцветные пузыри вокруг информационных блоков на JS

Решение не использует дополнительных библиотек и хорошо подойдет для оформления блоков на сайтах детской тематики.

Читать далее

Адаптивные вкладки openTabby

jQuery плагин openTabby для создания адаптивных табов с разными настройками.

Несмотря на то, что данный плагин довольно старый (2015 года) и не имеет даже документации от разработчика, в нем есть ряд полезных возможностей.

Читать далее

Открытие и закрытие контента на jQuery

Кнопки "показать полностью" и "показать еще" для открытия и закрытия дополнительного контента

По своей сути "показать полностью" и "показать еще" это одно и тоже, но для каждого варианта в этой заметке используются разные решения.

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

Скрипты используемые в этих примерах сделаны для библиотеки jQuery

Читать далее

Поздравление с 8 марта

Блок с вращающимся цветком и поздравлением с 8 марта

Поздравление имеет мобильный вариант и занимает совсем немного места

Читать далее

Замена блока на фотографию при наведении курсора

Красивая замена блока на фотографию при наведении и движении курсора мыши

Ховер-эффект реализован с использованием SVG, JS и CSS-переходов.

Читать далее

3D табы с картинкой и описанием

Трехмерное переключение вкладок, в которых присутствует фотография и ее описание

В данном решении для библиотеки jQuery:

  • Фотография и описание поворачиваются в разные стороны
  • Меню табов создается автоматически через дата-атрибут
  • Цвет фона каждой вкладки и ее пункта меню задается также через дата-атрибут
  • Корректно отображается на мобильных устройствах
Читать далее

Размер шрифта в зависимости от ширины блока

Установка размера текста и его позиции в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Читать далее

Новогодняя секция

Новогодняя блок-секция с поздравлением

Всех с наступающим Новым Годом!

В преддверии этого праздника, я собрал небольшую блок-секцию с параллакс-эффектом, падающим снегом и поздравительным текстом.

Читать далее