Главная -> jQuery -> jQuery пример: красивая смена текста за 10 минут

jQuery пример: красивая смена текста за 10 минут

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

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

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

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




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



$(document).ready(function() {
var parentTaglineEl = $('#tagline');
parentTaglineEl.cycle({
fx: 'fade',
speed: 1000,
timeout: 6000,
random: 0
});
});

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

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


style="position:absolute; top:0pt; left:0pt; display:none;
z-index:5; opacity:0;">

Находка — город и порт


в Приморском крае
и поисковый алгоритм от Яндекса



style="position:absolute; top:0pt; left:0pt; display:none;
z-index:4; opacity:0;">

Магадан — город и порт


на северо-востоке России
- еще один


алгоритм от Яндекса



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

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

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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.