18 июн 2018
Анимация шапки сайта при помощи CSS3 и JS
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Анимация шапки сайта при помощи CSS3 и JS

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Анимация шапки сайта при помощи CSS3 и JS

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



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

Шаг 1. HTML

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

<h1></h1>
<p><strong><em></em></strong></p>
<h2></h2>
<p><img src="изображение" alt="cherry blossoms"></p>
<p></p>
<blockquote>
<p></p>
</blockquote>
<p></p>
<h3></h3>
<p><em></p>


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

Шаг 2. CSS

Большую часть работы у нас будет выполнять CSS, мы попытались описать в коде, какой участок за что отвечает, чтобы вы имели представление о структуре:

getFont($f, $m)
"calc((%s + (((%s * %s) - %s)) - ((((%s * %s) - %s)) * (var(--scroll) / %s))) * 1rem)" % ($f $f $m $f $f $m $f $RATIO)

$title = 1.25
$titleFont = getFont($title, 1.25)
$sub = 1
$subFont = getFont($sub, 1.1)
$date = 0.65
$dateFont = getFont($date, 1.1)

h1
color $accent
font-size $titleFont
top 50vh

// Тайтлы
h2
color lighten($accent, 30%)
font-size $subFont
top "calc(50vh + %s)" % $titleFont

// Дата и автор
body > p:nth-of-type(1)
color lighten($accent, 35%)
font-size $dateFont
padding-top 10px
top "calc(50vh + %s + %s)" % ($titleFont $subFont)

@media(min-width 768px)
$title = 1.75
$titleFont = getFont($title, 2)
$sub = 1.2
$subFont = getFont($sub, 2)
$date = 0.65
$dateFont = getFont($date, 1.5)
h1
font-size $titleFont

// Субтитры
h2
font-size $subFont
top "calc(50vh + %s)" % $titleFont

// Дата и автор
body > p:nth-of-type(1)
font-size $dateFont
top "calc(50vh + %s + %s)" % ($titleFont $subFont)

h1
h2
body > p:nth-of-type(1)
position fixed
margin 0
z-index 5
left 50%
width 100vw
text-align left
padding-left 5vw
$calc = "calc((var(--scroll) / %s) * -45vh)" % $RATIO
transform translate(0, $calc) translate(-50%, -50%)

h2
body > p:nth-of-type(1)
$calcOpacity = "calc(1 - ((var(--scroll) / %s) * 1))" % $RATIO
$calcY = "calc((var(--scroll) / %s) * -45vh)" % $RATIO
left 5vw
padding-left 0
transform-origin left center
opacity $calcOpacity
transform translate(0, $calcY) translate(0, -50%) scale($calcOpacity)

blockquote
position relative
padding 1.25rem 0 1.25rem 1.25rem
margin 0
&:before
content ''
position absolute
top 0
left 0
bottom 0
width 4px
background lighten($accent, 45%)
p
padding 0

+ p
padding-top 0@media(min-width 768px)
h1
h2
body > p:nth-of-type(1)
left 50%
min-width 45vw
width calc((100 - var(--scroll)) * 1vw)
$calcX = "calc(((var(--scroll) / %s) * -45vw))" % $RATIO
$calcY = "calc(((var(--scroll) / %s) * 22.5vh) + ((var(--scroll) / %s) * %s))" % ($RATIO $RATIO getFont(3, 1))
$calcPostX = "calc((((%s - var(--scroll)) / %s)) * -50%)" % ($RATIO $RATIO)
text-align center
padding-left 0
opacity 1
transform translate($calcX, $calcY) translate($calcPostX, -50%)

body > p:nth-of-type(1)
&:after
// контент ''
background lighten($accent, 70%)
height 30px
width 30px
border-radius 5px
position fixed
top 120%
left 50%
$calcOpacity = "calc(1 - ((var(--scroll) / %s) * 1))" % $RATIO
opacity $calcOpacity
clip-path polygon(25% 0%, 25% 60%, 0% 60%, 50% 100%, 100% 60%, 75% 60%, 75% 0%)
-webkit-clip-path polygon(25% 0%, 25% 60%, 0% 60%, 50% 100%, 100% 60%, 75% 60%, 75% 0%)
transform translate(calc(-50% - 5vw), 0)
@media(min-width 768px)
transform translate(-50%, 0)

// Фоновое изображение
img
height calc((100 - var(--scroll)) * 1vh)
min-height 10vh
object-fit cover
width 100vw

@media(min-width 768px)
$calcBorder = "calc((var(--scroll) / %s) * 10px)" % $RATIO
border-radius $calcBorder
min-height 45vh
min-width 45vw
width calc((100 - var(--scroll)) * 1vw)

p:nth-of-type(2)
left 0
margin 0
padding 0
position fixed
top 0
z-index 4

@media(min-width 768px)
min-height 45vh
min-width 45vw
$calcX = "calc((var(--scroll) / %s) * 5vw)" % $RATIO
$calcY = "calc((var(--scroll) / %s) * 50vh)" % $RATIO
$calcPostY = "calc((var(--scroll) / %s) * -50%)" % $RATIO
transform translate($calcX, $calcY) translate(0, $calcPostY)
width calc((100 - var(--scroll)) * 1vw)

p:nth-of-type(2):before
p:nth-of-type(2):after
@media(min-width 768px)
$calcOpacity = "calc(1 - ((var(--scroll) / %s) * 1))" % $RATIO
opacity $calcOpacity

p:nth-of-type(2):before
background linear-gradient(0deg, white, rgba(250, 250, 250, 0.5))
bottom -2px
content ''
left 0
position absolute
right 0
top 0
z-index 2

p:nth-of-type(2):after
background linear-gradient(0deg, transparent, #fafafa)
content ''
height 10vh
left 0
position absolute
top 100%
width 100vw
z-index 2

@media(min-width 768px)
display none

// Создайте буфер прокрутки, чтобы изображение могло сначала переместиться
p:nth-of-type(3)
margin-top 100vh
@media(min-width 768px)
margin-top 120vh

body > p:last-of-type
margin-bottom 20vh

body
padding 5vw

@media (min-width 768px)
body > p
body > strong
body > blockquote
body > h3
body > ul
body > ol
margin-left 50vw
margin-right 0vw


Шаг 3. JS

Последний шагом, нам необходимо, чтобы вся наша конструкция работа при прокрутке скролла и действия проходили так как мы захотим, поможет нам следующие функции:

const ROOT = document.documentElement
const MIN = 10
const THRESHOLD = innerHeight * (1.2 - 0.225)
const update = (e) => {
const scroll = Math.floor(scrollY / innerHeight * 100)
if (scrollY > THRESHOLD) {
const progress = Math.floor(((scrollY - THRESHOLD) / (document.body.scrollHeight - innerHeight - THRESHOLD)) * 100)
ROOT.style.setProperty('--content', progress)
}
ROOT.style.setProperty('--scroll', Math.max(0, Math.min(scroll, 100 - MIN)))
}
window.addEventListener('scroll', update)


В результате у нас получился замечательная анимация шапки сайта при помощи CSS3 и JS.

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.