Une interface de losange animé pour rassembler quelques notes :
equatorium.net/e1/an--animations/an-losange.html
Enchaînement de durées "aléatoires" pour 'transition'
Chaîner des transitions CSS de durée pseudo-aléatoire sur le mode 'toggle' sans latence.
Avec une transition de 4000 millisecondes, paramétrer la fonction à (4000,0) :
Côté CSS :
p {
transition: 4s linear;
}
p.voici {
transform: etc;
}
Côté js :
var tirer = function(extension,decalage) {
p.className = p.className == "" ? "voici" : "";
var tirage = Math.floor(Math.random() * extension);
setTimeout(function() {
tirer(decalage + tirage,extension - tirage);
},tirage);
}
tirer(4000,0);
Centrer verticalement un élément de hauteur inconnue hors de '<td' ou de 'table-cel'
bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0;
cf. 6 Methods For Vertical Centering With CSS - Vanseo Design
Gestion de compatibilité
<style>
h1,
div {
display: none;
}
</style>
<script>
document.write("<style>h1,div{display: block;}</style>");
;window.Modernizr= //etc.
</script>
</head>
<body>
<noscript>Nécessite JavaScript</noscript>
<h1>(…)<div>(…)
<script>
(function() {
if (! Modernizr.csstransitions || ! Modernizr.csstransforms)
return document.body.innerHTML = "<p>Nécessite le support de CSS 3.</p>";
//etc.
})();
</script>
<!--[if lte IE 9]><script>document.body.innerHTML = "<p>Qu'aucun navigateur n'entre s'il n'est géomètre.</p>";</script><![endif]-->
PS : ratio du losange dans un carré
0.7071067811865476
càd Math.sqrt(c*c*2) / C
avec C pour la largeur du carré et c = C / 2
Aucun commentaire:
Enregistrer un commentaire