Эффект параллакса на JavaScript

Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.

Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.

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

Читать статью целиком »

Эффектное слайд-шоу на JavaScript

Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

Читать статью целиком »

Горизонтальное меню с вкладками на CSS и JavaScript

Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.

Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.Связь между вкладками и блоками с содержимым выполняется через их атрибут id, для связанных блоков этот атрибут формируется из id вкладки путем добавления к нему строки "_content". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

Читать статью целиком »

CSS: текст, зачеркнутый линией другого цвета

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

Первый вариант, которым и была решена задача, - использование HTML-тега s или strike. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.Если почитать документацию по HTML, то там написано, что вместо этих тегов рекомендуется использовать тег del. Кроме визуального эффекта, он является еще и семантически более правильным, если требуется выделить текст, который утратил актуальность.

Читать статью целиком »

Защита контента сайта от копирования

Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Читать статью целиком »