-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
비디오 랜딩페이지 트리거 작동질문+ 슬라이드 화살표질문
21.04.24 17:00 작성 조회수 111
1
1. 슬라이드 하단버튼 누르면 이동하는데 css로 하단과(강의에 있죠!) 좌우에는 따로 어떻게 만드나요??
결론적으로는 하단ㄴ 눌러도 이동하고 좌우 눌러도 하나씩 이동하게 하려면요..!
2. 모달 나오는거까지 했었다가 안돼서 제이쿼리 지우고
하는데도 트리거 누르면 액티브 실행이 안되네요! 이유가 뭘까요..
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<video src="images/video-female.mp4" autoplay muted loop poster="images/placeholder-female.jpg"></video>
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="text">
<h1><em>Wave Ocean</em>The World's Ocean</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, nisi doloribus! Sapiente iste amet quidem tenetur! Facilis dolore accusamus cupiditate commodi, reprehenderit eius quisquam! Explicabo quibusdam, nihil eveniet laudantium, cum dicta, tenetur expedita voluptates iure in dolorem soluta! Itaque quidem soluta, eaque assumenda modi nulla obcaecati voluptatum quasi eveniet eius, ex aliquam possimus? Eaque culpa et quas aspernatur facere ipsum nemo doloremque cupiditate, nihil deleniti rerum necessitatibus in corrupti sequi iusto est illo eius soluta dignissimos aut! Esse, consequuntur dolorum!
</p>
<a href="#">BOOK NOW</a>
<a href="#">LEARN MORE</a>
</div>
<div class="sixty">
<span><em>Anniversary</em>60</span>
</div>
<div class="trigger active">
<span></span>
<span></span>
<span></span>
</div>
<div class="modal">
<div class="gnb">
<a href="#">attractions</a>
<a href="#">hotels spa</a>
<a href="#">shop dine</a>
<a href="#">celebrate</a>
<a href="#">promotions</a>
</div>
</div>
</div>
<script>
$('.trigger').click(function(){
$(this).toggleClass('active')
})
</script>
</body>
</html>
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2021.04.24
CSS에서 active 클래스를 .trigger.active라고 해야 하는데 .trigger span.active로 되어 있어서 그래요.
아래 처럼 .active클래스를 옮기세요.
.trigger.active span {
/* background-color: #fff; */
}
.trigger.active span:nth-of-type(1) {
top: 50%;
transform: rotate(45deg);
}
.trigger.active span:nth-of-type(2) {
opacity: 0;
}
.trigger.active span:nth-of-type(3) {
top: 50%;
transform: rotate(-45deg);
}
코딩웍스(Coding Works)
지식공유자2021.04.24
아... 질문이 2개였군요. 1번을 못봤어요. 1번 질문은 질문 내용을 제가 이해를 못하겠는데요. 비디오 랜딩에서 어떤게 안되시는거죠?
lololo
질문자2021.04.24
너무 생략해서 죄송합니다ㅠㅠ제입장만 생각했어요. 비디오랜딩이 아니라 다른 파트강의에서 css로 슬라이드 하는데 하단 라벨버튼으로 하잖아요! 하단라벨도 있고 좌우로 화살표 버튼도 제이쿼리 안 쓰고 하는 방법이 있는지 궁금해서 질문드렸습니다!ㅠㅠ
코딩웍스(Coding Works)
지식공유자2021.04.24
CSS로 탭메뉴 Next Prev를 만드는게 가능은 한데 반복되는 html 구조가 너무 많아서 추천드리지 않습니다. Next Prev는 아무래도 순수 자바스크립트 또는 Slick slider, BX slider, Swipe slider 등 슬라이더 플러그인을 활용하시는게 좋습니다.
CSS로 Next Prev를 만드는게 생각보다 비효율적이고 제작도 어렵습니다.
0
lololo
질문자2021.04.24
body {
margin: 0;
}
.container {
position: relative;
width: 100%;
height: 100vh;
}
.container video {
position: fixed;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
.logo {
position: absolute;
top: 30px;
left: 60px;
}
.text {
position: absolute;
bottom: 50px;
left: 50px;
color: white;
animation: ani1 1s;
animation-fill-mode: both;
}
.text h1,
.text h1 em {
font-size: 54px;
margin: 0;
}
.text h1 em {
font-style: normal;
display: block;
color: red;
}
.text p {
width: 600px;
}
.text a {
text-decoration: none;
color: white;
display: inline-block;
background-color: white;
width: 150px;
padding: 5px;
border-radius: 30px;
text-align: center;
margin-right: 10px;
border: 2px solid white;
transition: 0.3s;
}
a:nth-of-type(1) {
color: black;
}
a:nth-of-type(2) {
background-color: transparent;
}
a:nth-of-type(1):hover {
background-color: black;
border-color: black;
color: white;
}
a:nth-of-type(2):hover {
background-color: white;
color: black;
}
.sixty {
position: absolute;
right: 50px;
bottom: 50px;
animation: ani2 1s;
animation-fill-mode: both;
}
.sixty span,
.sixty span em {
color: black;
}
.sixty span {
font-size: 120px;
}
.sixty span em {
font-size: 20px;
display: block;
margin: 0 0 -30px 10px;
font-style: normal;
}
@keyframes ani1 {
0% {
opacity: 0;
margin-left: -100px;
}
100% {
opacity: 1;
margin-left: 0;
}
}
@keyframes ani2 {
0% {
opacity: 0;
margin-right: -100px;
}
100% {
opacity: 1;
margin-right: 0;
}
}
.trigger {
/* border: 1px solid red; */
width: 50px;
height: 20px;
position: absolute;
right: 40px;
top: 40px;
cursor: pointer;
z-index: 100;
}
.trigger span {
position: absolute;
width: 100%;
height: 2px;
background-color: black;
display: inline-block;
transition: 0.3s;
}
.trigger span:nth-of-type(1) {
top: 0;
}
.trigger span:nth-of-type(2) {
top: 50%;
width: 80%;
}
.trigger span:nth-of-type(3) {
top: 100%;
}
.trigger span.active {
background-color: #fff;
}
.trigger span.active:nth-of-type(1) {
top: 50%;
transform: rotate(45deg);
}
.trigger span.active:nth-of-type(2) {
opacity: 0;
}
.trigger span.active:nth-of-type(3) {
top: 50%;
transform: rotate(-45deg);
}
.modal {
position: relative;
height: 100vh;
background-color: rgba(0, 0, 0, 0.788);
display: none;
}
.gnb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.gnb a {
text-decoration: none;
color: white;
display: block;
font-size: 50px;
transition: 0.3s;
}
.gnb a:hover {
color: red;
background-color: transparent;
}
답변 2