ページをフェードインするjquery/noscript

アクセシビリティのためにこれはどうですか？私はそれを隠す前にコンテンツのフラッシュを表示しない（合理的に）防弾ソリューションを探しています。私はこのポスト（How to fade in an entire web page -- accessibly）で受け入れられた解決策を試して、それはうまくいくように見える - 何かが紛失している？脇などDOCTYPEや文字セット、からページをフェードインするjquery/noscript

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script> 
     $(window).load(function() { 
      $('.hidden').fadeTo(2000, 1); 
     }); 
    </script> 
    <style> 
     .hidden { opacity:0; } 
     body > div { background:#ccc; position:absolute; top:20%; right:20%; bottom:20%; left:20%; padding:20px; } 
    </style> 
</head> 
<body> 
    <script>$("body").addClass("hidden");</script> 
    <div>hello world</div> 
</body> 
</html>

出典

2017-04-19 dave25

ソリューションは、2011年からあったことを、この日および年齢では、おそらくCSS3とフェードトランジションを扱うことができます。 https://jsfiddle.net/px9gjdc4/

CSS

body { 
    opacity: 0; /* start hidden, no flash of content */ 
    transition: opacity 2s; /* transition the opacity property */ 
} 

body.reveal { 
    opacity: 1; 
}

HTML

<body> 
    <script> 
    $(function(){ 
     $(window).load(function(){ 
     // add this class once page content has loaded 
     $('body').addClass('reveal'); 
     }); 
    }); 
    </script> 
    ... 
</body>

EDIT：あなたはJSが無効であることを懸念している場合は、アニメーションを使用して純粋 CSS3のアプローチを行くことができます。 https://jsfiddle.net/px9gjdc4/2/

CSS

body { 
    opacity: 0; /* start hidden, no flash of content */ 
    animation-name: reveal; 
    animation-duration: 3s; 
    animation-fill-mode: forwards; 
} 

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

HTML

<body>...</body>

唯一の欠点は、ページが完全にあなたが退色している時間によって読み込まれていることが保証されていないことである。ことかもしれませんそのリスクを軽減するためにCSSにanimation-delayプロパティを追加する価値があります。

出典

2017-04-19 17:38:14 SteamDev

私の関心事はすべて「what ifs」です.Javascriptが無効になっているとどうなりますか？公開は決してクラスとして追加されないので、何も見えません。それで、私はの上にあるスクリプトで隠されたクラスを追加したのです – dave25

ページをフェードインするjquery/noscript

答えて

関連する問題