Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Анимированное меню с вкладками на JavaScript

26.01.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.
  1. <div id="over_menu">
  2.     <div id="menu">
  3.         <a href="#" class="viramaina" id="menu1">Information</a>
  4.         <a href="#" class="viramaina" id="menu2">Products</a>
  5.         <a href="#" class="viramaina" id="menu3">Do!</a>
  6.         <a href="#" class="viramaina" id="menu4">Payments</a>
  7.         <a href="#" class="viramaina" id="menu5">Exit</a>
  8.     </div>
  9. </div>
  10. <div id="content">
  11. lorem ipsum dolor sit amet
  12. </div>
Таблица стилей тоже похожа. Главное отличие в том, что вкладки спозиционированы относительно строки меню, имеют высоту больше высоты строки меню и изначально смещены вниз под обрез верхней границы строки меню. Такая верстка позволит смещать вкладки по вертикали, достигая нужного эффекта.
  1. #over_menu {
  2.     height50px;
  3.     overflowhidden;
  4. }
  5. #menu {
  6.     positionrelative;
  7.     height30px;
  8.     margin-top15px;
  9. }
  10. .viramaina {
  11.     positionrelative;
  12.     height45px;
  13.     border2px solid #909090;
  14.     background#E0E0E0;
  15.     color#000000;
  16.     floatleft;
  17.     padding5px 10px 0 10px;
  18.     border-radius16 16 0 0;
  19.     font-weightbold;
  20.     font-familyArial;
  21.     text-decorationnone;
  22. }
  23. a.viramaina:hover {
  24.     background#FFFFFF;
  25.     color#FF0000;
  26. }
  27. #content {
  28.     font-size16px;
  29.     border2px solid #909090;
  30.     padding20px;
  31.     border-radius0 16 16 16;
  32. }
Теперь немного теоретической части, как это меню должно работать. На каждую вкладку устанавливаются два обработчика событий - перемещение курсора над вкладкой и выход курсора за ее границы. При заходе курсора на вкладку устанавливается персональный таймер, по которому вкладка плавно перемещается вверх с шагом в 1 пиксел до определенного значения. При подъеме вкладки до нужной высоты таймер сбрасывается. При выходе курсора за пределы вкладки устанавливается новый таймер, по которой она смещается обратно в прежнее положение. Идентификатор таймера, сдвиг и направление сдвига хранятся как свойства элемента вкладки.

Читать статью целиком »
Просмотров: 5256 | Комментариев: 2

Технология COMET на JavaScript

03.12.2013 | Категория: Web-мастеру и не только | Автор: ManHunter

Технология COMET на JavaScript

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

Читать статью целиком »
Просмотров: 8421 | Комментариев: 8

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

21.09.2013 | Категория: Web-мастеру и не только | Автор: ManHunter

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

Практически все современные web-сервисы предлагают пользователям такую фичу, как загрузку файлов простым перетаскиванием их в браузер. Это действительно очень удобно, когда надо загрузить сразу несколько файлов, поле загрузки может иметь произвольный вид и форму, т.к. не подвязано на стандартные элементы формы, и еще множество других плюсов. Как же это сделано? Очень просто. Мы уже рассматривали в одной из статей прием и отправку текстовых данных при помощи технологии AJAX, загрузка файлов выполняется не намного сложнее.

Читать статью целиком »
Просмотров: 25162 | Комментариев: 17

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

11.08.2013 | Категория: Web-мастеру и не только | Автор: ManHunter

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

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


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


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

Читать статью целиком »
Просмотров: 14906 | Комментариев: 13

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

19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
  1. <div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
  1. <div style="position: relative; height:600px; width:800px;">
  2.    <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
  3.    <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
  4. </div>
Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.

Читать статью целиком »
Просмотров: 17096 | Комментариев: 9

01 ... 05 06 07 08 09 10 11 ... 14
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 3 (0.0037 сек.) / Память: 4.5 Mb
Наверх