Главная->Уроки по css->Эффект при прокрутке содержания
Эффект при прокрутке содержания
В данном уроке мы создадим эффект прокрутки содержания, который используется на новом сайте e-bay. Для примера построим одну адаптивную страницу для представления красоты и пользы лаванды (описания растения на английском языке). JavaScript не задействован - только CSS. Шаг 1 – Подготовка Нам нужно 3 фоновых изображения, которые будут растягиваться на всю страницу. Исходный размер - 1800px x 1200px. Шаг 2 – HTML Разметка чрезвычайно проста. Каждая часть содержания помещается в элемент div с классом “wrapper”. 01 <!DOCTYPE html> 02 <html class="no-js" lang="ru"> 03 <head> 04 <meta charset="utf-8"> 05 <title>Демострация</title> 06 ... 07 </head> 08 <body> 09 <header class=" content"> 10 <div class="wrapper"> 11 <h1>From love for lavender</h1> 12 <p><span>Lavender</span> (botanic name Lavandula) is a .... 13 </p> 14 </div> 15 </header> 16 17 <section class="content" id="oil"> 18 <div class="wrapper"> 19 <p><span>Lavender oil</span> is an ... </p> 20 </div> 21 </section> 22 ... 23 <footer> 24 <div class=wrapper> 25 "From love for lavender" has been built ... 26 </div> 27 </footer> 28 </body> 29 </html> Шаг 3 - Основной код CSS Класс контейнера определяется следующим образом. Свойство box-sizing позволяет изменить модель определения размеров элемента для CSS. По умолчанию используется content-box, в которой высота и ширина включает только содержание. Если установить модель border-box ,то высота и ширина будут также включать отступы и рамку. 1 .wrapper { 2 width: 100%; 3 margin: 0 auto; 4 -webkit-box-sizing: border-box; 5 -moz-box-sizing: border-box; 6 box-sizing: border-box; } Так как мы планируем сделать страницу адаптивной, то каждая секция и заголовок будут использовать единицы измерения в процентах. Например, фоновое изображение для первой секции имеет ширину 500px, которая представляет 500px/1200px x 100% = 41.66667% 1 #oil .wrapper { 2 background: url(../images/lavender2.jpg) 4.16667% center no-repeat; 3 padding: 10% 4.16667% 10% 50%; 4 background-size: 41.66667% auto;} Значение 4.16667% соответствует 50px, когда контейнер имеет максимальную ширину. Случаи использования больших мониторов будем обрабатывать с помощью медиа запросов: 1 @media only screen and (min-width: 1200px) { 2 .wrapper { 3 width:1200px; } 4 ........ 5 #oil .wrapper { 6 padding: 120px 50px 120px 600px; } Полный набор стилей вы найдете в исходниках. Шаг 4 - Эффект прокручивания Для нашего эффекта не используется JavaScript. Все реализуется на CSS. Так как избыточная разметка является нежелательным фактором, то будем применять псевдо-элементы :after. Они будут располагаться под каждой секцией и содержать фоновое изображение. Для фиксации воспользуемся свойством background-attachment. Также добавим легкую внутреннюю тень для имитации глубины. 01 section:after, header:after { 02 content: ""; 03 display: block; 04 height: 400px; 05 width: 100%; 06 background-size: cover; 07 background-position: center center; 08 background-repeat: no-repeat; 09 background-attachment: fixed; 10 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); } Для каждой секции назначаем свое фоновое изображение: 1 header:after { 2 background-image: url(../images/lavenderbg1.jpg); } 3 #oil:after { 4 background-image: url(../images/lavenderbg2.jpg); } 5 #culinary:after { 6 background-image: url(../images/lavenderbg3.jpg); } 7 #dried:after { 8 background-image: url(../images/lavenderbg4.jpg); } Шаг 5 - Завершающие штрихи Так как свойство background-attachment:fixed не поддерживается в мобильной версии Safari, добавляем следующий медиа запрос. 1 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) { 2 section:after, header:after { 3 background-attachment: scroll; } 4 } Также уменьшим шрифт для маленьких мониторов: 1 @media only screen and (max-width: 600px) { 2 body { 3 font-size: .75em; } 4 }
