Показване при скрол (част 1 – HTML + CSS)
Това, което ще разгледаме в този урок не е точно parallax. Но много хора го наричат така, тъй като е доста близко.
Съществува тип parallax ефекти, при които триизмерността идва от различни анимации, които се случват на scroll. В предния пример имахме просто статични изображения, но не и реално преместване на елемент.
Често пъти тези паралакс ефекти са свързани с показване на елемент. От там идва и бъркането на това, което ще ви покажа с паралакс.
При истински паралакс един елемент би почнал леко да се подава, когато едва влезе във viewport-а. А когато е изцяло в него би бил 100% видим.
Тук ще направим така, че в момента, в който елементът почне да се показва и ще се анимира.
Структура
Структурата на всеки сайт се изразява с неговия HTML код. <html>, <head>, <title>, <body> няма да ги описвам. Очаквам от вас да можете да боравите с тях.
Нека започнем направо с няколко различни секции:
Intro
<section class="intro">
<h1 class="intro__title">Lorem ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet, consectetur 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 laboriosam nostrum molestiae dolor. Debitis assumenda, quasi nostrum.</p>
</section>Включваме заглавие и някакъв параграф.
Media
<section class="media">
<img src="clouds.jpg" width="1800" height="400" alt="Clouds" />
</section>Продължаваме с картинка.
Features
<section class="features">
<h2 class="featured__title">Lorem ipsum dolor sit amet.</h2>
<div class="features__list">
<div class="feature__item">
<h3 class="item__title">Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, ipsum.</p>
<div class="item__action">
<p><a class="btn" href="#">Read More</a></p>
</div>
</div>
<div class="feature__item">
<h3 class="item__title">Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, corporis!</p>
<div class="item__action">
<p><a class="btn" href="#">Read More</a></p>
</div>
</div>
<div class="feature__item">
<h3 class="item__title">Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, soluta.</p>
<div class="item__action">
<p><a class="btn" href="#">Read More</a></p>
</div>
</div>
</div>
</section>Да речем, че на сайта ще се говори за някакви особености / ползи от това, което представяме, които в последствие ще оформим като 3 колони.
Columns
Като сме тръгнали с колони, нека добавим съдържание, което ще сме разделили на 2. Очаква се да е обикновен текст, така че по-късно няма да добавяме много специални стилове.
Преди тази секция може да се копира още веднъж Media, за да имаме повече картинки на сайта, а след това:
<section class="columns">
<h2 class="columns__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<div class="columns__list">
<div class="column__item">
<h3 class="item__title">Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis porro velit magnam necessitatibus 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis porro velit magnam necessitatibus voluptas facere perspiciatis pariatur. Tempora laborum, fugiat quas, voluptatem perspiciatis dolorum maiores obcaecati, temporibus modi unde totam.</p>
</div>
</div>
</section>Gallery
И за финал неща сложим една галерия, за която накрая ще ви покажа интересен ефект:
<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>
</section>Стилове
Какво е един гол HTML без стилове!
И тук няма да се впускам в излишни подробности, тъй като не това е основната цел на урока. Но все пак ще кажа няколко думи:
Intro
Тук в общи линии ще разчитам на основни глобални стилове, които ще задам така:
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { background: #E0E0E0; color: #333; font: normal 18px/1.35 Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { padding-bottom: 1em; }
p { margin-bottom: 1em; }
a { color: #306; }
a:hover, a:focus { color: #069; }
section { padding: 5%; text-align: center; }Няма нищо особено. Ако все пак някой има въпроси – не се колебайте да пишете после коментари в урока и ще дам допълнителни разяснения.
Media
Тук кодът е още по-елементарен:
.media { padding: 0; font-size: 0; }
.media img { width: 100%; height: auto; }Използвам font-size: 0, за да се уверя, че няма да имам празно място под снимката, но преди края на контейнера, който я съдържа.
По принцип се получава заради line-height-а. Тъй като има букви, които излизат под baseline-а. В кирилица това са д, р, у, ц, щ, а при ръкописните има и други с камшичета отдолу. Заради тези букви остава място отдолу. Снимката е подравнена с основните и под нея остава място.
При font-size: 0 (може и line-heigh: 0) няма да остане такова, тъй като големината на буквите е 0.
Уместно е обаче да се ползва само, ако в контейнер има една снимка и нищо друго.
Features
.features { background: #FFF; }
.features__list { display: flex; max-width: 1280px; margin: 0 auto; }
.feature__item { margin: 0 1em; padding: 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/.
За бутоните съм си подготвил и следния helper class:
.btn { padding: 0.5em 1.5em; background: #306; color: #FFF; border-radius: 0.5em; text-decoration: none; }
.btn:hover, .btn:focus { background: #069; color: #FFF; }Columns
.columns {}
.columns__list { display: flex; text-align: left; }
.column__item { padding: 1em 2em; }Отново е доста простичко, стига да знаете какво прави display: flex.
Gallery
.gallery { background: #FFF; font-size: 0; }
.gallery__list { display: flex; flex-flow: row wrap; justify-content: space-between; list-style-type: none; }
.gallery__item { display: inline-block; width: calc(25% - 40px); flex: 1 0 calc(25% - 40px); margin: 20px; }
.gallery__item img { width: 100%; height: auto; }Тук има малко повече flex, както и calc(). Последното се използва когато искате да калкулирате стойност в смесени различни мерни единици).
В случая искам да имам разстояние (margin) между елементите от галерията по 20px.
Освен това искам да имам по 4 елемента на ред (4 колони).
Задавам широчината като 25%, но трябва да се отчете margin-а.
Единият начин щеше да бъде да ползвам padding и box-sizing: border-box;, но на мене ми харесва повече с margin. А и искам да демонстрирам calc().
Тъй като margin-а е зададен като 20px от всички страни, това означава, че около всяка картинка ще има по общо 40px разстояние (20px отляво и 20px отдясно).
Така от тия 20%, които се полагат на колона трябва да извадим 40px. И става: width: calc(25% - 40px).