Форум

рони · #11 (**permalink**) 17.02.2017, 22:30

Bandito,
специалиста надо по css, сделал как мог

Bandito · #12 (**permalink**) 17.02.2017, 22:37

Сообщение от рони

специалиста надо по css, сделал как мог

Спасибо огромное за помощь.

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

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

Bandito · #13 (**permalink**) 18.02.2017, 01:45

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

рони · #14 (**permalink**) 18.02.2017, 03:38

Bandito,

Цитата:

Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.

Bandito · #15 (**permalink**) 18.02.2017, 12:01

Сообщение от рони

Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.

А Что мне не дал почитать?))))))) Хотя Странно такие как мы просыпаются именно ночью.)))))Я вообще по 20 часов в сутке перед компом работаю и практика показала все "прекрасные мысли" ко мне приходят именно ночью.Вот я и не сплю чтобы не упустить иx)))))

Malleys · #16 (**permalink**) 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 · #17 (**permalink**) 18.02.2017, 20:15

Сообщение от Malleys

Malleys

Сообщение от рони

рони

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

Форум

Справочник

Discord чат

Курсы javascript