저는 지난 글에서 기초부터 작성하는 수직방향의 반응형 타임라인을 제작하는 방법을 알려드렸습니다. 오늘은 그와 관련하여 수평방향 타임라인을 만드는 과정을 내용으로 다룰 겁니다.

여러분이 프론트 엔드 개발에 참여해 본 적이 있다면 '패럴랙스 스크롤링'이란 용어를 들어보았을 것입니다. 제 수업인 제작하기 쉬운 스크롤 이벤트에서 발췌한 짧은 동영상에서 패럴랙스 스크롤링을 정의하고, 온라인에 있는 몇 가지 예제를 살펴보겠습니다.

이번 튜토리얼에서 우리는 소위 "인라인으로 된 공유하기 메뉴"의 제작 방법을 학습할 것입니다. 이 인터페이스는 독자가 페이지를 공유하고, 하이라이트 표시된 텍스트를 인용할 수 있는 메뉴를 띄우는 방식으로 동작합니다. 여러분은 Medium처럼 몇몇 유명한 사이트에서 이와 유사한...

이 튜토리얼에서는 두 번째 시리즈 인 두 번째 시리즈에서 율리아 소콜 로바 (Yulia Sokolova)의 "웹 사이트에서 긴 스크롤 배경을 만드는 방법"이라는 멋진 벡터 기반 일러스트레이션을 찍어 라이브 사이트로 코딩합니다.

이번 튜토리얼에서는 요즘에 웹사이트에서 많이 보이는 패턴을 제작해 보도록 하겠습니다. 스크롤 해서 페이지를 이동할 때 매끄럽게 애니메이션 되는 고정 헤더입니다. 기본 구조부터 잡고 나서 CSS와 순수 자바스크립트를 이용해 동작하도록 하겠습니다. 마무리하기 전에는 코드의 최적화...