Blog. Just Blog

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

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

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

26.01.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Этот скрипт - небольшая доработка меню с вкладками, которое я описывал в одной из своих предыдущих статей. Я решил добавить в него эффект анимации: при наведении курсора на вкладку она плавно поднимается над строкой меню, а при выходе курсора за пределы вкладки плавно опускается обратно. Главная фишка, чтобы анимация работала параллельно и независимо для каждой вкладки. Начнем с разметки, она очень похожа на разметку из предыдущей статьи, но с одним дополнением - строка меню дополнительно обернута в контейнер фиксированной высоты, который имеет стиль overflow:hidden. В остальном все то же самое.
Code (HTML) : Убрать нумерацию
  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>
Таблица стилей тоже похожа. Главное отличие в том, что вкладки спозиционированы относительно строки меню, имеют высоту больше высоты строки меню и изначально смещены вниз под обрез верхней границы строки меню. Такая верстка позволит смещать вкладки по вертикали, достигая нужного эффекта.
Code (HTML) : Убрать нумерацию
  1. #over_menu {
  2.     height: 50px;
  3.     overflow: hidden;
  4. }
  5. #menu {
  6.     position: relative;
  7.     height: 30px;
  8.     margin-top: 15px;
  9. }
  10. .viramaina {
  11.     position: relative;
  12.     height: 45px;
  13.     border: 2px solid #909090;
  14.     background: #E0E0E0;
  15.     color: #000000;
  16.     float: left;
  17.     padding: 5px 10px 0 10px;
  18.     border-radius: 16 16 0 0;
  19.     font-weight: bold;
  20.     font-family: Arial;
  21.     text-decoration: none;
  22. }
  23. a.viramaina:hover {
  24.     background: #FFFFFF;
  25.     color: #FF0000;
  26. }
  27. #content {
  28.     font-size: 16px;
  29.     border: 2px solid #909090;
  30.     padding: 20px;
  31.     border-radius: 0 16 16 16;
  32. }
Теперь немного теоретической части, как это меню должно работать. На каждую вкладку устанавливаются два обработчика событий - перемещение курсора над вкладкой и выход курсора за ее границы. При заходе курсора на вкладку устанавливается персональный таймер, по которому вкладка плавно перемещается вверх с шагом в 1 пиксел до определенного значения. При подъеме вкладки до нужной высоты таймер сбрасывается. При выходе курсора за пределы вкладки устанавливается новый таймер, по которой она смещается обратно в прежнее положение. Идентификатор таймера, сдвиг и направление сдвига хранятся как свойства элемента вкладки.

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

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

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

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

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


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


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

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

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

19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
Code (HTML) : Убрать нумерацию
  1. <div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
Code (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.

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

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

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

Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
Code (HTML) : Убрать нумерацию
  1. <!-- меню с вкладками -->
  2. <ul id="menu">
  3.   <li id="goods">Товар</li>
  4.   <li id="descr">Описание</li>
  5.   <li id="foto">Фотография</li>
  6.   <li id="price">Цена</li>
  7.   <li id="shops">Где купить</li>
  8. </ul>
  9.  
  10. <!-- контейнер со страницами -->
  11. <div id="container">
  12.   <div id="goods_content">Товар</div>
  13.   <div id="price_content">Цена на товар</div>
  14.   <div id="shops_content">Адреса магазинов</div>
  15.   <div id="descr_content">Описание</div>
  16.   <div id="foto_content">Фотографии</div>
  17. </div>
Связь между вкладками и блоками с содержимым выполняется через их атрибут id, для связанных блоков этот атрибут формируется из id вкладки путем добавления к нему строки "_content". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

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

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

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

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

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

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

01 02 03 04 05 06 07 08 09
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (19), AJAX (5), Assembler (243), COM (15), CSS (37), Exif (14), FASM (7), Firefox (7), HDD (9), Hello Teddy (9), HTML (44), iconBIT (4), JavaScript (61), MySQL (11), Nikon (19), PDF (8), PHP (92), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), Windows 7 (62), аккумуляторы (22), аксессуары (11), анализаторы файлов (8), архиваторы (5), аттракционы (6), безопасность (50), браузеры (16), бытовая техника (8), варенье (15), ВВЦ (9), ВДНХ (7), видео (20), Воробьевы горы (4), вторые блюда (94), выпечка (17), выставки (98), генератор ПСЧ (5), графика (82), десерты (27), Египет (7), заготовки на зиму (35), закуска (17), закуска к пиву (20), зарядные устройства (22), защита (15), зоопарки (9), игры (29), иконки (18), интерфейс (21), исследование защиты (238), каша (4), клавиатура (7), Коломенское (35), консоль (5), концерты (52), Кузьминки (4), куклы (25), ледяные скульптуры (6), мои программы (62), мониторы (6), музеи (62), мультимедиа (40), мясо (41), напитки (11), ноутбуки (6), обфускация (6), окна (63), оформление сайта (44), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (103), полезные функции (34), прохождения (4), процессы (19), птица (16), путешествия (24), распаковка (12), реверсинг (45), рыба (29), салаты (16), сброс триала (4), сеть (27), система (146), Сокольники (8), супы (12), телефоны (7), Тунис (6), файлы справки (6), фаст-фуд (14), фестиваль цветов (5), флешки (5), фото (23), хеши (15), числа (8), юмор (12), яйца (16)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 28,142 раза
<< 2021 - АПРЕЛЬ >>
Пн Вт Ср Чт Пт Сб Вс
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
День войск противовоздушной обороны России
Международный день освобождения узников фашистских концлагерей
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 410
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.12 сек. / MySQL: 3 (0.0462 сек.) / Память: 4.75 Mb
Наверх