Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2019, 09:09
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 35

Анимация при прокрутке страницы
Честно гуглил, но не нашел нужного решения.
Сделал перемещение объекта при скролле:
$(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, а чтобы он был привязан к скроллу- пока происходит скролл, объект движется вслед за этим скроллом(до определенного значения). При прокрутке вверх соотв-но он возвращается в свое исходное положение.
Ответить с цитированием
  #2 (permalink)  
Старый 25.12.2019, 09:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Timurkin,
может position: sticky
Липкое позиционирование тут
Ответить с цитированием
  #3 (permalink)  
Старый 25.12.2019, 11:29
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 35

рони , не знал про это свойство.
Я так понимаю что для его работы надо чтобы блок-обертка был бОльшего размера?
Вот полный код:
<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 в 11:35.
Ответить с цитированием
  #4 (permalink)  
Старый 25.12.2019, 11:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Timurkin,
не могу помочь, слабо понимаю, что вы хотите сделать.
может, кто-то лучше знает css, подскажет.
Ответить с цитированием
  #5 (permalink)  
Старый 25.12.2019, 13:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 25.12.2019, 13:28
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 35

Malleys,
Отлично, большое Вам спасибо!
Вы как раз сделали то что нужно!
Единственное, мне надо чтобы мишень при скролле вниз также опускалась вниз, а при скролле наверх поднималась наверх.
А сейчас наоборот)
P.S. И у меня ниже этих блоков пойдет другой контент сайта, а в текущем виде как я понимаю прокручиваться ниже контент не будет.

Последний раз редактировалось Timurkin, 25.12.2019 в 13:37.
Ответить с цитированием
  #7 (permalink)  
Старый 25.12.2019, 13:39
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от 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 в 13:45.
Ответить с цитированием
  #8 (permalink)  
Старый 25.12.2019, 13:46
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 35

Malleys,
Понял, отлично!
А как сделать, чтобы прокрутка шла дальше, с остальным контентом, который ниже этих блоков будет?
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно.
Ответить с цитированием
  #9 (permalink)  
Старый 25.12.2019, 13:49
Аспирант
Отправить личное сообщение для Timurkin Посмотреть профиль Найти все сообщения от Timurkin
 
Регистрация: 12.08.2017
Сообщений: 35

Ссылка с коротким видео:
https://yadi.sk/i/X84K883KvAvWdQ
Ответить с цитированием
  #10 (permalink)  
Старый 25.12.2019, 14:09
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,713

Сообщение от Timurkin
То есть сейчас фон блокируется при скролле, а надо чтобы скролл шел как обычно.
Посмотрел видео, но что-то я не понял...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление/исчезновение элемента при прокрутке страницы JQuery 0leg9 Общие вопросы Javascript 37 21.09.2017 07:41
Прилипающий sidebar дрожит при прокрутке carder Элементы интерфейса 1 24.10.2016 17:19
Прижимание блока при прокрутке страницы byFahrenheit Общие вопросы Javascript 2 14.01.2013 12:03
Фиксация объекта при скрулинге страницы Pashok(one) Общие вопросы Javascript 10 08.01.2013 00:52
Как при прокрутке страницы оставлять элемент на месте? FRIE jQuery 1 02.08.2012 19:54