Я новичок с Javascript, и у меня возникли проблемы с попыткой изменить размер созданного мной трехмерного карусельного меню.
Меню начинается с большого размера в центре экрана и я бы хотел, чтобы он уменьшился и переместился в верхний левый угол, когда я нажимаю на него, и когда я снова нажимаю на него, он увеличится и go вернется в исходное положение.
Прямо сейчас путь большое меню сжимается и перемещается в верхний левый угол, работает так, как я и хотел, однако оператор else внутри моей функции cellTransform () не выполняется, поэтому при повторном щелчке не возвращается в исходное состояние.
JS Fiddle: https://jsfiddle.net/jcou6gre/3/
Ниже мой код: HTML:
<html>
<head>
<title>carousel menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<script src="jquery-3.4.1.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="menu-wrapper">
<div class="menu">
<div class="carousel" id="carousel">
<!-- cell 1 -->
<div class="carousel-cell cell1" id="carousel-cell">
<div class="cell-text-wrapper">
<div class="cell-text">
Upload image
<br>
Save
<br>
Submit
</div>
</div>
</div>
<!-- cell 2 -->
<div class="carousel-cell cell2" id="carousel-cell">
<div class="cell-text-wrapper">
<div class="cell-text">
Gallery
</div>
</div>
</div>
<!-- cell 3 -->
<div class="carousel-cell cell3" id="carousel-cell">
<div class="cell-text-wrapper">
<div class="cell-text">
TIPS
</div>
</div>
</div>
<!-- cell 4 -->
<div class="carousel-cell cell4" id="carousel-cell">
<div class="cell-text-wrapper">
<div class="cell-text">
About
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="app.js"></script>
</body>
CSS:
.menu-wrapper {
width: 100vw;
height: 100vh;
position: absolute;
}
.menu {
width: 500px;
height: 300px;
position: relative;
perspective: 1000px;
left:30vw;
top:30vh;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 0.5s linear;
transform: rotateZ(-20deg) rotateY(25deg) rotateX(-30deg) ;
}
.carousel-cell {
position: absolute;
width: 500px;
height: 300px;
}
.cell-text-wrapper{
width: 100%;
height:100%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.cell-text{
font-size: 20px;
font-family: arial ;
}
.cell1 {
background-color: red;
opacity: 0.3;
transform: rotateY( 0deg) rotateX( 10deg) translateZ(250px);
}
.cell2 {
background-color: blue;
opacity: 0.3;
transform: rotateY( 90deg) translateZ(300px);
}
.cell3 {
background-color: green;
opacity: 0.3;
transform: rotateY( 180deg) rotateX( 10deg) translateZ(250px);
}
.cell4 {
background-color: yellow;
opacity: 0.3;
transform: rotateY(270deg) translateZ(300px);
}
JS:
// TOGGLE LARGE SMALL MENU
$(".menu").click(function() {
if ($(".carousel-cell").height() != 30) {
$(".carousel-cell").animate({
height: 30,
width: 50,
}, 1000);
$(".cell-text").animate({
fontSize: "10px"
}, 1000);
} else {
$(".carousel-cell").animate({
height: 300,
width: 500,
}, 1000);
$(".cell-text").animate({
fontSize: "20px"
}, 1000);
}
});
function cellTransform() {
var cell1 = document.querySelector(".cell1");
var cell2 = document.querySelector(".cell2");
var cell3 = document.querySelector(".cell3");
var cell4 = document.querySelector(".cell4");
if (cell1.style.transform != "translateZ(50px)") {
cell1.style.transition = "transform 1.0s linear 0s";
cell1.style.transform = "rotateY(0deg) rotateX(10deg) translateZ(50px)";
cell2.style.transition = "transform 1.0s linear 0s";
cell2.style.transform = "rotateY(90deg) translateZ(50px)";
cell3.style.transition = "transform 1.0s linear 0s";
cell3.style.transform = "rotateY(180deg) rotateX(10deg) translateZ(50px)";
cell4.style.transition = "transform 1.0s linear 0s";
cell4.style.transform = "rotateY(270deg) translateZ(50px)";
document.querySelector(".menu").style.transition = "all 1s ease-in 0s";
document.querySelector(".menu").style.left = "8vw";
document.querySelector(".menu").style.top = "10vh";
document.querySelector(".carousel").style.transition = "all 1s ease-in 0s";
document.querySelector(".carousel").style.width = "10%";
document.querySelector(".carousel").style.height = "10%";
} else if (cell2.style.transform == "translateZ(50px)") {
cell1.style.transition = "transform 2.5s ease-in 1s";
cell1.style.transform = "rotateY(0deg) rotateX(10deg) translateZ(250px)";
cell2.style.transition = "transform 2.5s ease-in 1s";
cell2.style.transform = "rotateY(90deg) translateZ(300px)";
cell3.style.transition = "transform 2.5s ease-in 1s";
cell3.style.transform = "rotateY(180deg) rotateX(10deg) translateZ(250px)";
cell4.style.transition = "transform 2.5s ease-in 1s";
cell4.style.transform = "rotateY(270deg) translateZ(300px)";
document.querySelector(".menu").style.transition = "all 1s ease-in 0s";
document.querySelector(".menu").style.left = "30vw";
document.querySelector(".menu").style.top = "30vh";
document.querySelector(".carousel").style.transition = "all 1s ease-in 0s";
document.querySelector(".carousel").style.width = "100%";
document.querySelector(".carousel").style.height = "100%";
}
}
document.querySelector(".menu").addEventListener("click", cellTransform, false);
Любая помощь приветствуется! Заранее спасибо!