Comment puis-je contrôler les images clés WebKit avec des variables JavaScript ?

Contrôle des images clés Webkit avec des variables Javascript

Cet article répond à une requête sur l'utilisation de variables JavaScript pour contrôler les valeurs dans les images clés Webkit. Bien que l'insertion directe de variables dans CSS ne soit pas réalisable, il existe des méthodes alternatives pour y parvenir.

Dans le scénario fourni, des nombres aléatoires sont générés et destinés à être appliqués comme valeurs de rotation dans les images clés. Cependant, placer simplement les variables à la place des valeurs de rotation ne fonctionnera pas en CSS.

Au lieu de cela, la solution réside dans la création de règles CSS par programme à l'aide de JavaScript et dans leur insertion dans le modèle d'objet CSS (CSSOM). Une approche consiste à écraser une animation existante avec de nouvelles images clés basées sur les variables générées.

Un exemple JSFiddle illustre cette technique. Il exécute initialement une animation de rotation de -10 à 10 degrés, mais permet à l'utilisateur de générer des valeurs de rotation aléatoires entre -360 et 360 degrés en cliquant sur un bouton.

Cet exemple exploite les expériences antérieures de Simon Hausmann consistant à écraser les images clés de manière transparente dans navigateurs modernes comme Chrome et Safari. Cependant, la fonction de génération de nombres aléatoires est empruntée à Admixweb.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!