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

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

Эффект параллакса на JavaScript
Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.
Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.
В веб-дизайне эффект параллакса используется в неравномерном перемещении фона, а также ближних объектов относительно дальних на многослойном изображении, что создает иллюзию объема. Это может быть вертикальный параллакс, когда при прокрутке страницы сайта фон перемещается медленнее ее содержимого, или же псевдоанимация в шапке сайте или рекламном блоке, которая активизируется при движении мыши.
Читать статью целиком »
Просмотров: 15187 | Комментариев: 13

Эффектное слайд-шоу на JavaScript
19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;"></div>
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;">
- <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
- <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
- </div>
Читать статью целиком »
Просмотров: 17349 | Комментариев: 9

Горизонтальное меню с вкладками на CSS и JavaScript
27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
Code (HTML) : Убрать нумерацию
- <!-- меню с вкладками -->
- <ul id="menu">
- <li id="goods">Товар</li>
- <li id="descr">Описание</li>
- <li id="foto">Фотография</li>
- <li id="price">Цена</li>
- <li id="shops">Где купить</li>
- </ul>
- <!-- контейнер со страницами -->
- <div id="container">
- <div id="goods_content">Товар</div>
- <div id="price_content">Цена на товар</div>
- <div id="shops_content">Адреса магазинов</div>
- <div id="descr_content">Описание</div>
- <div id="foto_content">Фотографии</div>
- </div>
Читать статью целиком »
Просмотров: 16797 | Комментариев: 15

Защита контента сайта от копирования
05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
Code (JavaScript) : Убрать нумерацию
- function nocopy(event) {
- var event = event || window.event;
- if (event.preventDefault) { event.preventDefault(); }
- else { event.returnValue = false; }
- return false;
- }
- document.onmousedown = nocopy;
- document.onmouseup = nocopy;
- document.onmousemove = nocopy;
- document.ondragstart = nocopy;
- document.onselectstart = nocopy;
- document.ontextmenu = nocopy;
- document.oncopy = nocopy;
Читать статью целиком »
Просмотров: 23828 | Комментариев: 27

Какая может быть максимальная длина URL?
23.11.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Однажды, при разработке одного из проектов, я столкнулся с тем, что требовалась передача большого количества данных из формы методом GET, то есть через адресную строку. У меня под браузером Firefox все работало как надо, а вот у манагеров, сидящих на Internet Explorer, выдавалась ошибка, что запрошенная страница не может быть отображена. Как оказалось, проблема была в том, что получался слишком длинный адрес URL, и ограничения браузера не позволяют его открыть. Причем у Firefox по всей видимости, этот лимит выше, чем у Internet Explorer. Это натолкнуло меня на мысль протестировать различные браузеры на предмет максимально допустимой длины URL, и вот что у меня получилось. Для опытов был написан коротенький скрипт:Code (PHP) : Убрать нумерацию
- if ($_GET['long']) {
- echo '<script>document.write(document.location.href.length);</script>';
- }
- else {
- $long=1;
- for ($i=0; $i<23; $i++) {
- $long=ceil(2*$long);
- echo '<a href="test.php?long='.$long;
- echo '#chk='.str_repeat('x',$long).'_end!">'.$long.'</a><br>';
- }
- }
LimitRequestLine "65535" must not exceed the precompiled maximum of 8190
То есть для изменения порогового значения надо перекомпилировать сервер с нужными значениями, а это я сделать не могу, тем более на хостинговом сервере. Пропатчить все проверки в локальной версии сервера тоже не удалось, ограничение все равно оставалось. Поэтому пришлось извернуться через анкор и JavaScript.
Читать статью целиком »
Просмотров: 30198 | Комментариев: 10
