Blog. Just Blog

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

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

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

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

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

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


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


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

Читать статью целиком »
Просмотров: 13723 | Комментариев: 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.

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

AJAX - это очень просто

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

AJAX - это очень просто

AJAX, от английского "Asynchronous Javascript and XML" - "асинхронный JavaScript и XML" - одна из технологий построения WEB-интерфейсов, заключающаяся в фоновом обмене данными браузера с сервером. При использовании этой технологии веб-страница не перезагружается полностью, и приложения становятся быстрее и удобнее. Сейчас сложно представить современные сайты или веб-приложения без применения этой технологии в том или ином виде. Практически все существующие нынче JavaScript-фреймворки предоставляют инструменты для реализации AJAX-запросов, но я предпочитаю работать с чистым JavaScript. Если вам интересно, как устроена технология AJAX изнутри, то предлагаю вашему вниманию эту статью.

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

Как скопировать массив на JavaScript

29.05.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
При программировании на JavaScript иногда требуется создать копию массива. Но особенность заключается в том, что в JavaScript массив является объектом, поэтому при использовании оператора присваивания, новой копии создаваться не будет, а просто будет создана ссылка на существующий массив. Если после этого попробовать внести какие-нибудь изменения в любой из этих массивов, то изменения будут внесены сразу в оба. Так получается, потому что фактически это один и тот же объект. Например:
  1. // Как хочется сделать, но не получится
  2. var old_array = ['one''two''three'];
  3. var new_array old_array;
  4.  
  5. // Добавляем по одному элементу в исходный и "новый" массив
  6. old_array.push('banana');
  7. new_array.push('lemon');
  8.  
  9. // Получается вот что
  10. // old_array = ['one', 'two', 'three', 'banana', 'lemon'];
  11. // new_array = ['one', 'two', 'three', 'banana', 'lemon'];
Как видите, несмотря на то, что мы пытались добавить элементы в разные массивы (как нам казалось), они добавились в оба. Чтобы создавать не ссылку, а копию, можно воспользоваться хитрым трюком с методом slice. В этом случае будет создана именно копия массива.
  1. // Корректный вариант решения
  2. var old_array = ['one''two''three'];
  3. var new_array old_array.slice(0);
  4.  
  5. // Добавляем по одному элементу в исходный и новый массив
  6. old_array.push('banana');
  7. new_array.push('lemon');
  8.  
  9. // Теперь все правильно
  10. // old_array = ['one', 'two', 'three', 'banana'];
  11. // new_array = ['one', 'two', 'three', 'lemon'];
Надеюсь, что этот совет вам где-нибудь пригодится и поможет избежать хитрых ошибок, которые достаточно сложно отловить.

Просмотров: 4153 | Комментариев: 6

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

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

Начнем с проектирования. Нам надо создать в 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". Такой способ позволяет размещать блоки с контентом в произвольном порядке, независимо от порядка следования вкладок.

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

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