Cocacola Website 클론코딩

hyemini·2022년 9월 14일

Cocacola Website 반응형 클론코딩

✍️ 상세기능

코카콜라 이미지 슬라이드

Swiper에서 Effect coverflow를 사용했습니다 😁
(~~메뉴 오타는 까먹고 못 고쳤습니당 ㅜㅜ 또륵~~)

✍️코드


<div class="imgBox">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/cocacola1.png"></div>
                        <div class="swiper-slide"><img src="images/cocacola2.png"></div>
                        <div class="swiper-slide"><img src="images/cocacola3.png"></div>
                        <div class="swiper-slide"><img src="images/cocacola4.png"></div>
                        <div class="swiper-slide"><img src="images/cocacola5.png"></div>
                        <div class="swiper-slide"><img src="images/cocacola6.png"></div>
                    </div>
                </div>
            </div>


<script>
        var swiper = new Swiper(".mySwiper", {
          effect: "coverflow",
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: "auto",
          coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 200,
            modifier: 1,
            slideShadows: true,
          },
          pagination: {
            el: ".swiper-pagination",
          },
          loop: true,
        });
 </script>

요소의 표시 위치 이동

✍️ 코드

html

<ul class="sci">
            <li><a href="#"><img src="images/facebook.png"></a></li>
            <li><a href="#"><img src="images/twitter.png"></a></li>
            <li><a href="#"><img src="images/instagram.png"></a></li>
        </ul>

css

.sci {
    position: fixed;
    bottom: 40px;
    left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sci li {
    list-style: none;
}

.sci li a {
    display: inline-block;
    margin-left: 15px;
    background: #222;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: 0.2s ease-in-out;
}

.sci li a:hover {
    background: #e51e2a;
    transform: translateY(-20px);
}

.sci li a img {
    filter: invert(1);
    transform: scale(0.5);
}

호버를 통해 translateY를 사용해서 표시 위치를 이동시켰습니다 😆 translate(x, y)、translateX()、translateY()를 사용하면 표시 위치가 이동합니다 :)

반응형 카테고리 디자인

✍️ 코드

<script>
function toggleMeun() {
            const meunToggle = document.querySelector('.toggle');
            const navigation = document.querySelector('.navigation')
            meunToggle.classList.toggle('active')
            navigation.classList.toggle('active')
        }
</script>

css

@media (max-width: 991px) { 
    header {
        padding: 40px;
    }
    section {
        padding: 150px 40px;
    }
    .sci {
        left: 40px;
    }
    .content {
        flex-direction: column;
    }
    .content .textBox,
    .content .imgBox {
        max-width: 100%;
    }
    .swiper-slide {
        height: 300px;
    }
    header .navigation {
        display: none;
    }
    header .navigation.active {
        display: flex;
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #e51e2a;
        z-index: 10;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    header .navigation li a {
        margin: 10px 0;
        font-size: 1.5em;
        font-weight: 300 ;
    }
    .toggle {
        position: relative;
        width: 30px;
        height: 30px;
        background: url(images/menu.png);
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        z-index: 10000;
    }
    .toggle.active {
        position: fixed;
        right: 40px;
        background: url(images/close.png);
        background-size: 25px;
        background-repeat: no-repeat;
        background-position: center;
    }
}

Element.classList.toggle을 사용했습니다! 클래스가 존재한다면 클래스를 제거하고..! 클래스가 존재하지 않는다면 클래스를 추가합니다 😁