2014-11-14 4 views
-1

나는 다음과 같은 기법이 어떻게 만들어 지는지에 관심이있다. http://www.otherfocus.com/ 썸네일을 클릭하면 웹 사이트가 단일 페이지를 애니메이션으로 덮어 씌운다.링크를 클릭 한 후 어떤 기능이 실행되는지 확인할 수 있습니까?

나는 소스를 참조했지만,이 기능의 핵심이 무엇인지는 거의 이해하지 못했다. 누구든지 축소판을 클릭 한 후 어떤 기능이 실행되는지 확인하는 방법을 알고 있습니까?

+0

이 경로에 대한 링크입니다. 그 페이지에는 많은 것들이 있습니다. 모든 스크립트를 살펴보십시오. 아마도 공통 라이브러리의 애니메이션 일 것입니다. 아마 모더니스트일까요? – Halcyon

+0

링크 된 페이지의 내용을 가져 오기위한'jQuery.load'와 URL을 변경하는'History.pushState'의 조합입니다. 애니메이션은 CSS 기반이며 루트 요소의 일부 클래스가 변경되면 실행됩니다. – pawel

+0

사람들이 왜 이것을 downvoting 있습니까? 코멘트 해주시겠습니까? – user2808054

답변

-1

미리보기 이미지를 마우스 오른쪽 버튼으로 클릭하고 원본을 확인할 수 있습니다 (이 경우 크롬을 사용하는 경우).이 경우 링크가 작동하지 않습니다. 예를 들어 왼쪽 위 썸네일은 'http://www.otherfocus.com/wp-content/uploads/2014/11/thumb-800x600.jpg'

+0

예. 그러나 새 페이지의 오버레이를 애니메이션화하는 기능이 있어야합니까? – Caspert

+0

'element.addEventListener'를 수행하면 이벤트가 DOM에 표시되지 않습니다. – Halcyon

관련 문제