Select

소개 슬라이더 아이템수가 바뀔때마다 애니메이션 키프레임을 다시 계산 해주는게 번거로워서 SCSS를 이용하여 계산 부분을 함수화 시켰습니다. 아래사진은 완성된 슬라이더 모습입니다. 본론 HTML 구조 입니다 // .scene는 최상위 엘리멘트 입니다 // .slider는 자식들로 .item을 가집니다. // .item은 각각의 .slider 아이템들을 나타냅니다 // 첫번째 .item 엘리멘트를 마지막에 추가합니다. // 첫부분과 끝부분 엘리멘트를 똑같이 해주면 // 슬라이딩 애니메이션이 반복될때 무한히 반복하는 효과를 줄수 있습니다. 1 2 3 1 SCSS 부분 입니다. // 각변수들은 색갈을을 나타냅니다. $slider:#FFF493; $primary:#87E892; $secondary:#A1E3FF;..

Intro We are going to create a slider that automatically adjusts animation keyframes based on number of items to rotate through items, using only HTML5 and SCSS. Below example demonstrates desired outcome. Breakdown Let's make make our initial HTML structure as following. // .scene is a wrapper for .slider // .slider contains all the items. // .item selects each item // Duplicate the first item,..