4lv.ru


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. После регистрации вам будет доступен VIP статус !!!!


Читают: 1

Анимированные шапки для сайта — делаем крутые шапки на сайте
Цена: Бесплатно


Анимированные шапки для сайта — делаем крутые шапки на сайте



Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице.


 Иногда его делают не слишком большим.

 Он может быть либо статическим, либо динамическим.

 Всё зависит от желания и фантазий дизайнера и владельца сайта.

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

Благодаря этим способам — ваш сайт однозначно выделится на фоне других.


Четыре примера вы можете посмотреть по следующей ссылке:

ПОСМОТРЕТЬ ПРИМЕР

Как пользоваться? — Анимированные шапки для сайта

HTML часть

В коде страницы всё что нужно вставить, это:


1 2 3
<div id="large-header" class="large-header">    <canvas id="demo-canvas"></canvas>
</div>


В блоке <div> с идентификатором и классом large-header находится тег <canvas>, в которм и происходит вся анимация. А блок <div> лишь содержит фоновое изображение.

javascript часть

Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).

Например, для примера №1 нужно подключить следующие библиотеки:


1 2 3 4
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>

Для 2-го примера:


1 2
<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>

Для 3-го:


1 2 3 4
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-3.js"></script>

И, наконец, для 4-го:

1 2
<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>



Вывод

Все шапки имеют ширину окна браузера пользователя. Эти примеры используют Canvas и javascript. Также в первом демо вы могли заметить что при перемещении указателя мыши перемещается эффект на заднем плане, что придает еще большую интерактивность.
Дело в том, что не все мобильные устройства правильно работают с тегом Canvas, поэтому в этом случае будет отображаться просто статическая картинкаВсе для веб мастера 11.2

Вас заинтересуют так же следующие новости

 

БЕСПЛАТНЫЕ скрипты скачиваются после просмотра рекламы::

Внимание !! Если у вас не получается скачать файл после просмотра рекламы , попробуйте отключить блокировщик рекламы в вашем браузере . У нас это безопасно .
 
раскрутка веб сайтов


2-11-2019, 01:05 718
А также:

    Я покажу Вам как просто сделать так, чтобы какой-то блок показывался в определенное время. Например, Вы хотите показывать рекламу в определенное время суток или есть такой блок, который нужно показывать например только вечером. Так же можно организовать разные шапки сайта для разного времени суток.

    Цена: Бесплатно

    Красивая шапка на сайте привлекает и удерживает внимание посетителей и остается в их сознании еще долго после того, как они покинули сайт. Шапка привлекают внимание горящим огнём в камине и выглядит довольно просто и элегантно. Хороший и светлый дизайн шапки обязательно понравиться Вам и Вашим

    Цена: 10 рублей

    Красивая шапка для сайта с живым прудом. Так же если у пользователя отключен флеш то он увидит обычную картинку заглушку. В шапке присутствует простенькое меню. Итак Давайте приступим к установке : 

    Цена: 10 рублей

    Что такое анкор, необходимо знать каждому, кто занимается раскруткой сайта. Также очень важно правильно писать эти анкоры.

    Цена: Бесплатно

    АВТОМАТИЧЕСКАЯ СМЕНА ШАПОК ПРИ ОБНОВЛЕНИИ СТРАНИЦЫ

    Цена: Бесплатно

    ПЛАВНАЯ ПРОКРУТКА К ЯКОРЮ С ОТСТУПОМ СВЕРХУ Пара примеров как сделать плавную прокрутку к якорю в тексте на Jquery. В первом примере продемонстрирую простой способ перемещения к якорю. Во втором боле интересный момент, перемещение с отступом сверху.

    Цена: Бесплатно

    Скрипты web-мастеру и владельцу сайта бесплатно для автоматизации и расширения возможностей ваших ресурсов. В этом разделе собраны бесплатные скрипты для владельцев сайтов.

    Цена: Бесплатно

    Платные курсы по заработку в интернете - БЕСПЛАТНО!Глопарт ************************************************************************************************************Эта страница закрыта от поиска! Чтобы не потерять её, добавляйте в избранное (закладки)! Обновления будут появляться по мере

    Цена: Бесплатно

    Веб-дизайн + Верстка Веб-дизайн сегодня – это не просто внешний вид сайта, но и то, насколько сайтом удобно пользоваться, насколько он понятен целевой аудитории, как быстро посетитель ресурса достигает цели, с которой пришел сюда. Соответственно, и веб-дизайнер — это не просто тот, кто создает

    Цена: Бесплатно

4lv.ru от 2 ноября 2019 01:09
Gleb,зайдите в папку js и там выберите файл, который соответствует той шапке, которая Вам понравилась. То есть если первая шапка, то откройте файл demo-1.js. Далее для 1-й шапки в 12-й строке (для 2-й — в 11-й строке; для 3-й — в 13-й; для 4-й — в 12-й строке) измените то, что идет после знака равно. Должно получиться так (если хотите задать высоту в 300px):

height = 300;



Ответить Цитировать

Gleb от 2 ноября 2019 01:07
Подскажите как уменьшить высоту этой шапки сайта?

Ответить Цитировать

Добавление комментария

RSS