Показать сообщение отдельно
  #2 (permalink)  
Старый 12.05.2019, 01:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вы можете использовать sessionStorage, и запоминать, когда впервые зашёл пользователь...

<style>
	.hide_block1 {
		overflow: hidden;
		animation: showDiv 4s forwards;
	}

	.hide_block2 {
		overflow: hidden;
		animation: showDiv 14s forwards;
	}

	.hide_block3 {
		overflow: hidden;
		animation: showDiv 25s forwards;
	}


	.hide_block4 {
		overflow: hidden;
		animation: showDiv 33s forwards;
	}


	.hide_block5 {
		overflow: hidden;
		animation: showDiv 42s forwards;
	}

	@keyframes showDiv {

		0%, 99% {
			height: 0px;
		}

		100% {
			height: 100%;
		}
	}

</style>

<style id="customStyleSheet"></style>

<style>
	#slider {
		width: 100px;
		height: 100px;
		margin: 0px auto;
	}

	#slider > img {
		position: absolute;
		transition: 1s;
		background-color: black;
	}

</style>

<section id="slider">
	<img id="one">
	<img id="two">
</section>

<section>
	<div class="hide_block1">Текст 1</div>
	<div class="hide_block2">Текст 2</div>
	<div class="hide_block3">Текст 3</div>
	<div class="hide_block4">Текст 4</div>
	<div class="hide_block5">Текст 5</div>
</section>

<script>
	var startDate;

	if("startDate" in sessionStorage) {
		startDate = Number(sessionStorage.startDate);
	} else {
		startDate = Date.now();
		sessionStorage.startDate = startDate.toString();
	}

	customStyleSheet.textContent = `
		[class*=hide_block] {
			animation-delay: -${Date.now() - startDate}ms;
		}
	`;

	function viewImages({ img, speed }) {
		var i = Math.floor((Date.now() - startDate) / 1000);

		(function changeImg() {
			one.src = img[clamp(i % 2 === 0 ? i     : i - 1)];
			two.src = img[clamp(i % 2 === 0 ? i - 1 : i    )];
			two.style.opacity = i % 2;

			i++;
			if(img.length > i) setTimeout(changeImg, 1000 * speed);
		})();

		function clamp(x) {
			return x < 0 ? 0 : x >= img.length ? img.length - 1 : x;
		}
	}

	viewImages({
		img: [
			'https://pp.userapi.com/c849416/v849416811/13d2f8/zPAXn4wkdbs.jpg',
			'https://pp.userapi.com/c849416/v849416811/13d2f1/8i73jwgUPek.jpg',
			'https://pp.userapi.com/c849416/v849416811/13d2ea/mM6hEHXbOkY.jpg'
		],
		speed: 2
	});

</script>
Ответить с цитированием