“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
웹디자인기능사 실기 연습_슬라이더 이펙트 트랜지션 효과
이미지 슬라이드 형식 3가지 방법에 대해 정리해보겠습니다!
우선 기본 설정입니다.
css연결
<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>01. 슬라이더</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">타이틀 제목을 작성해주고
css파일을 각자 만들어 연결해줍니다.
reset css
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/tmon/Tmon.css');
@import url('https://webfontworld.github.io/daegu/DalseoDarling.css');
@import url('https://webfontworld.github.io/suseong/SuseongDotum.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/kohi/KOHIBaeum.css');
@import url('https://webfontworld.github.io/jeju/JejuGothic.css');
@import url('https://webfontworld.github.io/tway/TwayAir.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/score/SCoreDream.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'TheJamsil';
font-weight: 300;
}
.font02 {
font-family: 'Tmon';
font-weight: 300;
}
.font03 {
font-family: 'DalseoDarling';
font-weight: 300;
}
.font04 {
font-family: 'SuseongDotum';
font-weight: 300;
}
.font05 {
font-family: 'HealthsetGothic';
font-weight: 300;
}
.font06 {
font-family: 'KOHIBaeum';
font-weight: 300;
}
.font07 {
font-family: 'JejuGothic';
font-weight: 300;
}
.font08 {
font-family: 'TwayAir';
font-weight: 300;
}
.font09 {
font-family: 'TmoneyRoundWind';
font-weight: 300;
}
.font10 {
font-family: 'SCoreDream';
font-weight: 300;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
/* background-color: #f1cfcf; */
}
body.img01 {
background-image: url(../img/sliderEffect01-min.jpg);
}
body.img02 {
background-image: url(../img/sliderEffect02-min.jpg);
}
body.img03 {
background-image: url(../img/sliderEffect03-min.png);
}
body.img04 {
background-image: url(../img/sliderEffect04-min.jpg);
}
body.img05 {
background-image: url(../img/sliderEffect05-min.jpg);
}
body.img06 {
background-image: url(../img/sliderEffect06-min.jpg);
}
body.img07 {
background-image: url(../img/sliderEffect07-min.jpg);
}
body.img08 {
background-image: url(../img/sliderEffect08-min.jpg);
}
body.img09 {
background-image: url(../img/sliderEffect09-min.jpg);
}
body.img10 {
background-image: url(../img/sliderEffect10-min.jpg);
}
body::after {
content: '';
position: absolute;
left:0; top:0;
width: 100%;
height: 100vh;
background-color: rgba(5, 66, 70, 0.87);
z-index: -1;
}
body.bg01::after {
background-color: rgba(34, 5, 70, 0.87);
}
body.bg02::after {
background-color: rgba(5, 70, 40, 0.87);
}
body.bg03::after {
background-color: rgba(53, 70, 5, 0.87);
}
body.bg04::after {
background-color: rgba(70, 23, 5, 0.87);
}
body.bg05::after {
background-color: rgba(15, 5, 70, 0.87);
}
body.bg06::after {
background-color: rgba(70, 5, 14, 0.87);
}
body.bg07::after {
background-color: rgba(1, 23, 24, 0.945);
}
body.bg08::after {
background-color: rgba(47, 70, 5, 0.87);
}
body.bg09::after {
background-color: rgba(70, 44, 5, 0.87);
}
body.bg10::after {
background-color: rgba(5, 66, 70, 0.87);
}저번 마우스이펙트에서 사용했던 css를 그대로 가져와
사진을 옮겨오고 slider로 이름만 변경해줬습니다.
폰트, 사진, 기본 글씨, 배경 이미지에 대한 기본 설정들입니다.
slider css
/* header */
#header {
position: absolute;
left: 50%;
top: 20px;
transform: translateX(-50%);
text-align: center;
}
#header h1 {
margin-bottom: 0.3em;
}
#header ul {
margin-top: 0.6em;
}
#header li {
display: inline-block;
}
#header li a {
color:#fff;
border: 1px solid #fff;
width: 30px;
height: 30px;
line-height: 30px;
display: inline-block;
border-radius: 50%;
}
#header li.active a {
background: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
#footer a {
color: #fff;
font-size: 14px;
}
#footer a:hover {
text-decoration: underline;
}header와 footer의 css작업을 해줬습니다.
💜 슬라이더 이펙트 01
html
<body class="img01 bg04 font10">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>01. 슬라이드 이펙트 : 트랜지션 효과<p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect03-min.png" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->우선 첫번째 부터 살펴보겠습니다.
슬라이드 이펙트 트랜지션 효과를 먼저 해보겠습니다.
숫자에 따른 링크를 연결해주고,
main에 5가지 이미지를 넣어줍니다.
footer엔 이메일 링크를 넣어줬습니다.
style
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img {
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
script
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격 시간
setInterval(() => {
//0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 //currentIndex
//1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 //nextIndex
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
console.log(currentIndex);
}, sliderInterval);
// slider[0].style.opacity = "0"; //첫번째 이미지를 안보이게
// slider[1].style.opacity = "1"; //두번째 이미지를 보이게
// slider[1].style.opacity = "0"; //두번째 이미지를 안보이게
// slider[2].style.opacity = "1"; //세번째 이미지를 보이게
// slider[2].style.opacity = "0"; //세번째 이미지를 안보이게
// slider[3].style.opacity = "1"; //네번째 이미지를 보이게
// slider[3].style.opacity = "0"; //네번째 이미지를 안보이게
// slider[4].style.opacity = "1"; //다섯번째 이미지를 보이게
// slider[4].style.opacity = "0"; //다섯번째 이미지를 안보이게
// slider[0].style.opacity = "1"; //첫번째 이미지를 보이게
</script>다음은 스크립트부분입니다.
slider__wrap, slider__img, slider의 선택자를 만들어줍니다.
currentIndex로 현재 보이는 이미지,
sliderCount로 이미지 갯수,
sliderInterval로 이미지 변경 간격 시간의 변수도 지정해줍니다.
그리고 setInterval() 메서드를 사용해 일정 시간 간격으로 콜백 함수를 호출해줍니다.
currentIndex가 0 1 2 3 4 0 1 2 3 4 0 이 반복되어야하고
netxIndex값이 1 2 3 4 0 1 2 3 4 0 1 이 반복되게 만들어줘야 합니다.
따라서 nextIndex 값을 currentIndex +1을 하고 % 사진의 갯수를 넣어 값을 만들어줍니다.
현재 보이는 이미지가 0일 때 opacity(투명도)를 줘서 사진이 사라지게 하고
다음 사진이 보여지게 합니다.
이렇게 첫번재 슬라이더이펙트는 마무리되었습니다.
+추가
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(()=>{
let nextIndex = (currentIndex + 1) % slidercount;
gsap.to(slider[currentIndex], { duration: 1, opacity: 0 });
gsap.to(slider[nextIndex], { duration: 1, opacity: 1 });
currentIndex = nextIndex;
},sliderInterval)
</script>setInterval() 함수를 사용해 주기적으로 실행되는 함수를 생성
gsap.to() 함수를 사용해 현재 슬라이드의 투명도를 0으로 설정
다음 슬라이드의 투명도를 1로 설정 합니다.
GSAP라이브러리를 사용하여 자연스러운 애니메이션 효과를 구현할 수 있습니다.
jQrety
<!-- jQrery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(()=>{
let nextIndex = (currentIndex + 1) % slidercount;
$(".slider").eq(currentIndex).animate({ opacity: 0 },1000);
$(".slider").eq(nextIndex).animate({ opacity: 1 },1000);
currentIndex = nextIndex;
},sliderInterval);
</script>jQuery를 사용한 코드입니다.
마찬가지로 setInterval()함수를 사용합니다.
여기서는 document대신 $를 사용해 더 간결하게 쓸 수 있습니다.
--
다음은 포스팅에서는 좌우로 사진이 움직이게 하겠습니다.
https://mi-1119.tistory.com/69
웹디자인기능사 실기 연습_슬라이더 이펙트 좌로움직이기
💜 슬라이더 이펙트 02 코드 보기 / 완성 화면 기본 세팅은 위와 같습니다. 달라진 점만 정리해보도록하겠습니다. main 우선 사진이 전체적으로 움직이게 해줘야 하기 때문에 slider__inner를 만들어
mi-1119.tistory.com
반응형