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

Program / 글쓴이

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;
}​

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

답변

방법 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; }
}

데모

브라우저 지원

모든 최신 브라우저 및 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";

데모

브라우저 지원

모든 최신 브라우저 및 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;
}

데모

브라우저 지원

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

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

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

답변

당신은 사용할 수 있습니다 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를 사용한 스타일 변경에 대한 기사를 확인하십시오 .

답변

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>

답변