Шоу прокрутки (Часть 1 HTML + CSS)

Шоу прокрутки (Часть 1 - HTML + CSS)

В этом уроке мы рассмотрим не совсем параллакс. Но многие называют это так, потому что это довольно близко.

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

Часто эти эффекты параллакса связаны с отображением элемента. Отсюда возникает путаница с тем, что я покажу вам с параллаксом.

В истинном параллаксе элемент начал бы немного подавать, когда он едва входит в область просмотра. И когда он полностью в нем, он будет виден на 100%..

Здесь мы сделаем это, как только элемент начнет отображаться и будет анимирован.

Состав

Структура каждого сайта выражается его HTML-кодом. html, head, title, body Я не буду их описывать. Я ожидаю, что ты справишься с ними.

Начнем с нескольких разных разделов:

вступление

section class = "intro">
h1 class = "intro__title"> Lorem ipsum dolor./h1>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Quibusdam odio obcaecati praesentium corporis voluptate nisi vero quae ipsa deleniti impedit. Voluptatem fugiat aperiam nulla, saepe esse et ut, dicta quae, quam dolores, labouriosam nostrum molestiae dolor. Debitis acceptnda, quasi nostrum./p>
/ раздел>

Включаем заголовок и абзац.

Средства массовой информации

раздел class = "media">
img src = "clouds.jpg" width = "1800" height = "400" alt = "Облака" />
/ раздел>

Продолжаем картинкой.

Функции

section class = "features">
h2 class = "Feature__title"> Lorem ipsum dolor sit amet./h2>
div class = "features__list">
div class = "feature__item">
h3 class = "item__title"> Lorem ipsum dolor./h3>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Синт, ipsum./p>
div class = "item__action">
p> a class = "btn" href = "#"> Подробнее / a> / p>
/ div>
/ div>
div class = "feature__item">
h3 class = "item__title"> Lorem ipsum dolor./h3>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Кончи, корпорис! / P>
div class = "item__action">
p> a class = "btn" href = "#"> Подробнее / a> / p>
/ div>
/ div>
div class = "feature__item">
h3 class = "item__title"> Lorem ipsum dolor./h3>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Поссимус, солюта. / П>
div class = "item__action">
p> a class = "btn" href = "#"> Подробнее / a> / p>
/ div>
/ div>
/ div>
/ раздел>

Читать также:  Бандлеры

Допустим, на сайте будут рассказываться о некоторых функциях / преимуществах того, что мы представляем, которые мы позже сформируем в виде 3 столбцов..

Столбцы

Поскольку мы начнем со столбцов, давайте добавим контент, который мы разделим на 2. Ожидается, что это будет простой текст, поэтому мы не будем добавлять много специальных стилей позже..

Перед этим разделом Media можно скопировать еще раз, чтобы на сайте было больше изображений, а затем:

section class = "columns">
h2 class = "columns__title"> Lorem ipsum dolor sit amet, conctetur adipisicing elit./h2>
div class = "columns__list">
div class = "column__item">
h3 class = "item__title"> Lorem ipsum dolor sit amet./h3>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Veritatis porro velit magnam needitatibus voluptas facere perspiciatis pariatur. Tempora Laborum, fugiat quas, voluptatem perspiciatis dolorum maiores obcaecati, temporibus modi unde totam ./p>
/ div>
div class = "column__item">
h3 class = "item__title"> Lorem ipsum dolor sit amet./h3>
Lorem ipsum dolor sit amet, conctetur adipisicing elit. Veritatis porro velit magnam needitatibus voluptas facere perspiciatis pariatur. Tempora Laborum, fugiat quas, voluptatem perspiciatis dolorum maiores obcaecati, temporibus modi unde totam ./p>
/ div>
/ div>
/ раздел>

Галерея

И напоследок поставим галерею, для которой я напоследок покажу вам интересный эффект:

section class = "gallery">
ul class = "gallery__list">
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-01.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-02.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-03.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-04.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-05.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-06.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-07.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-08.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-09.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-10.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-11.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-12.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-13.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-14.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-15.jpg" alt = "cloud" />
/ li>
li class = "gallery__item">
img width = "420" height = "420" src = "gallery-16.jpg" alt = "cloud" />
/ li>
/ ul>
/ раздел>

Читать также:  Начало работы с PHP часть 2

Стили

Что такое чистый HTML без стилей!

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

вступление

Здесь в целом я буду полагаться на базовые глобальные стили, которые я установлю следующим образом:

* {маржа: 0; отступ: 0; } html, body {width: 100%; высота: 100%; }
тело {фон: # E0E0E0; цвет: # 333; шрифт: обычный 18px / 1.35 Arial, Helvetica, без засечек; }
x1, x2, x3, x4, x5, x6 {padding-bottom: 1em; }
р {маржа-дно: 1em; } a {цвет: # 306; } a: hover, a: focus {цвет: # 069; }
раздел {отступ: 5%; выравнивание текста: центр; }

Ничего особенного. Если у кого-то остались вопросы — не стесняйтесь писать комментарии в уроке и я дам дополнительные пояснения..

Средства массовой информации

Здесь код еще более простой:

.media {padding: 0; размер шрифта: 0; } .media img {width: 100%; высота: авто; }

Я использую font-size: 0, чтобы убедиться, что у меня нет пустого места под фотографией, но перед концом контейнера, который его содержит..

Обычно это получается из-за высоты строки. Потому что есть буквы, которые идут ниже базовой линии. В кириллице это д, р, у, ц, щ, а в рукописях есть другие с плетками внизу. Из-за этих букв внизу есть место. Фото выравнивается с основными, под ним остается пространство..

С font-size: 0 (возможно, line-heigh: 0) он не останется таким, потому что размер шрифта равен 0.

Читать также:  Глубокие ссылки Часть 2

Однако его уместно использовать только в том случае, если в контейнере одна фотография и больше ничего..

Функции

.особенности {фон: #FFF; } .features__list {display: flex; максимальная ширина: 1280 пикселей; маржа: 0 авто; } .feature__item {маржа: 0 1em; заполнение: 1em; box-shadow: 3px 3px 6px rgba (0, 0, 0, 0,3), 2px 2px 12px rgba (0, 0, 0, 0,1); }

То, о чем я не говорил в предыдущих уроках, — это display: flex. Обычно этому нужно уделять много внимания, так что, возможно, я скоро сделаю новую серию руководств..

На данный момент я могу только рекомендовать вам просмотреть эту статью на английском языке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Для кнопок я подготовил следующий вспомогательный класс:

.btn {padding: 0.5em 1.5em; фон: # 306; цвет: #FFF; радиус границы: 0,5 м; текстовое оформление: нет; } .btn: hover, .btn: focus {background: # 069; цвет: #FFF; }

Столбцы

.столбцы {} .columns__list {display: flex; выравнивание текста: слева; } .column__item {padding: 1em 2em; }

Опять же, это довольно просто, если вы знаете, что делает display: flex..

Галерея

.галерея {фон: #FFF; размер шрифта: 0; } .gallery__list {display: flex; flex-flow: перенос строк; justify-content: пробел между; тип-стиль-список: нет; } .gallery__item {дисплей: встроенный блок; ширина: calc (25% — 40 пикселей); flex: 1 0 calc (25% — 40 пикселей); маржа: 20 пикселей; } .gallery__item img {ширина: 100%; высота: авто; }

Здесь есть немного больше гибкости, а также calc (). Последний используется, когда вы хотите вычислить значение в смешанных разных единицах).

В этом случае я хочу иметь отступ между элементами в галерее в 20 пикселей..

Кроме того, я хочу иметь 4 элемента в строке (4 столбца).

Я выставил ширину 25%, но нужно учитывать запас.

Один из способов — использовать padding и box-sizing: border-box;, но мне больше нравится маржа. И я хочу продемонстрировать calc ().

Поскольку поле установлено на 20 пикселей со всех сторон, это означает, что в общей сложности вокруг каждого изображения будет расстояние 40 пикселей (20 пикселей слева и 20 пикселей справа)..

Итак, из тех 20%, которые помещены в столбец, мы должны вычесть 40 пикселей. И это становится: width: calc (25% — 40px).

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?