20 septembre 2014

Notes d'animation et de stylage

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: