HTML 5 페이지 전환

페이지간에 멋지고 현대적인 전환을 만들고 싶습니다. 이 튜토리얼은 다음과 같습니다. http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/HTML 5 페이지 전환

저자는 JQuery를 사용하여 작동하지만 순수 HTML5로 만들고 싶습니다. HTML5에 CSS에서 말하는 기능이 있나요?

2014 년 결국 UPDATE

, 나는 다음과 같은 주석을 추가하고 싶습니다. 두 번 생각하기 전에 DIV간에 CSS3 전환을 사용하여 단일 페이지 AJAX 웹 앱을 만드는 것이 더 낫지 않을까요? 질문은 극히 드문 매우 특별한 상황을 묘사합니다. 나머지 99 %의 경우 단일 페이지 응용 프로그램이 최상의 솔루션입니다.

출처

2011-06-13 noober

전이 속성이 원하는 것일 수 있지만 css3 솔루션이라고 생각합니다. 당신은 신체 요소에 그것을 시도 할 수 있습니다. http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3 –

질문에 대한 답변이 아니지만 어떻게 작동하는지 확인하고 추천하지 않습니다. 페이드 아웃 (fade-out)은 새로운 페이지가 로딩을 시작하는 데 걸리는 시간을 지연시키고 그 효과에 관해서는 놀라운 것을 볼 수 없습니다. –

고맙겠지 만, 내가 이해하는 한 정상 상태와 호버라는 두 가지 상태가 있습니다. 두 상태 모두의 스타일과 전환 매개 변수를 설정할 수 있으며 나머지는 브라우저에서 수행합니다. 하지만 버튼이 있는데 창을 바꾼다. 위치는 onclick이고, 나는 아이디어가 없다. 몸에 2 가지 상태를 만드는 법 :로드 (정상)와로드 (페이드 아웃). – noober

index.htm으로 :

<html> 
<head> 

<style> 
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; } 

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
     /* Firefox */ 
     -moz-transition-property: opacity; 
     -moz-transition-duration: 3s; 
     /* WebKit */ 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 3s; 
     /* Standard */ 
     transition-property: opacity; 
     transition-duration: 3s; 
} 

</style> 

<script language="javascript"> 
function change() 
{ 
    document.getElementById('mainframe').className="faded"; 
    setTimeout(function() 
    { 
     document.getElementById('mainframe').src='page2.htm'; 
     document.getElementById('mainframe').className="normal"; 
    }, (2 * 1000)); 
} 
</script> 
</head> 

<body style="background-color:black;"> 
<iframe id="mainframe" class="normal" src="page1.htm"></iframe> 
</body> 

</html>

Page1.htm 파일

<html> 
<head> 
</head> 
<body style="background-color: pink;"> 
Hi, I'm page1 

<button onclick="parent.change();"> 
click me 
</button> 

</body> 
</html>

page2.htm

<html> 
<head> 
</head> 
<body style="background-color: pink;"> 
Hi, I'm page2 
</body> 
</html>

출처

2011-06-16 04:37:01 noober

이는하는 나에게 많은 도움이 위에 게시 된 정답을 기반으로합니다. 불행히도, 그것은 chrome/linux에서 저에게 효과가 없었습니다. 파이어 폭스에서도 잘 작동했습니다. 나는 모든 페이지에 공통 헤더를 원했기 때문에 어쨌든 약간 다른 것을 찾고있었습니다. 그래서 여기 내 적응 솔루션입니다.

<html> 
<head> 

<style> 
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; } 

#mainframe.normal 
{ 
    opacity: 1.0; 
} 
#mainframe.faded 
{ 
    opacity: 0.0; 
} 
#mainframe 
{ 
     /* Firefox */ 
     -moz-transition-property: opacity; 
     -moz-transition-duration: 3s; 
     /* WebKit */ 
     -webkit-transition-property: opacity; 
     -webkit-transition-duration: 3s; 
     /* Standard */ 
     transition-property: opacity; 
     transition-duration: 3s; 
} 

</style> 

<!--<script language="javascript">--> 
<script> 
function change(page) 
{ 
// document.write('Hello World'); 
    document.getElementById('mainframe').className="faded"; 
    setTimeout(function() 
    { 
     document.getElementById('mainframe').src=page+'.html'; 
     document.getElementById('mainframe').className="normal"; 
    }, (2 * 1000)); 
} 
</script> 
</head> 

<body style="background-color:black;"> 
    <header id="header"> 
     <h2 id="name"> 
      FRANCISCO</br> 
      FRANCHETTI 
     </h2> 
     <nav id="pages"> 
      <ul id="list-nav"> 
       <li class="current"><a onclick="change('home')" href="#">HOME</a></li> 
       <li><a onclick="change('research')" href="#">RESEARCH</a></li> 
       <li><a onclick="change('teaching')" href="#">TEACHING</a></li> 
       <li><a onclick="change('contact')" href="#">CONTACT</a></li> 
      </ul> 
     </nav> 
    </header> 
    <iframe id="mainframe" class="normal" src="home.html"></iframe> 
</body> 

</html>

홈페이지 비고 :

페이지가 버튼이나 아무것도 할 필요가 없습니다, 여기에 핸들러 모든 페이지에 공통적 인 헤더입니다.
실제로 이동하지 않으므로 href 속성이 비활성화됩니다. iframe에 대해 src을 다시 채 웁니다.
이제 change() 함수는 매개 변수 page을 사용하여로드 할 페이지를 결정하는 데 사용됩니다. 이전에 말했듯이, 에 대한 대상을 속성에 전달하는 대신에 이라는 문자를 사용하는 경우 은 change()의 함수 인수로 전달합니다.

출처

2013-09-20 17:25:49 nixahn

HTML 5 페이지 전환

답변

관련 문제