TIL 11th - Expanding Cards

 

수업 외 따로 시작하게 된 50 프로젝트 in 50 Days 

첫 번째 프로젝트로 진행하게 된 Expanding Cards로 말할 것 같으면 

클릭하면 펼쳐지는 사진첩들이고, 초기 화면은 다음과 같다. 

 

해당 기능을 구현하기 위해 생애 첫 자바스크립트, AddEventListener 을 사용하게 되었다.

 

사용 조건은 단순하게 Click.

 

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

 

 

 

 

다른 사진을 클릭하면 기존에 눌러져있던 이미지는 작아지는 애니메이션 효과를 가지며

클릭당한 이미지는 늘어나는 애니메이션 효과를 지닌다. 

 

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition : opacity 0.3s ease-in 0.4s;
}

 

하지만 아직 화면의 크기가 커지면 (27인치 모니터의 전체화면 사이즈) 사진이 확대 되면서 

 

Edge의 Radius가 해체되어, 해당 문제의 해결이 필요하다.