웹 페이지를로드 할 때 전환을 추가하는 방법

4

당신은 css3과 html5만을 사용하여 상자 밖으로 나올 수는 있지만 그렇게 할 수는 없습니다! 더 무거운 프레임 워크에 의존하지 않고도 할 수있는 일은 다양한 요소의 onload 이벤트에 적용하고 onload 이벤트가 발생하면 css 클래스를 추가하는 것입니다.

body { 
    opacity : 0; 
    transition : opacity 1s ease; 
} 

.loaded { 
    opacity : 1; 
}

당신이 다음 자바 스크립트 같은 것을 할 수 있습니다 : 일부 브라우저에서

<body onload="this.classList.add('loaded')">

body 요소 내에서 this 변수를

은이 같은 신체의 CSS 모양을 만들 말할 수 정말 인식되지 않는다면, 대신 document.body를 사용하는 것이 좋습니다!

<body onload="document.body.classList.add('loaded')">

이 당신에게 새로운 프레임 워크를 모든 학습의 번거 로움없이, 한 번에 CSS 내에서 다양한 CSS 속성과 transform : all 1s ease;을 재생할 수있는 자유를 제공!

여기에 동작하는 예제입니다

<!doctype> 
<html> 
    <head> 
     <style> 

      body { background: orange; -webkit-transition: all 1s ease; transition: all 1s ease; } 

      .loaded { background: red; } 

     </style> 

     <script>function loaded (el) { el.classList.add('loaded') }</script> 

    </head> 
    <body onload="loaded(document.body)"> 

     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

    </body> 
</html>

주의 : 이것은, 요청 등의 HTML5/CSS3 솔루션! 구식 브라우저는 transitions 또는 classList 속성을 지원하지 않을 수 있습니다.

출처

2013-04-29 23:44:37 Ivo

+0

OK 고마워요. –

+0

@AsmeJust 무거운 자바 스크립트 프레임 워크로 가고 싶지 않다면, 나는 코드를 개정하고 게시물에 대한 예제를 포함 시켰습니다! – Ivo

+0

예, 좋은 예입니다. 감사합니다. –

1

당신은 전체 페이지가 전환 효과를 원한다면 :

$(document).ready(function() { 
     $("body").css("display", "none"); 
     $("body").fadeIn(2000); 
});

미리보기 jsFiddle : http://jsfiddle.net/tXeks/ 귀하의 예제의 예를 들어

출처

2013-04-29 23:42:16

+0

확인해 주셔서 감사합니다. 그러나 그것은 또한 움직이는 전이를 할 수 있습니까? –

+0

예 : http : // jsfiddle.net/tXeks/1/ jQuery 전환을 사용하여 필요에 맞는 전환을 찾아야합니다. –

+0

두 가지 예 모두 속도를 변경할 수 있습니까? –

0

, 순수 CSS 솔루션 :

a:hover { color:white; }

을

그러면 링크 텍스트 색상이 마우스 오버시 흰색으로 변합니다.

CSS 전환으로 애니메이션을 만들 수 있습니다. http://www.w3schools.com/css3/css3_transitions.asp

출처

2013-04-29 23:42:43

+0

글쎄 사실은 내가 필요하지 마라, 난 그냥 페이지의 첫 번째로드에 대한 전환이 필요, 감사합니다. –

1

물론.

간단히 jQuery 및 jQuery.blockUI 플러그인을 사용하고 같은 몇 가지 코드를 사용

<script language='javascript' type='text/javascript'> 
$(document).ready(function(){ 
    $.blockUI(); 
    $(window).load(function(){ 
     $.unblockUI(); 
    }); 
}); 
</script>

페이지 블록이 표시됩니다 준비이 경우에

, 전체 페이지가 로딩 될 때 블록이 단순히 숨겨진. :)

출처

2013-04-29 23:42:48

0

최상의 것은 일반 자바 스크립트를 사용하는 것입니다. 페이지 끝에서 자주로드되는 jquery, 페이지가로드되는 이벤트를 기다려야합니다. 본문 뒤에 추가

<script type="text/javascript"> 
    var sheet = document.createElement('style'); 
    sheet.innerHTML = "#main {opacity:0;}"; // your main content 
    element = document.getElementById('wrapper'); // your 'main content wrapper 
    element.appendChild(sheet); 
    setTimeout(function(){ 
    sheet.innerHTML = "#main {opacity:1;}"; 
    element.appendChild(sheet); 
    }, 400); // time to wait to start transition 
    </script> 
    <div class="wrapper"> 
     <div id="main">Magic happens here</div> 
</div>

출처

2015-09-18 09:27:04 fearis

웹 페이지를로드 할 때 전환을 추가하는 방법

답변

관련 문제