Блок наезжает на другой
Здравствуйте! Помогите, пожалуйста! Мне нужно организовать наезд одного блока на другой. Видимый блок на всю страницу, наезжающий блок должен выезжать с правой стороны. Мне нужна только "рыба".
|
Цитата:
Т.к. уменьшая первую колонку, вторая будет кагбэ "появляться". ;) |
Мне нужно без таблицы! Спасибо!
|
<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>
Если я правильно понял |
Супер! Всё правильно поняли! Спасибо! Только не пойму, зачем нужен закомментированный и пустой скрипт?
|
Цитата:
|
Так, а если мне это нужно делать при нажатии на элемент, тогда animation: naezd 3s; добавлять в свойства элемента при нажатии?
|
Цитата:
|
div
|
тогда так
<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>
|
| Часовой пояс GMT +3, время: 00:33. |