ArtShok. Сайтостроение и немного SEO

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

Ничего сложного в данном уроке нет и займет он в среднем минут 10 (при чем у меня большая часть времени ушла на подготовку фона для примера - пришлось выверять с картой где какие города находят). Чтобы понять о чем речь - смотрим пример.

Демо | Скачать

Шаг 1. Подгружаем jQuery + Cycle Plugin

<script type="text/javascript" src="images/jquery-1.js"></script>
<script type="text/javascript" src="images/jquery.js"></script>

Шаг 2. Устанавливаем вид и скорость смены блоков (можете прописать в отдельном файле, чтобы сильно не перегружать страницу кодом)

<script type="text/javascript">
$(document).ready(function() {
var parentTaglineEl = $('#tagline');
parentTaglineEl.cycle({
fx: 'fade',
speed: 1000,
timeout: 6000,
random:  0
});

});
</script>

где fade - это смена через растворение,
speed - скорость смены
timeout - задержка в смене кадров
random: 0 - текст идет в том порядке, в котором он у вас и прописан; если хотите вразнобой - ставите random: 1

Шаг 3. Сам текст
Сделаем для примера пару блоков

<div id="tagline-one" class="tagline"
style="position:absolute; top:0pt; left:0pt; display:none;
z-index:5; opacity:0;">
<h1><span class="emphasis">Находка — город и порт</span></h1>
<h2><span class="emphasis">в Приморском крае</span>
и поисковый алгоритм от Яндекса</h2>
</div>
<div id="tagline-two" class="tagline hide"
style="position:absolute; top:0pt; left:0pt; display:none;
z-index:4; opacity:0;">
<h1><span class="emphasis">Магадан — город и порт</span></h1>
<h2><span class="emphasis">на северо-востоке России</span>
- еще один</h2>
<h3>алгоритм от Яндекса</h3>
</div>

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

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

Ну а пока вы будете практиковаться и всяко разно разбирать данный jQuery пример по полочкам? я планирую открыть какой-нибудь мануал по Adobe Illustrator и заняться векторной графикой, ибо принимаю участие в еще одном интересном конкурсе по разработке логотипа для блога “Всеобщее самообучение”. У кого уже есть навыки в данной сфере - присоединяйтесь! Приз - $100.

Рекомендуемые статьи:

• 5 способов красивого оформления посещенных ссылок с помощью CSS
• Меню на CSS+jQuery (гаражные двери)
• Украшаем формы с помощью CSS и jQuery - часть 1
• Иконизируем ссылки
• Градиентный текст с помощью CSS (без флэш и javascript)
• Как сделать древовидный список с помощью CSS
• jQuery пример по замене фоновой картинки для отсутствующего изображения

Обязательно к использованию: