jquery/noscript pour fondre une page en

Comment cela se passe-t-il pour l'accessibilité? Je cherche une solution (raisonnablement) à l'épreuve des balles qui ne montre pas un flash du contenu avant de le cacher. J'ai essayé la solution acceptée sur ce poste (How to fade in an entire web page -- accessibly) et il semble bien fonctionner - tout ce qui me manque? En dehors de doctype et charset, etc.jquery/noscript pour fondre une page en

<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>

Source

2017-04-19 dave25

Cette solution a été à partir de 2011, ce jour et âge, vous pouvez probablement gérer la transition de fondu avec 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: Si vous êtes préoccupé par JS étant désactivé, vous pouvez aller à la pure approche CSS3 utilisant des animations . 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>

Le seul inconvénient est que la page n'est pas garanti d'avoir pleine charge au moment où vous êtes dans la décoloration. Peut-être Il faut ajouter une propriété animation-delay à votre CSS pour atténuer ce risque.

Source

2017-04-19 17:38:14 SteamDev

Mon souci est tout le "what ifs" - que se passe-t-il si javascript est désactivé, donc révéler n'est jamais ajouté en tant que classe, donc ils ne voient jamais rien? Voilà pourquoi j'ai ajouté la classe de caché dans un script en haut de – dave25

jquery/noscript pour fondre une page en

Répondre

Questions connexes