Вход

Просмотр полной версии : Анимация при прокрутке страницы

Timurkin
25.12.2019, 10:09
Честно гуглил, но не нашел нужного решения.
Сделал перемещение объекта при скролле:

$(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, а чтобы он был привязан к скроллу- пока происходит скролл, объект движется вслед за этим скроллом(до определенного значения). При прокрутке вверх соотв-но он возвращается в свое исходное положение.
рони
25.12.2019, 10:50
Timurkin,
может position: sticky
Липкое позиционирование тут (https://developer.mozilla.org/ru/docs/Web/CSS/position)
Timurkin
25.12.2019, 12:29
рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера?
Вот полный код:
<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 должна перемещаться между фоном и верхней картинкой.
рони
25.12.2019, 12:57
Timurkin,
не могу помочь, слабо понимаю, что вы хотите сделать.
может, кто-то лучше знает css, подскажет.
Malleys
25.12.2019, 14:16
И картинка с классом mishen должна перемещаться между фоном и верхней картинкой. А что это значит? Какой именно вы хотите достигнуть эффект?

<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>
Timurkin
25.12.2019, 14:28
Malleys,
Отлично, большое Вам спасибо!
Вы как раз сделали то что нужно!
Единственное, мне надо чтобы мишень при скролле вниз также опускалась вниз, а при скролле наверх поднималась наверх.
А сейчас наоборот)
P.S. И у меня ниже этих блоков пойдет другой контент сайта, а в текущем виде как я понимаю прокручиваться ниже контент не будет.
Malleys
25.12.2019, 14:39
А сейчас наоборот)
<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% от высоты)
Timurkin
25.12.2019, 14:46
Malleys,
Понял, отлично!
А как сделать, чтобы прокрутка шла дальше, с остальным контентом, который ниже этих блоков будет?
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно.
Timurkin
25.12.2019, 14:49
Ссылка с коротким видео:
https://yadi.sk/i/X84K883KvAvWdQ
Malleys
25.12.2019, 15:09
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно. Посмотрел видео, но что-то я не понял...
Timurkin
25.12.2019, 15:22
Вот я залил на codepen:
https://codepen.io/timur-vinogradow/pen/vYEZZKm
Ниже добавил блоки с текстом.
Если убрать overflow: auto; для header-background, то начинает работать обычная прокрутка.
Но надо, чтобы мишень двигалась, так как она двигается со свойством overflow: auto;
Malleys
25.12.2019, 15:28
Но надо, чтобы мишень двигалась, так как она двигается со свойством overflow: auto;
Вы имеете в виду так... https://codepen.io/Malleys/pen/xxbrrvd?editors=0110 ?
Timurkin
25.12.2019, 15:55
Вы имеете в виду так... https://codepen.io/Malleys/pen/xxbrrvd?editors=0110 ?
Именно!
Еще раз, большое спасибо!
:)
Буду разбираться, как это работает:
var(--scroll-progress, 0) * 20vh), 0 0;
Я так понял что это переменная в CSS?
И она может принимать различные значения?
Malleys
25.12.2019, 16:19
Я так понял что это переменная в CSS?
Да, можно и так назвать, но на самом деле это собственные свойства, которые могут принимать любые значения. В будущем можно будет указывать их тип, что позволит их даже анимировать!

И она может принимать различные значения? Если вы не знакомы с возможностями, то можете посмотреть презентацию на эту тему с живыми примерами от Ли Веру на Ютюб — https://www.youtube.com/watch?v=UQRSaG1hQ20
Timurkin
25.12.2019, 21:12
Malleys,
Спасибо, ознакомлюсь!
Извините что опять дергаю вас, насчет этого:
https://codepen.io/Malleys/pen/xxbrrvd?editors=0110
При уменьшении высоты экрана браузера, картинка начинает также уменьшаться(масштабируетс на уменьшение).
Если фиксированную высоту делать то тогда ок, но это вроде как костыли получаются.
Malleys
25.12.2019, 21:23
Если фиксированную высоту делать то тогда ок, но это вроде как костыли получаются. Вы можете указать ограничение размера вместо.

При уменьшении высоты экрана браузера, картинка начинает также уменьшаться Вы можете указать высоту, менее которой картинка не должна уменьшаться... min-height: 250px;
Также вы можете указать высоту, более которой картинка не должна увеличиваться... max-height: 600px;
Timurkin
25.12.2019, 21:48
Malleys,
Разобрался, еще раз спасибо!!!