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

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

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

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

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

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

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

Загрузка видимых изображений (Lazy Load) на JavaScript

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

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

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

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

PCL's Nice Tooltip 1.1.4

Для оформления этого блога мне понадобился хороший скрипт, показывающий всплывающие подсказки при наведении курсора мышки на определенные элементы страницы. Например, на картинки или ссылки. Готовыми скриптами я не пользуюсь, поэтому и здесь решил написать свой. Тем более я пока не встретил ни одного скрипта всплывающих подсказок, который обладал бы нужным мне функционалом. Так на свет появился скрипт PCL's Nice Tooltip, которым я с удовольствием с вами поделюсь.

Описание и возможности PCL's Nice Tooltip:

• Кроссбраузерность. Скрипт протестирован и гарантированно работает в браузерах Internet Explorer 5.x-8.x и IE-based (Avant Browser, TheWorld, Maxthon и других), Gecko-based (Firefox, Mozilla, Netscape 8.x-9.x, K-Meleon и других), Opera 7.x-10.x, WebKit-based (Safari, Google Chrome, Iron и других). Поддерживаются различные типы DOCTYPE web-страниц.
  
  
• Всплывающее окно подсказки автоматически подстраивается под размер текста, длинный текст переносится. Подсказка не выходит за пределы экрана и всегда целиком находится в видимой области web-страницы, размер окна подсказки при достижении краев экрана не искажается. Корректно обрабатывается вертикальная и горизонтальная прокрутка, а также фреймы.
  
  
• Простое подключение скрипта, не требующее никаких навыков программирования. Для продвинутых пользователей смена внешнего вида окна подсказки через собственные стили, расширение списка поддерживаемых тегов. Подключаемый скрипт имеет очень небольшой размер и не требует для работы дополнительных файлов.
  
  
• Хорошая интеграция скрипта с различными AJAX-компонентами. После загрузки через AJAX и обновления какого-нибудь фрагмента текста на странице достаточно вызвать всего одну функцию PCL_TooltipUpdate() и всплывающие подсказки сразу будут доступны в обновленной части страницы. Пример - динамический AJAX-календарик у меня на сайте.
  
  
• Скрипт абсолютно бесплатный, единственным условием его использования является сохранение в исходном коде скрипта информации об авторе и ссылки на этот сайт. Категорически запрещается распространять скрипт PCL's Nice Tooltip за деньги или иное вознаграждение, как отдельно, так и в качестве составной части других дистрибутивов! Всех барыг на кол.

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

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