[Slide Effect] 슬라이드 이펙트 01

슬라이드 이펙트 01

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. HTML과 자바스크립트 소스를 설명드리며 CSS는 복잡해지기 때문에 CSS 소스 보기 버튼을 클릭하여 봐 주시기 바랍니다.

자, 그럼 시작해볼까요?

HTML 소스 보기 : 모달 박스

슬라이드 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다.

<body class="img06"> <!-- 백그라운드 이미지 / CSS로 이미지 출력시킴 -->
    <header id="header">
        <h1>JAVASCRIPT SLIDER EFFECT 01</h1>
        <p>슬라이드 이펙트 ① - 트랜지션 효과</p>
        <ul>
            <li class="active"><a href="sliderEffect01.html">01</a></li>
            <li><a href="sliderEffect02.html">02</a></li>
            <li><a href="sliderEffect03.html">03</a></li>
            <li><a href="sliderEffect04.html">04</a></li>
            <li><a href="sliderEffect05.html">05</a></li>
            <li><a href="sliderEffect06.html">06</a></li>
            <li><a href="sliderEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- // header -->

    <main id="main">
        <section id="sliderType01">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider"><img src="../assets/img/effect_bg03.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/effect_bg04.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/effect_bg10.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/effect_bg07.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/effect_bg08.jpg" alt="이미지5"></div>
                </div>
            </div>
        </section>
    </main>
    <!-- // main -->

    <footer id="footer">
        <div class="modal__wrap">
            <div class="modal__btn">
                <label for="btn">소스 보기</label>
            </div>
            <div class="modal__cont">
                <div class="modal__box">
                    <div class="title">
                        <span class="dot" aria-label="true"></span>
                        <div class="tabs">
                            <div class="active">
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>JavaScript</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>HTML</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>CSS</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <span class="plus" aria-label="true">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                <path d="M2.5 8H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M8 2.5V13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div class="cont">
                        <div class="active">
<pre><code lang="language-js">// 선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-js">// 선택자2
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력

// 선택자2
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력 ffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-js">// 선택자3
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

// 선택자3
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력

// 선택자3
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
let count = 0;

// 전체 개수 구하기
searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력 yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</code></pre>
                        </div>
                    </div>
                </div>
                <div class="modal__close">
                    <span class="close">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                            <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <!-- // footer -->
</body>

JavaScript 소스 보기 : 모달 박스

슬라이드 이펙트 01의 JavaScript 소스와 부연 설명(주석 처리됨)이다.
이 내용은 따로 common.min.js 파일로 빼놓도록 하자.

hljs.highlightAll();

// 모달 창
const modalBtn = document.querySelector(".modal__btn");     // 소스 보기 버튼
const modalCont = document.querySelector(".modal__cont");   // 모달 창
const modalClose = document.querySelector(".modal__close"); // 모달 창 닫기 버튼

modalBtn.addEventListener("click", () => {
    modalCont.classList.add("show");    // 소스보기 버튼 누르면 모달 창 띄우기
    modalCont.classList.remove("hide");
});

modalClose.addEventListener("click", () => {
    modalCont.classList.add("hide");     // X 버튼 누르면 모달 창 닫기
});

// 탭 메뉴
const tabBtn = document.querySelectorAll(".modal__box .tabs > div");
const tabCont = document.querySelectorAll(".modal__box .cont > div");

tabBtn.forEach((element, index) => {
    // 버튼을 클릭함
    element.addEventListener("click", (event) => {
        event.preventDefault();   // 클릭한 버튼을 누름으로 발생하는 이벤트 무효화
        // 버튼 클릭해도(href="#" 때문에 발생하는)끌올 막을 수 있음.
        
        // 클래스 active를 모두 제거
        tabBtn.forEach(li => {
            li.classList.remove("active");      // li(버튼)을 누르면 먼저 active(버튼눌린)효과 지워준다.
        });

        // 내가 클릭한 버튼에 active 효과 추가
        element.classList.add("active");        // 그런 다음 내가 누른 버튼에만 active 효과를 넣어주도록 한다.

        // 버튼을 클릭하면 모든 자식 박스(콘텐츠) 숨기기
        tabCont.forEach(div => {
            div.style.display = "none";
        });

        // [i]클릭한 버튼과 [i]그에 알맞는 자식 박스(콘텐츠)를 출력시킴
        tabCont[index].style.display = "block";
    });
});

JavaScript 소스 보기 : 이미지 변화

슬라이드 이펙트 01의 3초마다 변화하는 이미지 효과 JavaScript 소스와 부연 설명(주석 처리됨)이다.

// 이미지 변화
<script src="../assets/js/highlight.min.js"></script>
<script src="../assets/js/common.min.js"></script>
<script>
    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");
    const slider = sliderWrap.querySelectorAll(".slider");

    let currentIndex = 0;       // 현재 보이는 이미지
    let slideCount = slider.length      // 이미지 개수

    setInterval(() => {
        let nextIndex = (currentIndex + 1) % 5;  // 다음 이미지

        slider[currentIndex].style.opacity = "0";  // 첫번째 이미지를 안보이게 처리
        slider[nextIndex].style.opacity = "1";  // 두번째 이미지를 보이게 처리

        currentIndex = nextIndex;
    }, 3000);
    // 3000 = 3초에 한 번씩 실행시킴
</script>

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Slide Effect' 카테고리의 다른 글

[Slide Effect] 슬라이드 이펙트 05 - 이미지 슬라이드(버튼, 닷메뉴) (1)	2022.10.14
[Slide Effect] 슬라이드 이펙트 04 - 좌우 이동 버튼 만들기 (4)	2022.09.18
[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로) (9)	2022.09.01
[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 (5)	2022.08.29

코딩공책📚

[Slide Effect] 슬라이드 이펙트 01

슬라이드 이펙트 01

HTML 소스 보기 : 모달 박스

JavaScript 소스 보기 : 모달 박스

JavaScript 소스 보기 : 이미지 변화

'Effect > Slide Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Slide Effect] 슬라이드 이펙트 01

슬라이드 이펙트 01

HTML 소스 보기 : 모달 박스

JavaScript 소스 보기 : 모달 박스

JavaScript 소스 보기 : 이미지 변화

'Effect > Slide Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바