Форум

cherrypashka · #1 (**permalink**) 07.06.2017, 11:02

Здравствуйте! Помогите, пожалуйста! Мне нужно организовать наезд одного блока на другой. Видимый блок на всю страницу, наезжающий блок должен выезжать с правой стороны. Мне нужна только "рыба".

ksa · #2 (**permalink**) 07.06.2017, 11:31

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

Видимый блок на всю страницу, наезжающий блок должен выезжать с правой стороны. Мне нужна только "рыба".

Может подойти обычная табличка из одной строки и двух колонок...
Т.к. уменьшая первую колонку, вторая будет кагбэ "появляться".

cherrypashka · #3 (**permalink**) 07.06.2017, 11:38

Мне нужно без таблицы! Спасибо!

j0hnik · #4 (**permalink**) 07.06.2017, 13:21

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style>
		*{
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
		}
		div{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			z-index: 1
		}
		.div1{
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			z-index: 2
			right: -100%;
			animation: naezd 3s;
			background-color: red;
			top:0;
		}
		@keyframes naezd {
			0% {right: -100%;}
			100% {right: 0;}
		}
	</style>
</head>
<body>
	<div>
		<div class="div1"></div>
	</div>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
	<script>
	</script>
</body>
</html>

Если я правильно понял

cherrypashka · #5 (**permalink**) 07.06.2017, 13:53

Супер! Всё правильно поняли! Спасибо! Только не пойму, зачем нужен закомментированный и пустой скрипт?

j0hnik · #6 (**permalink**) 07.06.2017, 13:56

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

Супер! Всё правильно поняли! Спасибо! Только не пойму, зачем нужен закомментированный и пустой скрипт?

ну нужен, можете удалить эти строки.

cherrypashka · #7 (**permalink**) 07.06.2017, 13:59

Так, а если мне это нужно делать при нажатии на элемент, тогда animation: naezd 3s; добавлять в свойства элемента при нажатии?

j0hnik · #8 (**permalink**) 07.06.2017, 14:07

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

Так, а если мне это нужно делать при нажатии на элемент, тогда animation: naezd 3s; добавлять в свойства элемента при нажатии?

в animation: никак, на какой элемент нажимать хотите?

cherrypashka · #9 (**permalink**) 07.06.2017, 14:18

j0hnik · #10 (**permalink**) 07.06.2017, 14:30

тогда так

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
		.div1{
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;
			right: -100%;
			background-color: red;
			transition: 3s;
			top:0;
		}
		.animate{
			right: 0;
		}
	</style>
</head>
<body>
	<div id="id">
		<div class="div1"></div>
	</div>
<script>
	document.getElementById('id').onclick = function(){
		document.querySelector(".div1").classList.add("animate");
	}
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript