Замечательное визуальное решение для промо-сайтов

Замечательное визуальное решение для промо-сайтов

Я очень люблю разного рода технические и визуальные решения, позволяющие реализовывать бизнес-логику как можно удобнее и наиболее продуктивно. Учитывая тот факт, что сейчас я занят в рабочем проекте, направленном как раз на создание промо-сайта, разного рода «примочки» мне интересны вдвойне.

Зайдя недавно на сайт Apple, я столкнулся с интересным способом анонсирования события под названием "The Beatles now on iTunes! " — при загрузке сайта, первым на экране появляется фотография битлов, после — две фразы анонса, а уже потом вокруг блока анонса загружается остальной сайт. Посмотрите сами.

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

Особо стоит отметить, что весь анонс занимает не более 10 секунд, что положительно сказывается на восприятии информации: во-первых — не успевает надоесть, а во-вторых — финальный кадр заставки остается на экране, будучи аккуратно вписанным в общую канву сайта.

Естественно, мне стало очень интересно, каким же образом и с помощью каких технологий, реализовано такое решение. Слегка покопавшись в Google, я нашел статью Martin Angelov, который написал целое подробное руководство по созданию аналогичного эффекта: «Making an Apple-style Splash Screen». Вольный перевод этой статьи я хочу сегодня представить вашему вниманию, а в конце материала вы найдете ссылки на пример использования плагина и архив со скриптом.

Beatles на iTunes! Уверен, вы заметили удивительную заставку, которую использует Apple для анонсирования этого события. Рискуя стать основоположниками тренда, сегодня мы создадим простой JQuery-плагин, который позволит нам использовать аналогичные заставки.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Splash Screen | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/splashscreen.css" />
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script.js"></script>
</head>
<body>

<div id="page">
    <div id="topBar"></div>

    <div id="promoIMG">
    	<img src="img/available_now.png" alt="Available Now" />
    </div>

    <div id="contentArea">
        <p>... The textual content ...</p>
    </div>
</div>
</body>
</html>

Обратите внимание, загрузка скриптов вынесена в заголовок страницы. Обычно, лучше всего включить их вызов в тело, поскольку в противном случае — до тех пор, пока не загрузятся скрипты, пользователь будет видеть только пустую страницу. Но в данном случае, я сознательно пошел против стандартных правил, поскольку мы должны быть уверены, что пользователь не увидит контент страницы до того, как ему будет показана заставка.

CSS

У нас есть два различных файла стилей — styles.css и splashscreen.css. Первый очень прост, поскольку в нем используются только стили для основной страницы и потому обсуждать его мы не будем. Стили, которые определяют внешний вид заставки, расположены в файле splashcreen.css.

splashcreen.css

<strong>
</strong>
#splashScreen img{
	margin:0 auto;
}

#splashScreen{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:#252525;
	background-repeat:no-repeat;
	text-align:center;
}

В фрагменте, приведенном выше, мы указали, что div абсолютно позиционируется по отношению к окну документа и он замещает всю высоту и ширину страницы. Цвет фона аналогичен цвету фона изоюбражения MacBook, которое мы используем в качестве фонового изображения.

Замечательное визуальное решение для промо-сайтов

The jQuery

Весь код плагина расположен в jquery.splashscreen.js. Как я уже говорил во вступительной части, очень важно, чтобы скрипт был загружен до того, как пользователю будет показан остальной контент, в противном случае заставка будет тормозить и дергаться.

Единственное обязательное свойство объекта, которое требуется обязательно — textLayer. Это свойство содержит массив из URL-адресов всех изображений, с промо-фразами, которые выводятся над изображением MacBook. Массив может быть любой длины,  а кроме того — можно использовать не только текст, но и изображения. При желании, вы можете превратить этот блок в стильное слайд-шоу.

Ниже можно увидеть, как именно работает эта часть:

script.js

$(document).ready(function(){

	// Calling our splashScreen plugin and
	// passing an array with images to be shown

	$('#promoIMG').splashScreen({
		textLayers : [
			'img/thinner.png',
			'img/more_elegant.png',
			'img/our_new.png'
		]
	});

});

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

Ниже вы можете посмотреть готовый пример использования и скачать файлы плагина.

Посмотреть демо-версию скрипта Apple-style Splash Screen

Скачать файлы плагина

Продолжим приятную традицию представления блогов из моего Google Reader-а:

Lady Maksima — по сложившемуся стереотипу и практике, открывая страницу блога, в заголовке которого присутствует слово «SEO», ты изначально предполагаешь на той стороне монитора скорее сурового бородатого мужика в свитере, но уж никак не хрупкую девушку :)

Но как показало детальное ознакомление со статьями блога — Интернет действительно многообразен и не только гендерная принадлежность автора отличает этот ресурс от остальной серой массы сайтов о заработке. Не рассчитывайте найти в статьях «воду» или бессмысленные финстрипы — спектр интересов Елены очень широк и охватывает не только SEO в чистом виде, но и многие другие вопросы продвижения. Например, в последнее время, автор всерьез заинтересовалась созданием страниц на Facebook, их продвижением и популяризацией. Не поленитесь, обязательно прочитайте всю серию статей.

Свежая статья: «Внутренняя оптимизация блога на WordPress»

24 комментария к “Замечательное визуальное решение для промо-сайтов”

  1. Спасибо за плагин, очень понравился. Попробую прикрутить его к одному лэндингу, посмотрим как повлияет на конверт :)

    ОтветитьОтветить
  2. Хороший плагин. Простым способом достигается прикольный эффект.

    ОтветитьОтветить
  3. Впечатляющий эффект. Тоже люблю всякие штучки, которые позволяет без лишнего напряжения реализовывать jquery. Вот ещё один эффект в копилку. Спасибо!

    ОтветитьОтветить
  4. Яблочники всегда умели привлечь внимание к своим продуктам ))

    За плагин — спасибо!

    ОтветитьОтветить
  5. Оооо, я видела Битлов на iTunes! И кстати обратила еще внимание на последовательность загрузки, подумала что это у меня такой баг!))) а это специально)) как мило! спасибо за код, уверена, пригодиться!

    ОтветитьОтветить
  6. Ща скачаем и заценим, раз все нахваливают))

    Мне ещё нравится сайт адидаса, очень оригинально.

    ОтветитьОтветить
  7. Потому что это Apple они были и будут впереди всех по креативу и белому pr, я в этом просто уверена. Работаю консультантом в одном из магазинов Re stope в Москве. Вижу радость на лицах покупателей)

    С уважением Юля

    ОтветитьОтветить
  8. Спасибо, нужная информация. Конечно, на ЖЖ плагин использовать не получится, а вот на своём домене попробовать стоит.

    ОтветитьОтветить
  9. Очень люблю подобные вещи, сохранил для совсем скорых времён, спасибо

    ОтветитьОтветить
  10. А по-моему данные решения сродни непрокручиваемой рекламе в начале фильма — т.е. читай принудительное «впаривание» данного материала. Лучше было бы это как-то красиво на сайте обыграть и я бы по желанию-заинтересованности кликал и смотрел, а так желание только одно: как можно скорее от этой штуки, «выплывающей» вместо сайта, избавиться — и неважно что там на ней нарисовано.

    Подобными «заставками» активно балуется, например, мыло.ру — заходишь на сайт, например, про автомобили — и сколько-то там секунд «любуешься» рекламой нового лесксуса во весь телевизор. Зачем!? Разве если меня лескус интересует — я не открою красивую маленькую картинку, будь она красиво на сайте расположена?

    У нас (в интернете) скоро уже одна только реклама останется и за примерами далеко ходить не надо: вон, достаточно телевизор включить — там уже реклама составляет в лучшем случае половину эфирного времени... :(

    ОтветитьОтветить
  11. @ The Lex: спасибо за комментарий.

    Не соглашусь. Дело в том, что приведенный Вами пример с mail.ru некорректен — Вы путаете баннер и промо. В случае с mail.ru, это реклама стороннего товара, а данное решение является именно промо и призвано продемонстрировать посетителю, который пришел на сайт — акции, скидки, новое товарное предложение и т.д., которое принадлежит именно этой компании.

    То есть, говоря проще — на mail.ru Вы пришли за почтой, но смотрите почему-то Лексус, а в данном случае: Вы пришли в интернет-магазин за товаром, и Вам предлагают промо нового товара этого же магазина.

    Для примера, возьмем «автора» этого решения — Apple. Вы пришли на сайт Apple, призванный продавать и информировать о товарах Apple и Вам предлагают исключительно товары Apple.

    В чем же тут несоответствие?

    ОтветитьОтветить
  12. У яблочников визуал и дизайн реально берет вверх над конкурентами!

    ОтветитьОтветить
  13. Вот было бы хорошо, если бы скрипт умел писать куки и проверять их перед запуском, чтобы не надоедать этим эффектом )

    ОтветитьОтветить
  14. @ Макс: этот момент всегда можно добавить — в принципе, даже готовых решений в Сети достаточно много :)

    ОтветитьОтветить
  15. Не понравилось. Сейчас всех уже задолбали всплывающие окна браузера с рекламой, здесь эффект именно такой...я через 2 сек по привычке закрыл, только потом поняв что это был нужный мне сайт.

    ОтветитьОтветить
  16. @ gys:

    хотя, конечно, «на вкус и цвет...», но на мой взгляд, это решение намного лучше, чем банальное всплывающее окно. Единственный момент, который нельзя забывать — не стоит использовать подобное решение для стороннего продукта. А вот для промо собственных новых услуг или товаров — годится отлично.

    ОтветитьОтветить
  17. Спасибо за плагин, как раз хотел найти что-то наподобе. Поставлю может быть в интернет магазин заказчику=)

    ОтветитьОтветить
  18. Эта фишка сработает если страница открыта в активной вкладке браузера. Если открыть в фоновой, так сказать «посмотрю потом», то «шашечки» останутся незамеченными ;) Но идея действительно интересная. Спасибо, что разобрались как это работает и упаковали все в плагин :)

    ОтветитьОтветить
  19. @Valeriy: ну, тут уже все зависит от того, как настроен фокус нового окна/таба. У меня по-умолчанию новые табы открываются в фокусе :) От привычки открывать over 9000 табов для последующего просмотра я отказался еще в бытность активным пользователем Firefox — очень уж он любил память кушать :)

    ОтветитьОтветить
  20. спасибо, наверно заюзаю для порфолио когда допилю бложек, должно оказать впечатление на заказчика))

    ОтветитьОтветить
  21. А что, любопытный плагин. Применив его, можно добиться определенного визуального улучшайзинга сайта. Но вот вопрос: не сильно ли он повлияет на скорость загрузки? Ведь у многих разные хостеры...

    ОтветитьОтветить
  22. @Zotoff: для высоконагруженного проекта я бы провел оптимизацию кода и обязательно закешировал вызов.

    ОтветитьОтветить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *