JavaScript (1) 썸네일형 리스트형 자바스크립트 부드럽게 느려지는 애니메이션 - progress bar 이번에 인프런 애플사이트를 클론하는 코딩 수업을 들으면서 다양하게 활용 가능할것 같은 애니메이션이 있어 한번 정리해두려고 합니다. 애플 사이트는 스크롤 하면서 동영상 사진이나 글자의 효과 또는 위치를 움직이는 효과를 넣어주었는데요. 이것은 기본적으로 화면을 스크롤 가능하도록 스타일로 화면의 높이를 강제적으로(?) 늘려주고 스크롤값에 따라 여러 효과들을 넣어주는 원리입니다. 여기에 동영상을 처리하여 (프레임을 이미지화) 멋진 효과들을 입히는데요, 조금 더 페이지를 고급화 시키기 위해서 부드러운 감속 효과를 넣어주면 한층 더 있어보이는 느낌이 뿜뿜하게 됩니다. 먼저 아래와 같이 기본 마크업 + 스타일 + 스크립트를 입혀보았습니다. 마크업 해놓은 박스를 스타일에서 fixed 로 고정시켜두고 스크립트에서 pag.. 이전 1 다음
