이 웹 사이트는 어떻게 페이지로드 애니메이션을합니까?

http://visualidiot.com/articles/hacking-facebook 이 웹 사이트는 어떻게 페이지로드 애니메이션을합니까?

이 웹 사이트의 기사로 이동하면 페이지의 본문이 아래로 내려간 다음 약간 위로 움직이는 애니메이션을 보게됩니다. 페이지 본문이 움직이며 머리글은 움직이지 않습니다. 이전에 페이지로드 애니메이션을 보았을 때 버그로 인해 괴롭힘을 당했고 뒤로 버튼을 눌렀을 때와 페이지로 돌아갈 때 엉망이되었습니다.

정확히이 사람이 어떻게 애니메이션을합니까?

출처

2012-01-21 android.nick

분명히 보이지만 ... 직접 물어 보지 않으시겠습니까? 그의 페이지에 그가 트위터에 있다고한다. –

나는 그것에 대해서 생각조차하지 않았다. * 이마를 치다. –

저는 비주얼 바보 (Visual Idiot)입니다. 나는 잘 만든 사이트입니다. 이것은 다음과 같이 사용할 수있는 애니메이션을 정의

@-webkit-keyframes bounce { 
    0% { opacity: 0; -webkit-transform: translateY(-800px); } 
    60% { opacity: 1; -webkit-transform: translateY(25px); } 
    80% { -webkit-transform: translateY(-8px); opacity: .8; } 
    100% { -webkit-transform: translateY(0); opacity: 1; } 
}

: 기본적으로

, 세스의 말처럼, 그것은 animations.css의 모든, 그리고는,보다 구체적으로는 일을 수행하려면 키 프레임 애니메이션을 사용합니다 그래서 : 아무것도가 추가 "바운스"의 클래스가 때마다

.bounce { 
    -webkit-animation: bounce .75s ease-in-out; 
}

지금, 그것은 귀여운 효과 페이지 내 사이트에 있다고 할 수 있습니다. 한 가지주의해야 할 점은 DOM을 준비하기 전에 애니메이션을 실행하기 때문에 자바 스크립트를 통해 클래스를 추가하면 더 좋습니다 (더 긴 페이지에만 해당).

자세히 알아 보려면 CSS의 키 프레임 애니메이션에 관해서는 Dan Eden의 놀라운 animate.css library을 확인해 보는 것이 좋습니다. 나는 소스 파일을 따로 뽑아서 많은 것을 배웠다.

출처

2012-01-21 09:19:12 visualidiot

아, 정말 고마워. 나는 당신의 사이트 디자인을 아주 좋아합니다. 너무 단순하지만 ... 아름답습니다. 애니메이션은 설정 한 방식대로 아름답습니다. –

이 웹 사이트는 어떻게 페이지로드 애니메이션을합니까?

답변

관련 문제