От автора: Отличный способ привлечь внимание посетителя своего веб-сайта – это «сплэш-заставка». Однако сделать его удачно – очень непростая задача по одной простой причине: сплэш -заставки легко раздражают пользователей.
Сплэш -заставка работает хорошо, если быстро появляется и легко убирается. Такой экран может быть визуально ярким и красивым и вызывать у пользователя желание прокрутить его и посмотреть дальше. Начальные экраны такого типа очень хорошо работают на одностраничных прокручиваемых веб-сайтах. Или в веб-дизайне «баннерного стиля», который вошел в моду вместе с трендом «плоского» дизайна. Он также может оказаться полезен для хорошо выглядящего стиля «фонового видео» начальной страницы, который сейчас тоже является последним писком моды.
Сегодня я хочу продемонстрировать вам базовый способ добиться такого эффекта, который вы сможете легко модифицировать и делать красивые начальные страницы, оказывая этим влияние на впечатление пользователя.
Если хотите увидеть то, что мы строим, то вот демопример. А здесь можно скачать все исходные файлы.
Разметка
Мы постараемся сделать разметку очень простой. Таким образом, она сможет применяться как к уже существующим сайтам, так и к новым проектам.
В общем, нам нужно создать два div’а. Один с классом splash и второй с классом wrapper. (Класс wrapper может уже существовать, если вы применяете этот метод к существующему веб-сайту, поэтому вам, возможно, придется изменить имя этого класса).
Собственно, вот и все, что нужно для семантики. Но, естественно, мы добавим некий фиктивный контент и заголовки для того, чтобы в демопримере можно было на что-то посмотреть. Нам также понадобится добавить на экран-заставку стрелку-указатель, которая покажет пользователю, что его можно прокрутить (так как это и есть способ убрать начальный экран и показать основное содержимое). Так что вот вам простая разметка, вся она находится внутри тэга body:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="splash fade-in"> <h1 class="splash-title fade-in">SPLASH SCREEN TITLE</h1> <a href="#" class="splash-arrow fade-in"><img src="img/down-arrow.png" alt="" /></a> </div> <!-- END .splash --> <div class="wrapper"> <header class="cf"> <h1><a href="#">Page Title</a></h1> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="main-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem</p> <br /> <hr /> </section> <footer> <p>© 2013 - Splash Screen</p> </footer> </div> <!-- END .wrapper --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> |
Итак, давайте объясню немного детальнее, что здесь происходит: мы начинаем с div’а splash. Внутри него находится заголовок и индикатор прокрутки (который здесь показан в виде изображения стрелочки, но, естественно, может оказаться чем угодно). Затем мы закрываем этот div и открываем другой, с классом wrapper. Внутри него находится исходное содержимое сайта, которое для каждого случая будет разным, а у нас здесь оно очень простое: заголовок, некоторая навигация, область основного контента и нижний колонтитул. Затем добавляется jQuery из Google API, так как мы будем использовать его функциональность, и, наконец, делается ссылка на другой файл .js – свой собственный – где мы напишем код jQuery.
Вы, может быть, заметили в области экрана-заставки имя класса fade-in. Мы применим этот класс для того, чтобы добавить к некоторым элементам красивую анимацию CSS3 и сделать начальный экран более мощным. Естественно, если посмотреть на результаты сейчас, то в действительности там пока ничего нет, нам еще требуется назначить стили. Кстати о стилях, давайте-ка перейдем к CSS…
Стили
Давайте постараемся сделать стили простыми и удобными. Все они – простой CSS. Начнем с имени класса .fade-in. (Его нужно заявить вверху нашего файла CSS для того, чтобы далее можно было объявить разное время задержки анимации остальных элементов.)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.3s; -moz-animation-duration:0.3s; animation-duration:0.3s; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; } |
Сначала заявляем keyframes и вызываем анимацию fadeIn. Непрозрачность варьируется от 0 до 1. Затем напрямую выбираем имя класса, определяем его непрозрачность равной 0 и вызываем к только что определенной нами анимации, назначая ей длительность в 0,3сек. и задержку в 0,5сек.
Теперь рассмотрим CSS, необходимый для экрана-заставки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.splash { background: url('../img/splash-bg.jpg') center center; background-size: cover; background-attachment: fixed; position: fixed; top: 0; right: 0; bottom: 0; left: 0; min-height: 360px; z-index: 999; text-align: center; } |
Вызываем фоновое изображение (здесь просто черно-белое фото улицы), которое центрируем, убедившись при этом, что оно закрывает полностью экран любого размера, и закрепляем его — это означает, что он не станет двигаться при прокрутке. Затем назначаем ему фиксированное положение и определяем, что он должен быть на расстоянии 0 от верхнего, правого, нижнего и левого краев — следовательно, обязан заполнить все окно браузера. Далее определяем ему минимальную высоту, так как все, что мы поместим внутри, будет позиционировано абсолютно. Убедитесь, что у него имеется большое значение z-index, так как нам требуется, чтобы он появлялся поверх остального контента страницы (который сейчас будет размещен прямо под экраном-заставкой по причине своего фиксированного положения).
Ну вот и все стили, которые действительно нужны для того, чтобы экран-заставка появлялся в нужном месте страницы. Он заполняет экран и находится поверх остального содержимого, совершенно не меняя течения страницы. Сейчас я покажу вам остальной CSS, который в основном лишь помещает в нужное место заголовок, дополняет экран красивой стрелкой, направленной вниз для обозначения того, что пользователю нужно сделать прокрутку. И, наконец, вот некоторые основные стили страницы и несколько медиазапросов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
html, body { width: 100%; height: 100%; } body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; } .wrapper { max-width: 1000px; width: 90%; margin: 0 auto; } .splash-title { color: white; font-size: 3em; margin-top: 100px; text-shadow: 0 2px 10px #000; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; } a.splash-arrow { color: white; font-size: 1.2em; position: absolute; bottom: 55px; left: 50%; margin-left: -25px; padding: 10px; width: 50px; height: 50px; font-weight: bold; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; border: 3px solid white; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } a.splash-arrow:hover { text-decoration: none; bottom: 50px; } @media all and (max-width: 690px) { header h1 { width: 100%; text-align: center; } header nav { float: none; display: inline-block; margin: 0 auto; } .splash-title {font-size: 2em;} } @media all and (max-width: 480px) { .splash-title {font-size: 1.5em;} } |
Итак, у нас здесь имеется несколько основных стилей body, некоторый отступ заголовка от верха, где мы задерживаем усиление анимации еще на полсекунды. Поэтому у нее есть свое собственное появление. Ссылка-стрелка позиционирована абсолютно для того, чтобы всегда находиться посредине и внизу экрана. Ее задержка окончательного появления на экране – еще полсекунды. Добавляем несколько переходов CSS3 для того, чтобы анимировать ее расположение при состоянии проведения мышью :hover. Наконец, немного меняем медиазапросы, чтобы на маленьких экранах она смотрелась еще лучше. Но, конечно, эти стили будут меняться в зависимости от вашего дизайна.
jQuery
Как об этом уже говорилось ранее, мы собираемся сделать файл с именем main.js в директории js. Внутри него напишем свой код jQuery, который заставит экран-заставку исчезать при прокрутке или щелчке по ссылке-стрелке. Вот он:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { if($(".splash").is(":visible")) { $(".wrapper").css({"opacity":"0"}); } $(".splash-arrow").click(function() { $(".splash").slideUp("800", function() { $(".wrapper").delay(100).animate({"opacity":"1.0"},800); }); }); }); $(window).scroll(function() { $(window).off("scroll"); $(".splash").slideUp("800", function() { $("html, body").animate({"scrollTop":"0px"},100); $(".wrapper").delay(100).animate({"opacity":"1.0"},800); }); }); |
Сначала обертываем несколько первых утверждений в функцию document ready для того, чтобы действие выполнялось только при полной загрузке страницы. Поэтому для начала проверяем, виден ли наш экран-заставка. Если да, то делаем упаковщик невидимым (так у нас пропадет мелькание содержимого при загрузке фонового изображения, а также это нужно для окончательной анимации проявления при переходе на страницу). Затем добавляем к обработчику щелчка стрелки функцию. Теперь, если пользователь щелкнет по ней, экран-заставка сдвинется вверх (и таким образом исчезнет), а затем снова анимируем непрозрачность упаковщика до 1.
Этот небольшой блок кода (почти) такой же, как тот, который мы применим сразу после функции $(window).scroll. При прокрутке пользователем заставка сдвигается вверх и одновременно анимируется обратно к верху страницы (с тем, чтобы пользователь не начинал с середины страницы), а непрозрачность элемента-упаковщика анимируется. Кроме того, добавляем строку $(window).off(“scroll”);, которая не дает окну действительно прокручиваться тогда, когда нам это не требуется. При первой прокрутке пользователя нам нужно всего лишь вызвать анимацию, а не прокрутить страницу на самом деле. Но как только уберется заставка, страница станет прокручиваться нормально.
Заключение
Итак, перед вами – очень простое (легковесное), но элегантное решение начального экрана, добавленного поверх вашего сайта, а исчезает оно при прокрутке или когда пользователь щелкает по особому элементу. Не стесняйтесь использовать этот код и модифицировать его как вам угодно.
Как я уже упоминал вначале, эту технику можно применять любым количеством способов, так что дерзайте!
Автор: Harry Atkins
Источник: //www.webdesignerdepot.com/
Редакция: Команда webformyself.
