유형종합 반응형 사이트만들기

사이트 만들기 : 반응형 적용01

사이트 만들기 : 반응형 적용입니다. 블로그에 있는 모든 사이트 유형을 종합하여 반응형 사이트로 만들어 봤습니다.
html코드와 css코드는 스크롤 압박으로 생략하였으니, 원본 소스 보기(github) 자료를 참고해주세요!

JAVASCRIPT

슬라이드 영역 사진 이동(버튼) / 애니메이션 설정

var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",  // 다음 이미지 버튼
        prevEl: ".swiper-button-prev",  // 이전 이미지 버튼
    },
    autoplay: {     // 이미지 자동 넘어가기
        delay: 2000,
        disableOnInteraction: false,    // 애니메이션이 멈추는 버그 수정
    },
    pagination: {   // 페이징(목록 요소의 개수를 나타내주는 UI)
        el: '.swiper-pagination',
        type: 'bullets',    // 개수를 나타내주는 이미지 유형
        clickable: true,    // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
    },
});

슬라이드 영역 사진 클릭시 자동 애니메이션 설정

document.querySelector(".swiper-button-stop").addEventListener("click", () => {
    swiper.autoplay.stop();
});
document.querySelector(".swiper-button-play").addEventListener("click", () => {
    swiper.autoplay.start();
});

이벤트를 설정하기 전 변수를 선언합니다.

const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-play");
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = document.querySelectorAll("ul li a");

슬라이드 영역 애니메이션 재생/일시정지 버튼 기능, 디스플레이 설정

btnStart.style.display = "none";

btnStop.addEventListener("click", () => {
    swiper.autoplay.stop();
    btnStart.style.display = "block";
    btnStop.style.display = "none";
});

btnStart.addEventListener("click", () => {
    swiper.autoplay.start();
    btnStart.style.display = "none";
    btnStop.style.display = "block";
});

헤더 햄버거 메뉴 클릭시 스크롤 고정 설정

btnHam.addEventListener("click", () => {
    btnHam.classList.toggle("active");
    btnMenu.classList.toggle("active");
    document.body.classList.toggle("fixed");
});

브라우저 크기에 따른 햄버거 메뉴 클릭시 스크롤 고정, 메뉴 활성화 여부 설정

window.addEventListener("resize", () => {
    let width = window.innerWidth;
    if (width > 1300) {
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
    }
});

햄버거 메뉴에서 메뉴 클릭시 메뉴바가 비활성화 되도록 설정

btnMenuList.forEach(list => {
    list.addEventListener("click", () => {
        document.body.classList.remove("fixed");
        btnMenu.classList.remove("active");
        btnHam.classList.remove("active");
    });
});

scrollTop 위치값에 따른 메뉴바 활성화 상태 설정

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    //forEach문
    document.querySelectorAll(".parallax").forEach((el, i) => {
        if (scrollTop >= el.offsetTop - 50) {
            document.querySelectorAll(".header__menu li").forEach((li) => {
                li.classList.remove("active");
            });
            document.querySelector(".header__menu li:nth-child(" + (i + 1) + ")").classList.add("active");
        }
    });
});

메뉴 클릭으로 화면이동시 부드러운 효과 설정

document.querySelectorAll(".header__menu a").forEach((el) => {
    el.addEventListener("click", (e) => {
        e.preventDefault();

        document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
    });
});

scroll값에 따른 Top 버튼 출력위치 설정

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    if (scrollTop > document.body.scrollHeight - window.outerHeight) {
        document.querySelector("#site__top").classList.add("show");
    } else {
        document.querySelector("#site__top").classList.remove("show");
    }
});

Top 버튼 이벤트 설정

document.querySelector("#site__top").addEventListener("click", () => {
    window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
});

모바일 화면

원본 소스 보기 원본 사이트 보기