Як зробити прокручиваемую сплеш заставку з допомогою CSS3 і jQuery

14

Від автора: Відмінний спосіб привернути увагу відвідувача свого веб-сайту – це «сплеш-заставка». Однак зробити його вдало – дуже непросте завдання з однієї простої причини: сплеш-заставки легко дратують користувачів.

Сплеш-заставка працює добре, якщо швидко з’являється і легко забирається. Такий екран може бути візуально яскравим і красивим і викликати у користувача бажання прокрутити його і подивитися далі. Початкові екрани такого типу дуже добре працюють на односторінкових прокручувати веб-сайтах. Або у веб-дизайні «банерного стилю», який увійшов у моду разом з трендом «плоского» дизайну. Він також може бути корисний для добре виглядає стилю «фонового відео» початкової сторінки, який зараз теж є останнім писком моди.

Сьогодні я хочу продемонструвати вам базовий спосіб домогтися такого ефекту, який ви зможете легко модифікувати і робити гарні початкові сторінки, надаючи цим вплив на враження користувача.

Якщо хочете побачити те, що ми будуємо, то ось демопример. А тут можна скачати всі вихідні файли.

Розмітка

Ми постараємося зробити розмітку дуже простий. Таким чином, вона зможе застосовуватися як до вже існуючих сайтів, так і до нових проектів.

Загалом, нам потрібно створити два div а. Один з класом splash і другий з класом wrapper. (Клас wrapper може вже існувати, якщо ви застосовуєте цей метод до наявного веб-сайту, тому вам, можливо, доведеться змінити ім’я цього класу).

Власне, ось і все, що потрібно для семантики. Але, природно, ми додамо якийсь фіктивний контент і заголовки для того, щоб в демопримере можна було на щось подивитися. Нам також знадобиться додати на екран заставку стрілку-покажчик, яка покаже користувачу, що його можна прокрутити (так як це і є спосіб прибрати початковий екран і показати основний вміст). Так що ось вам проста розмітка, вся вона знаходиться всередині тега body:

SPLASH SCREEN TITLE

Як зробити прокручиваемую сплеш заставку з допомогою CSS3 і jQuery

Page Title

  • Home
  • About
  • Work
  • Contact

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

© 2013 — Splash Screen

Отже, давайте поясню трохи детальніше, що тут відбувається: ми починаємо з div а splash. Всередині нього знаходиться заголовок і індикатор прокручування (який тут показаний у вигляді зображення стрілочки, але, природно, може виявитися чим завгодно). Потім ми закриваємо цей div і відкриваємо інший, з класом wrapper. Всередині нього знаходиться вихідне вміст сайту, яке для кожного випадку буде різним, а у нас тут воно дуже просте: заголовок, деяка навігація, область основного вмісту і нижній колонтитул. Потім додається jQuery з Google API, так як ми будемо використовувати його функціональність, і, нарешті, робиться посилання на інший файл .js – свій власний – де ми напишемо код jQuery.

Ви, може, помітили в області заставки ім’я класу fade-in. Ми застосуємо цей клас для того, щоб додати до деяких елементів красиву анімацію CSS3 і зробити початковий екран більш потужним. Природно, якщо подивитися на результати зараз, то насправді там поки що нічого немає, нам ще потрібно призначити стилі. До речі про стилях, давайте перейдемо до CSS…

Стилі

Давайте постараємося зробити стилі простими і зручними. Всі вони – простий CSS. Почнемо з імені класу .fade-in. (Його потрібно заявити угорі нашого файлу CSS для того, щоб далі можна було оголосити різний час затримки анімації інших елементів.

@-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.3 s;
-moz-animation-duration:0.3 s;
animation-duration:0.3 s;
-webkit-animation-delay: 0.5 s;
-moz-animation-delay: 0.5 s;
animation-delay: 0.5 s;
}

Спочатку заявляємо keyframes і викликаємо анімацію fadeIn. Непрозорість варіюється від 0 до 1. Потім безпосередньо вибираємо ім’я класу, визначаємо його непрозорість дорівнює 0 і викликаємо до визначеної нами анімації, призначаючи їй тривалість 0,3 сек. і затримку в 0,5 сек.

Тепер розглянемо CSS, необхідний для заставки:

.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, який в основному лише поміщає в потрібне місце заголовок, доповнює екран красивою стрілкою, спрямованою вниз для позначення того, що користувачеві потрібно зробити прокручування. І, нарешті, ось деякі основні стилі сторінки і кілька медиазапросов:

html, body {
width: 100%;
height: 100%;
}
body { font: normal 1em/1.5 em ‘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: 2px 0 10px #000;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
a.splash-arrow {
color: white;
font-size: 1.2 em;
position: absolute;
bottom: 55px;
left: 50%;
margin-left: -25px;
padding: 10px;
width: 50px;
height: 50px;
font-weight: bold;
-webkit-transition: all 0.1 s ease;
-moz-transition: all 0.1 s ease;
-o-transition: all 0.1 s ease;
transition: all 0.1 s ease;
-webkit-animation-delay: 1.5 s;
-moz-animation-delay: 1.5 s;
animation-delay: 1.5 s;
border: 3px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
a.splash-arrow:hover {
text-decoration: none;
bottom: 50px;
}
@all media 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;}
}
@all media and (max-width: 480px) {
.splash-title {font-size: 1.5 em;}
}

Отже, у нас тут є кілька основних стилів body, деякий відступ від заголовка верху, де ми затримуємо посилення анімації ще на півсекунди. Тому у неї є своє власне появу. Посилання-стрілка позиціонована абсолютно для того, щоб завжди перебувати посередині і знизу екрану. Її затримка остаточного появи на екрані – ще півсекунди. Додаємо кілька переходів CSS3 для того, щоб анімувати її розташування за стан проведення мишею :hover. Нарешті, трохи змінюємо медиазапросы, щоб на маленьких екранах вона виглядала ще краще. Але, звичайно, ці стилі будуть змінюватися в залежності від вашого дизайну.

jQuery

Як про це вже говорилося раніше, ми збираємося зробити файл з ім’ям main.js в директорії js. Всередині нього напишемо свій код jQuery, який змусить екран заставки зникати при прокрутці або клацнути по посиланню-стрілкою. Ось він:

$(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»);, яка не дає вікна справді прокручуватися тоді, коли нам це не потрібно. При першій прокрутці користувача нам потрібно всього лише викликати анімацію, а не прокрутити сторінку насправді. Але як тільки забереться заставка, сторінка стане прокручуватися нормально.

Висновок

Отже, перед вами – дуже просте (легковажне), але елегантне рішення початкового екрану, доданого поверх вашого сайту, а воно зникає при прокрутці або коли користувач клацає по особливому елементу. Не соромтеся використовувати цей код і модифікувати його як вам завгодно.

Як я вже згадував на початку, цю техніку можна застосовувати будь-якою кількістю способів, так що дерзайте!