Как при скролле сайта, когда дойду до нужного блока, реализовать плавное из центра до левого и правого края появление линии?
1 ответ
Вот простой пример, когда элемент (ваш блок) находится ровно по центру экрана, то ему добавляется еще один класс, для которого мы прописываем правило @keyframes
и устанавливаем ключевые кадры. Но это импровизация, потому что из вашего вопроса не совсем понятно, в какой момент должна происходить анимация, а также каким элементом должна являться эта линия.
$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.block').each(function() {
var self = $(this),
height = self.offset().top + self.height() / 2 - windowHeight / 2;
if ($(document).scrollTop() >= height) {
self.addClass('active');
}
});
});
});
.page {
position: relative;
height: 3000px;
}
.block {
position: absolute;
top: 50%;
margin-top: -100px;
left: 0;
width: 100%;
height: 100px;
background: chocolate;
line-height: 100px;
text-align: center;
color: white;
}
.active:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 100%;
background: black;
animation: 3s linear animate;
}
@keyframes animate {
0% {
left: 50%;
width: 10%;
}
100% {
left: 0%;
width: 100%;
}
}
h1 {
font-size: 20px;
text-align: center;
color: chocolate;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
<h1>Крутим вниз</h1>
<div class="block">Какой-то блок</div>
</div>
hover.css
- ianlunn.github.io/Hover - тут вроде как есть и нужный вам эффект - зайдите (когда скачаете) внутрь стилей и посмотрите как устроен нужный вам – Zhihar 20 янв в 20:32