페이지로드시 페이드 인 효과를 위해 CSS 사용

442

CSS 전환을 사용하여 페이지로드시 텍스트 단락을 페이드 인 할 수 있습니까?

나는 그것이 http://dotmailapp.com/에서 보이는 방식을 정말로 좋아 하며 CSS를 사용하여 비슷한 효과를 사용하고 싶습니다. 도메인은 이후 구매되었으며 더 이상 언급 된 효과가 없습니다. 보관 된 사본은 Wayback Machine에서 볼 수 있습니다 .

삽화

이 마크 업이있는 경우 :

<div id="test">
    <p>This is a test</p>
</div>

다음 CSS 규칙을 사용하십시오.

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

로드시 전환을 어떻게 트리거 할 수 있습니까?

css css-transitions opacity

— 사용자 1556266
소스

당신은 이것을 읽을 수 있습니다 : bavotasan.com/2011/a-simple-fade-with-css3

— Edwin Bautista

또는이 : css-tricks.com/snippets/css/...

— raksheetbhat

답변:

914

방법 1 :

자체 호출 전환을 찾으려면 CSS 3 애니메이션 을 사용해야합니다 . 그것들도 지원되지 않지만 이것은 정확히 그들이 만든 것입니다.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

데모

http://jsfiddle.net/SO_AMK/VV2ek/

브라우저 지원

모든 최신 브라우저 및 Internet Explorer 10 이상 : http://caniuse.com/#feat=css-animation

방법 2 :

또는 jQuery (또는 일반 JavaScript; 세 번째 코드 블록 참조)를 사용하여로드시 클래스를 변경할 수 있습니다.

jQuery

$("#test p").addClass("load");

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 2s ease-in;
       -moz-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
         -o-transition: opacity 2s ease-in;
            transition: opacity 2s ease-in;
}

#test p.load {
    opacity: 1;
}

일반 JavaScript (데모가 아님)

document.getElementById("test").children[0].className += " load";

데모

http://jsfiddle.net/SO_AMK/a9dnW/

브라우저 지원

모든 최신 브라우저 및 Internet Explorer 10 이상 : http://caniuse.com/#feat=css-transitions

방법 3 :

또는 .Mail이 사용하는 방법을 사용할 수 있습니다 .

jQuery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

데모

http://jsfiddle.net/SO_AMK/a9dnW/3/

브라우저 지원

jQuery 1.x : 모든 최신 브라우저 및 Internet Explorer 6 이상 : http://jquery.com/browser-support/
jQuery 2.x : 모든 최신 브라우저 및 Internet Explorer 9 이상 : http : // jquery.com/browser-support/

이 방법은 대상 브라우저가 CSS 3 전환 또는 애니메이션 을 지원할 필요가 없으므로 가장 상호 호환됩니다 .

— AMK
소스

149

CSS3 애니메이션은 모든 최신 브라우저에서 잘 지원됩니다. 물론 IE는 최신 브라우저가 아닙니다.

— Rob

예, 그러나 IE6과 호환되도록하려면 어떻게해야합니까? 이 경우 jQuery가 가장 좋은 옵션이라고 생각합니다. 그러나 asker는 CSS로 원하므로 대안으로 게시했습니다.

— AMK

자바 스크립트에서 초기 불투명도를 0으로 설정하는 것이 가장 좋지 않습니까? 그렇게하면 사용자가 자바 스크립트를 비활성화하면 요소가 표시되지 않고 그대로 있습니다.

— 조나단.

@AMK 자바 스크립트에서만 "수정"을 시도했지만 관리하지 않았으므로 결국 별도의 CSS 파일을 만들어 요소에 opacity: 1 !important;넣었습니다 <noscript>.

— 조나단.

훌륭한 답변! 애니메이션을 $("#test p").addClass("load");여러 번 적용하는 것이 얼마나 어렵 습니까? $("#test p").removeClass('load').addClass("load");애니메이션이 이미 중지되었으므로 작업을 수행 하지 않습니다. JavaScript에서 다시 시작을 트리거 할 수 있습니까?

— Șerban Ghiță

당신은 사용할 수 있습니다 onload=""HTML 속성과 요소의 불투명도 스타일을 조정하기 위해 자바 스크립트를 사용합니다.

제안한대로 CSS를 그대로 두십시오. HTML 코드를 편집하여 다음을 수행하십시오.

<body onload="document.getElementById(test).style.opacity='1'">
    <div id="test">
        <p>This is a test</p>
    </div>
</body>

또한로드가 완료되면 전체 페이지를 페이드 인합니다.

HTML :

<body onload="document.body.style.opacity='1'">
</body>

CSS :

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

W3Schools 웹 사이트 : 전환 및 JavaScript를 사용한 스타일 변경에 대한 기사를 확인하십시오 .

— 네드
소스

좋은 대답입니다. 또는 요소에 직접 부하를 설정할 수 있다고 생각합니다. 처럼 <div id="test" onload="this.style.opacity='1'">. 전체 본문이로드되기 전에 이벤트가 트리거되었음을 의미하는지 확실하지 않습니다.

— Jeppe

jQuery없이 전환을 수행하는 방법에 대한 @AMK의 질문에 대한 답변. 내가 함께 던진 아주 간단한 예입니다. 좀 더 생각해 볼 시간이 있다면 JavaScript 코드를 완전히 제거 할 수 있습니다.

<style>
    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }
</style>

<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>

<body>
    <p>test</p>
</body>

— 롭
소스