Анимация при прокрутке страницы
Честно гуглил, но не нашел нужного решения.
Сделал перемещение объекта при скролле:
$(window).scroll(function(){
if ($(this).scrollTop() > 50 ) {
$('.mishen').addClass('animate');
} else {
$('.mishen').removeClass('animate');
}
})
.animate {
top:5%;
transition: all .5s ease-in-out;
}
Все работает, но мне надо, чтобы объект .mishen двигался не при достижении скролла в 50px, а чтобы он был привязан к скроллу- пока происходит скролл, объект движется вслед за этим скроллом(до определенного значения). При прокрутке вверх соотв-но он возвращается в свое исходное положение. |
|
рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера? Вот полный код:
<title>Test</title>
<head>
<style>
body {
width: 100%;
height: 200vh;
border: none;
background: #eff0f4;
}
.header-background {
padding-bottom: 20px;
padding-top: 25px;
background: url(https://i.ibb.co/qjXcxM3/3.jpg)no-repeat 95%;
position: relative;
overflow: hidden;
height: 750px;
background-size: contain;
}
.header-background .back-baground {
position: absolute;
top: 0%;
width: 57%;
left: 41%;
z-index: 99;
}
.header-background .mishen {
max-width: 1100px;
left: 44%;
top: -1%;
transition: all .5s ease-in-out;
/*position: -webkit-sticky;
position: sticky;*/
position:absolute;
z-index: 1;
}
.animate {
top:5%!important;
transition: all .5s ease-in-out!important;
}
</style>
</head>
<body>
<section class="header-background">
<div><img src="https://i.ibb.co/DDWyFhR/1.png" class="back-baground">
<div><img src="https://i.ibb.co/ZgZFC9V/2.png" class="mishen"></div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 50 ) {
$('.mishen').addClass('animate');
} else {
$('.mishen').removeClass('animate');
}
})
</script>
</body>
P.S. У меня там верстка едет еще на некоторых разрешениях, пытаюсь сделать адаптивно: есть три слоя(нижний background и сверху две картинки). И картинка с классом mishen должна перемещаться между фоном и верхней картинкой. |
Timurkin,
не могу помочь, слабо понимаю, что вы хотите сделать. может, кто-то лучше знает css, подскажет. |
Цитата:
<style>
html, body {
width: 100%;
height: 100%;
overflow: auto;
background: #eff0f4;
margin: 0;
}
.header-background {
padding-bottom: 20px;
padding-top: 25px;
background: url(https://i.ibb.co/DDWyFhR/1.png), url(https://i.ibb.co/ZgZFC9V/2.png), url(https://i.ibb.co/qjXcxM3/3.jpg);
background-attachment: scroll, local, scroll;
background-size: auto 100%, auto 50%, auto 100%;
background-repeat: no-repeat;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
.header-background::before {
content: "";
height: 200%;
display: block;
}
</style>
<section class="header-background"></section>
|
Malleys,
Отлично, большое Вам спасибо! Вы как раз сделали то что нужно! Единственное, мне надо чтобы мишень при скролле вниз также опускалась вниз, а при скролле наверх поднималась наверх. А сейчас наоборот) P.S. И у меня ниже этих блоков пойдет другой контент сайта, а в текущем виде как я понимаю прокручиваться ниже контент не будет. |
Цитата:
<section class="header-background"></section>
<style>
html, body {
width: 100%;
height: 100%;
overflow: auto;
background: #eff0f4;
margin: 0;
}
.header-background {
padding-bottom: 20px;
padding-top: 25px;
background: url(https://i.ibb.co/DDWyFhR/1.png), url(https://i.ibb.co/ZgZFC9V/2.png), url(https://i.ibb.co/qjXcxM3/3.jpg);
background-size: auto 100%, auto 100%, auto 100%;
background-position: 0 0, 0 calc(-10vh + var(--scroll-progress, 0) * 20vh), 0 0;
background-repeat: no-repeat;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
.header-background::before {
content: "";
height: 200%;
display: block;
}
</style>
<script>
document.querySelector(".header-background").addEventListener("scroll", function(event) {
event.target.style.setProperty("--scroll-progress", event.target.scrollTop / (event.target.scrollHeight - event.target.offsetHeight));
});
</script>
Степень отклонения регулируется в строке №17 (в примере ±10% от высоты) |
Malleys,
Понял, отлично! А как сделать, чтобы прокрутка шла дальше, с остальным контентом, который ниже этих блоков будет? То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно. |
Ссылка с коротким видео:
https://yadi.sk/i/X84K883KvAvWdQ |
Цитата:
|
Вот я залил на codepen:
https://codepen.io/timur-vinogradow/pen/vYEZZKm Ниже добавил блоки с текстом. Если убрать overflow: auto; для header-background, то начинает работать обычная прокрутка. Но надо, чтобы мишень двигалась, так как она двигается со свойством overflow: auto; |
Цитата:
|
Цитата:
Еще раз, большое спасибо! :) Буду разбираться, как это работает: var(--scroll-progress, 0) * 20vh), 0 0; Я так понял что это переменная в CSS? И она может принимать различные значения? |
Цитата:
Цитата:
|
Malleys,
Спасибо, ознакомлюсь! Извините что опять дергаю вас, насчет этого: https://codepen.io/Malleys/pen/xxbrrvd?editors=0110 При уменьшении высоты экрана браузера, картинка начинает также уменьшаться(масштабируетс на уменьшение). Если фиксированную высоту делать то тогда ок, но это вроде как костыли получаются. |
Цитата:
Цитата:
min-height: 250px; Также вы можете указать высоту, более которой картинка не должна увеличиваться... max-height: 600px; |
Malleys,
Разобрался, еще раз спасибо!!! |
| Часовой пояс GMT +3, время: 07:34. |