25.12.2019, 10:09
|
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 44
|
|
|
Анимация при прокрутке страницы
Честно гуглил, но не нашел нужного решения.
Сделал перемещение объекта при скролле:
$(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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
Timurkin,
может position: sticky
Липкое позиционирование тут
|
|
25.12.2019, 12:29
|
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 44
|
|
рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера?
Вот полный код:
<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, 25.12.2019 в 12:35.
|
|
25.12.2019, 12:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,070
|
|
|
Timurkin,
не могу помочь, слабо понимаю, что вы хотите сделать.
может, кто-то лучше знает css, подскажет.
|
|
25.12.2019, 14:16
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Timurkin
|
|
И картинка с классом 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>
|
|
25.12.2019, 14:28
|
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 44
|
|
|
Malleys,
Отлично, большое Вам спасибо!
Вы как раз сделали то что нужно!
Единственное, мне надо чтобы мишень при скролле вниз также опускалась вниз, а при скролле наверх поднималась наверх.
А сейчас наоборот)
P.S. И у меня ниже этих блоков пойдет другой контент сайта, а в текущем виде как я понимаю прокручиваться ниже контент не будет.
Последний раз редактировалось Timurkin, 25.12.2019 в 14:37.
|
|
25.12.2019, 14:39
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Timurkin
|
|
А сейчас наоборот)
|
<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, 25.12.2019 в 14:45.
|
|
25.12.2019, 14:46
|
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 44
|
|
|
Malleys,
Понял, отлично!
А как сделать, чтобы прокрутка шла дальше, с остальным контентом, который ниже этих блоков будет?
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно.
|
|
25.12.2019, 14:49
|
|
Аспирант
|
|
Регистрация: 12.08.2017
Сообщений: 44
|
|
|
|
|
25.12.2019, 15:09
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Timurkin
|
|
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно.
|
Посмотрел видео, но что-то я не понял... |
|
|
|
