Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 17.02.2017, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Bandito,
специалиста надо по css, сделал как мог
Ответить с цитированием
  #12 (permalink)  
Старый 17.02.2017, 22:37
Интересующийся
Отправить личное сообщение для Bandito Посмотреть профиль Найти все сообщения от Bandito
 
Регистрация: 17.02.2017
Сообщений: 11

Сообщение от рони
специалиста надо по css, сделал как мог
Спасибо огромное за помощь.

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

Подождём других идей может все вместе справимся))))
Ответить с цитированием
  #13 (permalink)  
Старый 18.02.2017, 01:45
Интересующийся
Отправить личное сообщение для Bandito Посмотреть профиль Найти все сообщения от Bandito
 
Регистрация: 17.02.2017
Сообщений: 11

Других желающих нет помочь?))))))))))
Ответить с цитированием
  #14 (permalink)  
Старый 18.02.2017, 03:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Bandito,
Цитата:
Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.
Ответить с цитированием
  #15 (permalink)  
Старый 18.02.2017, 12:01
Интересующийся
Отправить личное сообщение для Bandito Посмотреть профиль Найти все сообщения от Bandito
 
Регистрация: 17.02.2017
Сообщений: 11

Сообщение от рони
Я где-то читал
О людях, что спят по ночам;
Ты можешь смеяться -
Клянусь, я читал это сам.
А Что мне не дал почитать?))))))) Хотя Странно такие как мы просыпаются именно ночью.)))))Я вообще по 20 часов в сутке перед компом работаю и практика показала все "прекрасные мысли" ко мне приходят именно ночью.Вот я и не сплю чтобы не упустить иx)))))
Ответить с цитированием
  #16 (permalink)  
Старый 18.02.2017, 14:20
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!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>
Ответить с цитированием
  #17 (permalink)  
Старый 18.02.2017, 20:15
Интересующийся
Отправить личное сообщение для Bandito Посмотреть профиль Найти все сообщения от Bandito
 
Регистрация: 17.02.2017
Сообщений: 11

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксированные блоки справа и слева только при вертикальной прокрутке Joannes Общие вопросы Javascript 4 07.09.2013 16:23
Фиксация div'a вверху страницы при прокрутке razorg1991 Элементы интерфейса 2 30.08.2013 22:13
Как при прокрутке страницы оставлять элемент на месте? FRIE jQuery 1 02.08.2012 20:54
При прокрутке страницы div залазит на футер. Как поправить? DonaldDrug jQuery 8 27.03.2012 02:15
Баг при прокрутке грида posta ExtJS 0 17.06.2011 14:18