HTML FADE-IN-OUT
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 중앙정렬 VISUAL FAIDE_IN_OUT</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<header class="clerfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents clearfix">
<!-- tab_contents code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
<div class="link">
<!-- link code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</body>
</html>
<!-- VISUAL CODE -->
FADEIN_OUT
<div class="slides"><img src="images/img1.jpg" alt="이미지 1"><span>슬라이드 1</span></div>
<div class="slides"><img src="images/img2.jpg" alt="이미지 2"><span>슬라이드 2</span></div>
<div class="slides"><img src="images/img3.jpg" alt="이미지 3"><span>슬라이드 3</span></div>CSS
/* visual */
.visual {position: relative; overflow:hidden; width: 100%; height:300px;}
.visual .slides { display: none; position: absolute; left: 0; top: 0; z-index: 0; width: 1200px; height: 300px;}
.visual .slides:nth-of-type(1) {display: block;}
.visual .slides > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual .slides > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold;}
jQuery
$(document).ready(function(){
//visua fadein-out
var slides = 2;
var cnt = 0;
function slide_func(){
cnt = cnt == slides ? 0 : cnt + 1;
$(".slides").fadeOut(500);
$(".slides").eq(cnt).fadeIn(500);
}
setInterval(slide_func, 3000);
});
HTML SLIDE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 중앙정렬 VISUAL SLIDE</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<header class="clerfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents clearfix">
<!-- tab_contents code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
<div class="link">
<!-- link code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</body>
</html>
<!-- VISUAL CODE -->
SLIDE LEFT-RIGHT and Right - left
<div class="slides"><img src="images/img1.jpg" alt="이미지 1"><span>슬라이드 1</span></div>
<div class="slides"><img src="images/img2.jpg" alt="이미지 2"><span>슬라이드 2</span></div>
<div class="slides"><img src="images/img3.jpg" alt="이미지 3"><span>슬라이드 3</span></div>CSS
/* visual */
.visual {position: relative; overflow:hidden; width: 100%; height:300px;}
.visual .slides { position: absolute; left: 0; top: 0; z-index: 0; width: 1200px; height: 300px;}
.visual .slides > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual .slides > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold;}
.visual .slides.cur {z-index: 10; opacity: 1; }
.visual .slides.prev {z-index: 5; opacity: 1; transform: translateX(-100%); }
.visual .slides.next {z-index: 5; opacity: 1; transform: translateX(100%); }
<!-- VISUAL CODE -->
SLIDE BOTTOM - TOP and TOP - BOTTOM
<div class="slides"><img src="images/img1.jpg" alt="이미지 1"><span>슬라이드 1</span></div>
<div class="slides"><img src="images/img2.jpg" alt="이미지 2"><span>슬라이드 2</span></div>
<div class="slides"><img src="images/img3.jpg" alt="이미지 3"><span>슬라이드 3</span></div>CSS
/* visual */
.visual {position: relative; overflow:hidden; width: 100%; height:300px;}
.visual .slides { position: absolute; left: 0; top: 0; z-index: 0; width: 1200px; height: 300px;}
.visual .slides > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual .slides > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold;}
.visual .slides.cur {z-index: 10; opacity: 1; }
.visual .slides.prev {z-index: 5; opacity: 1; transform: translateX(-100%); }
.visual .slides.next {z-index: 5; opacity: 1; transform: translateX(100%); }
jQuery
$(document).ready(function(){
var slides = 2;
var cnt = 0;
function slide_func(){
cnt = cnt == slides ? 0 : cnt + 1; //정방향 아래에서 위로
//cnt cnt == 0 ? slides : cnt - 1; //역방향 위에서 아래로
var next_num = cnt == slides ? 0 : cnt + 1;
var prev_num = cnt == 0 ? slides : cnt - 1;
$(".slides").removeClass('cur prev next').css("transition", "none");
$(".slides").eq(cnt).addClass("cur").css("transition", "transform 0.3s");
$(".slides").eq(next_num).addClass("next").css("transition", "transform 0.3s");
$(".slides").eq(prev_num).addClass("prev").css("transition", "transform 0.3s");
}
setInterval(slide_func, 3000);
});
'웹디자인기능사 실기 > TIP' 카테고리의 다른 글
| 웹디자인기능사 실기 유형 왼쪽정렬 CONTENTS > TAB (0) | 2021.04.26 |
|---|---|
| 웹디자인기능사 실기 유형 중앙정렬 CONTENTS (0) | 2021.04.25 |
| 웹디자인기능사 실기 유형 LEFT HEADER + NAV (0) | 2021.04.23 |
| 웹디자인기능사 실기 유형 TOP HEADER + NAV (0) | 2021.04.22 |
| 웹디자인기능사 실기 전체영역 종류 (0) | 2021.04.21 |
