Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подтягивание блоков при прокрутке (https://javascript.ru/forum/dom-window/67444-podtyagivanie-blokov-pri-prokrutke.html)

Bandito 17.02.2017 20:26
Подтягивание блоков при прокрутке
 
Приветствую! нужна помощь.

Bandito 17.02.2017 22:08
Видимо тут мастера не часто появляются или же моя задача слишком сложная)))))))).

рони 17.02.2017 22:08
Bandito,
мысли вслух ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    display: flex;
     flex-wrap: wrap;
     position: relative;
  }
body > div{
    position:  relative;
    width: 16.45%;
    box-sizing: border-box;
    height: 1200px;
    transition: all 3.8 ease-in-out;
    display: flex;
    flex-direction: column;
  }
 body > div > div{
   flex : 1;
 }
 body > div > div:nth-child(2n+1){ box-sizing: border-box;
   background-color:  #FFFFFF;
   border: 1px solid  #000000;
 }
 body > div > div:nth-child(2n){ box-sizing: border-box;
   background-color:  #000000;
   border: 1px solid  #FFFFFF;
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var scroll = 0 ;


$(window).scroll(function() {
var s = $(window).scrollTop(), n = s > scroll;
scroll=s;
$("body div:nth-child(1),body div:nth-child(6)").stop(true,true).css({"top" : (n? "80" :"-80")+"px"})
.delay(600).animate({"top": 0},800)
$("body div:nth-child(2),body div:nth-child(5)").stop(true,true).css({"top" : (n? "50" :"-50")+"px"})
.delay(300).animate({"top": 0},800)

})
});
  </script>
</head>

<body>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Bandito 17.02.2017 22:16
Цитата:
Сообщение от рони
рони
Спасибо но это не то. примерно так я уже сам сделал .
обратите внимание в прототипе при разной скорости прокрутки margin-top меняется в зависимости от скорости прокрутки.

Bandito 17.02.2017 22:18
и еще при прокрутке вверх блоки сползают вниз а при прокрутки вниз блоки сползают вверх

рони 17.02.2017 22:20
Цитата:
Сообщение от Bandito
и еще при прокрутке вверх блоки сползают вниз а при прокрутки вниз блоки сползают вверх
добавил

Bandito 17.02.2017 22:21
вот описание как то так

рони 17.02.2017 22:25
Bandito,
других вариантов пока нет.

Bandito 17.02.2017 22:26
Цитата:
Сообщение от рони
добавил
что то глючит
вроде сам мастер но застрял на этом мелком задаче уже весь мозг вынес))))
спасибо тебя что помогаешь

Bandito 17.02.2017 22:28
Цитата:
Сообщение от рони
других вариантов пока нет.
при прокрутки вниз подпрыгивают блоки по середине

рони 17.02.2017 22:30
Bandito,
специалиста надо по css, сделал как мог :)

Bandito 17.02.2017 22:37
Цитата:
Сообщение от рони
специалиста надо по css, сделал как мог
Спасибо огромное за помощь.

я со вчерашнего дня сделал вариантов 10 вроде все работают но в каждом варианте чего то не хватает. вот и подумал обратиться за помощью к коллегам.))) я и в css не плохо разбираюсь но не как не смог воссоздать эффект.

Подождём других идей может все вместе справимся))))

Bandito 18.02.2017 01:45
Других желающих нет помочь?))))))))))

рони 18.02.2017 03:38
Bandito,
Цитата:
Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.
:)

Bandito 18.02.2017 12:01
Цитата:
Сообщение от рони
Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.
А Что мне не дал почитать?))))))) Хотя Странно такие как мы просыпаются именно ночью.)))))Я вообще по 20 часов в сутке перед компом работаю и практика показала все "прекрасные мысли" ко мне приходят именно ночью.Вот я и не сплю чтобы не упустить иx)))))

Malleys 18.02.2017 14:20 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
	<style>
		
		.blocks {
			max-width: 60em;
			width: 100%;
			height: 200em;
			display: flex;
			margin: 20em auto;
		}
		
		.block {
			background: linear-gradient(#f1f1f1 50%, #212121 0);
			background-size: 100% 20em;
			flex: auto;
			margin: .1em;
			will-change: transform;
		}
		
	</style>
		<div class="blocks">
			<div class="block" data-delay="6000"></div>
			<div class="block" data-delay="2000"></div>
			<div class="block" data-delay="4000"></div>
			<div class="block" data-delay="9000"></div>
		</div>
		<script>
			
			{
				let y0 = 0;
				let t0 = performance.now();
				let speed = 0;
				
				let blocks = document.querySelectorAll(".block");
				let delay = Symbol.for("delay");
				
				for(let block of blocks)
					block[delay] = +block.dataset.delay || 1000;

				let render =  () => {
					let y = document.body.scrollTop;
					let t = performance.now();

					let dy = y - y0;
					let dt = t - t0;
					
					if(dt < 16) return;

					y0 = y;
					t0 = t;
					
					speed = .9 * speed - 0.000405 * dy / dt;

					for(let block of blocks) {
						block.style.transform = `translateY(${(-speed * block[delay]).toFixed(4)}px)`;
					}
				};
				
				let main = () => {
					render();
					
					requestAnimationFrame(main);
				};
				
				main();
			}
			
		</script>
	</body>
</html>

Bandito 18.02.2017 20:15
Цитата:
Сообщение от Malleys
Malleys
Цитата:
Сообщение от рони
рони
Спасибо Вам!
под утро голова заработало сам разобрался.
вопрос решен.
хотя оба ваши варианты тоже рабочие сразу чувствуется профессионализм. Удачи вам парни.И спасибо еще раз


Часовой пояс GMT +3, время: 17:30.