Анимация для хедеров и банеров
Приветствую всех посетителей сайта! Сегодня предлагаю вам простой скрипт анимации, который в считанные минуты поможет оживить изображения, используемые в шапке сайта или в баннерах. Точнее, это даже не анимация, поскольку происходит не смена изображений, а перемещение картинки вслед за мышкой. Подобный 3D-эффект достигается за счет использования нескольких слоев, как в Фотошопе.
Установка скрипта предельно проста и не нуждается в особых настройках: подключается сам скрипт, задаются стили для изображения и указываются картинки, которые используются в качестве слоев в хедере или баннере.
Все манипуляции по установке скрипта займут несколько минут, а вот подготовка изображений для слоев может занять немного больше времени, особенно если в процесссе работы придется прибегнуть к помощи графического редактора.
Если нет навыков обработки графических файлов, то можно использовать готовые картинки из интернета, подобрав тематически подходящий фон и изображение в формате png (на прозрачном фоне), которое будет использовано как верхний слой поверх основной картинки.
Итак, приступаем к процессу установки скрипта. Всего несколько шагов и вы создадите интересный эффект для своей графики.
Шаг 1. Скачиваем архив со скриптом. Ссылка на него расположена в конце статьи, где собственно и сам пример созданного баннера. После распаковки архива, мы видим всего лишь одну папку 3d-effect, внутри которой две подпапки: 3d и js.
Шаг 2. В папке 3d нужно заменить исходные изображения своими. Для новичков рекомендую оставить названия картинок прежними, чтобы потом их не менять в коде. То есть готовим фон для баннера и дополнительное изображение и сохраняем их в папке, назвав image1.png и image2.png.
Шаг 3. Подключаем скрипт, для этого на странице между тегами <body> и </body> вставляем следующий код:
<script type="text/javascript">
$(function() {
$('#mindscape').smart3d();
});
</script>
<ul id="mindscape">
<li><img src="http://sayt-s-nulya.ru/3d-effect/3d/image1.png" /></li>
<li><img src="http://sayt-s-nulya.ru/3d-effect/3d/image2.png" /></li>
</ul>
<style type="text/css">
#mindscape {
width: 720px;
height: 170px;
overflow: hidden;
border:2px solid #444444;
}
#mindscape li{
width: 844px;
height: 170px;
}
</style>
Код состоит из трех частей: инициализация скрипта (выделена коричневым цветом), вывод изображений (синий цвет) и стили оформления (зеленый цвет). Первую часть оставляем без изменений. Во второй части не забываем изменить путь к изображениям на свой. У меня это "http://sayt-s-nulya.ru/3d-effect/3d/image1.png", вам вместо моего сайта нужно будет указать свой домен. В третьей части прописываем размеры своих картинок, сначала верхнее изображение, затем фон.
Шаг 4. Загружаем на хостинг в корневой каталог папку 3d-effect и публикуем страницу с размещенным на ней баннером. Проверяем работоспособность баннера, поводив по нему мышкой.
Дополнение. При желании можно добавить текст на баннер, для этого во второй части кода нужно добавить несколько строк, после чего она примет следующий вид:
<ul id="mindscape">
<li><img src="http://sayt-s-nulya.ru/3d-effect/3d/image1.png" /></li>
<li><img src="http://sayt-s-nulya.ru/3d-effect/3d/image2.png" /></li>
<li>
<div class="content">
<h1>Здесь ваш текст</h1>
<h2>Здесь еще одна строка текста</h2>
<h3>Здесь еще одна строка текста при необходимости</h3>
</div>
</li>
</ul>
В третью часть кода потребуется внести тоже небольшое дополнение, включив еще один абзац со стилями для текста, после чего эта часть кода станет такой:
<style type="text/css">
#mindscape {
width: 720px;
height: 170px;
overflow: hidden;
border:2px solid #444444;
}
#mindscape li{
width: 844px;
height: 170px;
}
#mindscape .content {
padding: 0 105px;
color: #fff;
text-shadow: 0 0 8px #000000;
}
</style>
В добавленном абзаце можно корректировать цвет текста (color), отступы ( padding) и тени (text-shadow).
Вот таким простым спососом можно реализовать интересный 3d-эффект для своих изображений.
Демо-пример баннера
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2019 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Не забудь заглянуть в свою почту и подтвердить подписку!
