이 효과는 어떻게 달성됩니까? HTML/CSS는/jQuery를

Question

여기에이 사이트를 방문하는 경우 : http://alexdunphy.github.com/refineslide/#installation

그리고 메뉴 버튼 "설치"를 클릭 등 "정보" "튜닝", "자주 묻는 질문"... 당신이 알 수 있습니다 전체 페이지를 다시로드하지 않고도 각 페이지 사이를 전환 할 수 있습니다.

방금 ​​웹 개발을 시작했으며 비슷한 효과를 얻으려고합니다.

여기에 그가 그것을 어떻게하고 있는지에 대한 내 생각을이다 : 그 내용

1. iframe이이 버튼을 각각 iFrame을로드 할 트리거합니다. 각 iframe이 최고 수준 <div>는 일부 -webkit- 또는 -moz- 애니메이션이 있습니다.

2. 전체 내용이 사업부에, 각 버튼은 단순히 이전 사업부를 페이드 아웃 및 일부 CSS 애니메이션의 다음 DIV 페이드.

어떻게 수행했는지 알지 못하는 한이 두 가지를 모두 시도해 보겠습니다.

1과 2 중에서 어느 것이 더 매력적인 선택입니까?

Answer 1

그것은 링크는 URL로 #pagename을 추가, 의사 선택이 목표라고 사용하고, 해당 애니메이션은 거기에서 열립니다. 다음 CSS에 정의 할 수

<a href='#pagename'>This link goes to pagename</a> 

그리고 : 링크의 모양

<p id='pagename'>This is some text</p> 

:

html로는 같을 수

#pagename:target { 
    font-weight: bold; 
} 

이 만들 것 링크를 클릭하면 #pagename 안의 텍스트가 굵게 표시됩니다. 여기에서 애니메이션을 포함하도록 확장 할 수 있습니다. 모든 div에 불투명도 0을주고 왼쪽에 위치를 부여하는 것과 같습니다 : 50px;

그리고 사업부를 대상으로 할 때마다 다음, 당신은 1 불투명도를 애니메이션과

편집을 0 픽셀 왼쪽 : http://jcolicchio.latestdot.net/test_target.html#page1

: 여기 당신이려고하고 정확한 효과를 에뮬레이트 내가 채찍질 간단한 예제이다

Answer 2

대부분 전환 효과에 JQuery가 사용됩니다.

http://jquery.com/

Answer 3

firebug로 웹 페이지를 검사하면 this jQuery 파일 안에 모든 마법 (또는 적어도 일부)이 있음을 알 수 있습니다.

모든 세부 사항을 보지 못했지만이 효과를 순수 jQuery 및 CSS로 얻을 수 있다고 가정합니다.

행운을 빕니다!