Я очень люблю разного рода технические и визуальные решения, позволяющие реализовывать бизнес-логику как можно удобнее и наиболее продуктивно. Учитывая тот факт, что сейчас я занят в рабочем проекте, направленном как раз на создание промо-сайта, разного рода «примочки» мне интересны вдвойне.
Зайдя недавно на сайт 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. Размещать ее на всех страницах — плохая идея, поскольку рано или поздно она попросту начнет раздражать.
Ниже вы можете посмотреть готовый пример использования и скачать файлы плагина.
Продолжим приятную традицию представления блогов из моего Google Reader-а:
Lady Maksima — по сложившемуся стереотипу и практике, открывая страницу блога, в заголовке которого присутствует слово «SEO», ты изначально предполагаешь на той стороне монитора скорее сурового бородатого мужика в свитере, но уж никак не хрупкую девушку :)
Но как показало детальное ознакомление со статьями блога — Интернет действительно многообразен и не только гендерная принадлежность автора отличает этот ресурс от остальной серой массы сайтов о заработке. Не рассчитывайте найти в статьях «воду» или бессмысленные финстрипы — спектр интересов Елены очень широк и охватывает не только SEO в чистом виде, но и многие другие вопросы продвижения. Например, в последнее время, автор всерьез заинтересовалась созданием страниц на Facebook, их продвижением и популяризацией. Не поленитесь, обязательно прочитайте всю серию статей.
Свежая статья: «Внутренняя оптимизация блога на WordPress»