В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для ... Читать далее »
Фильтрация элементов с помощью jQuery
В примере реализован jQuery фильтр, который можно использовать для сортировки/фильтрации практически любых элементов (включая изображения, списки, фото, и т.д.). Возможности для применения данного фильтра достаточно широкие. Сортировка элементов создана с помощью простого скрипта, для работы которого необходимо обязательно подключить библиотеку jQuery. Если у вас есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »
Одностраничный сайт-портфолио с помощью CSS и JS
Предлагаю вашему вниманию пример создания портфолио (галереи) с помощью CSS и JS. В части кода ниже вы видите пример добавления книги A Clockwork Orange. Вначале в машинописный апострофах необходимо указать ссылку на изображение книги, далее через запятую и также в апострофах указываем название книги, имя автора и описание. Для работы необходимо обязательно подключить библиотеку jQuery. Данный пример можно использовать как готовое решение для одностраничного ... Читать далее »
Эффект Ken Burns для шапки сайта
Эффект Кена Бернса является одним из видов панорамирования и масштабирования. В данном примере эффект реализован для шапки (изображение вверху) страницы. Данный эффект достигнут с помощью HTML, CSS и JS. Для работы необходимо подключить библиотеку jQuery. HTML CSS JS Читать далее »
Переключатель фона на сайте
Простой в реализации но в тоже время эффективный переключатель фона (цвета, изображений) для сайта. Переключатель фона для сайта реализован с помощью HTML и CSS. Также для работы необходимо подключить библиотеку jQuery. Если есть вопросы, задавайте в комментариях. HTML CSS JS Читать далее »
Превращаемые фоновые секции
Отличный и оригинальный пример использования тега section. В этом примере страница разделена на 4 отзывчивых секции. В каждую из секций можно добавлять любую информацию. После клика по секции она откроется на все окно. Чтобы уменьшить секцию до исходного размера необходимо еще раз по ней кликнуть мышкой. Для создания данного примера использовали CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery. Если ... Читать далее »
Текстовый игровой автомат
Интересный скрипт для генерации заданного текста с эффектом анимации как в игровом автомате. Поочередно задаются буквы, которые за заданное в скрипте время складываются в слово. HTML CSS JS Читать далее »
Простой Parallax эффект прокрутки
Пример прокрутки для сайта с parallax эффектом. При прокрутке динамически происходит смена фона с параллакс-эффектом. Этот пример Parallax скроллинга реализован с помощью CSS и JS. HTML CSS JS Читать далее »
Эффект пульсации для кнопок (Android L Ripple Effect)
Пример создания эффекта пульсации для кнопок (Android L Ripple Effect). Эффект создается с помощью CSS3 и JS. HTML CSS JS Читать далее »
Скрипт перехода от нуля до заданного числа
Предлагаю вашему вниманию пример реализации скрипта, который заполняет значение от нуля до заданного числа. Изменяя в скрипте последнюю строчку можно легко задать конечное значение (число которое получим в результате) и длительность заполнения (время перехода от нуля до заданного значения). HTML CSS JS Читать далее »