JavaScript는 썸네일에서 전체 너비 이미지 페이지로의 원활한 전환을 구현합니다.

Question

http://manifesto.clapat.com/

홈 페이지에서 항목을 클릭하면 썸네일에서 해당 항목 페이지의 제목이 되는 전체 화면 이미지로 전환됩니다. 이러한 전환 효과는 어떻게 생성되며 React Router 대신 내부 라우팅을 사용하여 이를 구현하는 가장 좋은 방법은 무엇입니까? 누군가가 React Router에서 작동하도록 할 수 있다면 저도 그것을 포팅할 수 있습니다.

몇 가지 튜토리얼이 있지만 모두 다른/프로젝트 페이지로 이동하는 대신 전체 화면 모달 구성 요소와 유사하게 동일한 페이지에 데이터를 로드합니다. 주요 목표는 이미지를 로드하는 동안 다른 페이지로 전환하는 것입니다.

Answer 1

이 효과를 얻으려면 서버 측 렌더링이 필요합니다. 일반 렌더링 방법은 페이지로 이동한 후에만 이미지 로드를 시작하기 때문입니다. Next.js에서 Link 요소를 통해 액세스되는 모든 페이지는 해당 페이지를 가리키는 요소가 포함된 페이지에 있는 한 사전 렌더링됩니다.

이 효과를 얻으려면 먼저 CSS에서 이미지 위치를 고정으로 설정한 다음 전환 효과를 생성하고 이미지 크기를 너비: 100% 및 높이: 100%로 조정하고 전환 시간을 500밀리초로 설정해야 합니다. , 또한 전환이 끝난 후 이미지가 배경으로 있는 다음 페이지로 자동으로 이동하는 타이머를 설정해야 합니다. 이 작업을 수행해야 하는지는 모르겠지만 어딘가에 를 포함하면 페이지가 사전 렌더링되고 페이지로 라우팅될 때 이미지가 즉시 로드됩니다.

첫 번째 페이지:

으아아아

다음 페이지:

으아아아

이 예제는 더 쉽게 읽을 수 있도록 tailwindcss에 작성했지만 다른 CSS 라이브러리에서도 동일한 효과를 얻을 수 있습니다. 전환을 원활하게 진행하려면 전환 기간과 setTimeout 기간을 동일하게 설정하면 전환이 완료되고 두 페이지의 이미지가 정확히 동일할 때만 페이지가 리디렉션됩니다.

원하는 답변이 되었기를 바랍니다. 예제의 클래스가 수행하는 작업을 확인하려면 tailwindcss 문서를 확인하세요.