Effets de fond d'animation de magma HTML5
Effets de fond d'animation de magma HTML5
<!doctype html>
<html>
<tête>
<meta charset="utf-8">
<title>
<style>
@charset "UTF-8"?;
*, *:avant, *:après {
? dimensionnement de la bo?te?:?border-box?;
}
corps {
? remplissage?: 0?;
? marge?: 0;
? débordement?: caché?;
? famille de polices?:?'Roboto', sans-serif?;
}
toile {
? largeur : 100vw;
? hauteur : 100vh;
}
h1 {
? position?: absolue?;
? indice z?:?1?;
? largeur?: 100?%?;
? gauche?: 0;
? haut?: 50?%?;
? -webkit-transform?: traduireY(-50%)?;
? ? ? ? ? transformer?: traduireY(-50%)?;
? mix-blend-mode?: superposition?;
? couleur?: rgba (0, 0, 0, 0,3);
? hauteur de ligne?:?0;
? taille de la police?: 16?px?;
? espacement des lettres?:?4?px?;
? text-align: center;
? transformation de texte?: majuscule?;
? transformer?: traduireY(-50%)?;
? curseur?: pointeur?;
? -webkit-transition?: couleur .2s facilité d'entrée?;
? transition?: couleur .2s facilité d'entrée?;
? -webkit-user-select?: aucun?;
? ? ?-moz-user-select?: aucun?;
? ? ? -ms-user-select?: aucun?;
? ? ? ? ? sélection par l'utilisateur?: aucun?;
}
h1?:?survolez {
? couleur?: rgba (0, 0, 0, 0,8);
}
</style>
</tête>
<corps>
<script src="js/chroma.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<id de toile="canvas"></canvas>
<h1>Le sol est en lave</h1>
<script>
'utilisez strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Impossible d'appeler une classe en tant que fonction"); } }
paramètres var = {
? amplitudeX?: 150,
? amplitudeY?: 20,
? lignes : 30,
? Couleur de départ?: '#500c44',
? couleur de fin?: '#b4d455'
};
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var Chemins = [];
var couleur = [];
var sourisY = 0;
var mouseDown = faux;
var temps = 0;
courbes var = non défini?;
var vitesse = indéfini?;
var Chemin = fonction () {
? function Chemin(y, couleur) {
? ? _classCallCheck(this, Chemin);
? ? ceci.y = y;
? ? this.color = couleur;
? ? this.root = [];
? ? this.create();
? ? this.draw();
? }
? Path.prototype.create = function create() {
? ? var racineX = 0;
? ? var rootY = this.y;
? ? this.root = [{ x?: rootX, y?: rootY }];
? ? while (rootX < winW) {
? ? ? var casual = Math.random() > 0,5 ? 1 : -1;
? ? ? var x = parseInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
? ? ? var y = parseInt(rootY + casual * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
? ? ? racineX += x;
? ? ? var délai = Math.random() * 100;
? ? ? this.root.push({ x : rootX, y : y, hauteur : rootY, casual : casual, delay : delay });
? ? }
? };
? Path.prototype.draw = fonction draw() {
? ? ctx.beginPath();
? ? ctx.moveTo(0, winH);
? ? ctx.lineTo(this.root[0].x, this.root[0].y);
? ? pour (var i = 1; i < this.root.length - 1; i++) {
? ? ? var x = this.root[i].x;
? ? ? var y = this.root[i].y;
? ? ? var nextX = this.root[i + 1].x;
? ? ? var nextY = this.root[i + 1].y;
? ? ? var xMid = (x + prochainX) / 2;
? ? ? var yMid = (y + nextY) / 2;
? ? ? var cpX1 = (xMid + x) / 2;
? ? ? var cpY1 = (yMid + y) / 2;
? ? ? var cpX2 = (xMid + nextX) / 2;
? ? ? var cpY2 = (yMid + nextY) / 2;
? ? ? ctx.quadraticCurveTo(cpX1, y, xMid, yMid);
? ? ? ctx.quadraticCurveTo(cpX2, nextY, nextX, nextY);
? ? }
? ? var lastPoint = this.root.reverse()[0];
? ? this.root.reverse();
? ? ctx.lineTo(lastPoint.x, lastPoint.y);
? ? ctx.lineTo(winW, winH);
? ? ctx.fillStyle = this.color;
? ? ctx.fill();
? ? ctx.closePath();
? };
? Chemin de retour?;
}();
/* INIT */
var chemin = non défini?;
fonction init() {
? c.width = winW;
? c.hauteur = winH;
? Chemins = [];
? color = chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);
? document.body.style = 'background: ' + settings.startColor;
? pour (var i = 0; i < settings.lines; i++) {
? ? Paths.push(new Path(winH / settings.lines * i, color[i]));
? ? settings.startY = winH / settings.lines * i;
? }
}
/* GAGNEZ LE REDIMENSIONNEMENT */
window.addEventListener('resize', function() {
? winW = window.innerWidth;
? winH = window.innerHeight;
? c.width = winW;
? c.hauteur = winH;
? init();
});
window.dispatchEvent(new Event("resize"));
/* RENDU */
fonction render() {
? c.width = winW;
? c.hauteur = winH;
? courbes = mouseDown ? 2 : 4;
? vitesse = mouseDown ? 6 : 0,8;
? temps += mouseDown ? 0,1 : 0,05;
? Paths.forEach(function (chemin, i) {
? ? chemin.root.forEach(fonction (r, j) {
? ? ? si (j % courbes == 1) {
? ? ? ? var move = Math.sin(time + r.delay) * vélocité * r.casual;
? ? ? ? r.y -= bouger / 2 - bouger?;
? ? ? }
? ? ? si (j + 1 % courbes == 0) {
? ? ? ? var move = Math.sin(time + r.delay) * vélocité * r.casual;
? ? ? ? r.x += déplacement / 2 - déplacement / 10;
? ? ? }
? ? });
? ? path.draw();
? });
? requestAnimationFrame(render);
}
rendre();
/* SOURIS */
'mousedown touchstart'.split(' ').forEach(function (e) {
? document.addEventListener(e, function() {
? ? mouseDown = vrai?;
? });
});
/* SOURIS */
'mouseup mouseleave touchend'.split(' ').forEach(function (e) {
? document.addEventListener(e, function() {
? ? mouseDown = faux?;
? });
});
/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(function (e) {
? document.addEventListener(e, fonction (e) {
? ? sourisY = e.clientY || e.touches[0].clientY;
? });
});
/* GUI DE DONNéES */
var gui = fonction datgui() {
? var gui = new dat.GUI();
? // dat.GUI.toggleHide();
? gui.closed = true;
? gui.add(settings, "amplitudeX", 40, 200).step(20).onChange(function (newValue) {
? ? init();
? });
? gui.add(settings, "amplitudeY", 0, 100).step(1).onChange(function (newValue) {
? ? init();
? });
? gui.add(settings, "lines", 5, 50).step(1).onChange(function (newValue) {
? ? init();
? });
? gui.addColor(settings, "startColor").onChange(function (newValue) {
? ? init();
? ? document.querySelector('h1').innerHTML = 'ou ce que vous voulez';
? });
gui.addColor(settings, "endColor").onChange(function (newValue) {
init();
document.querySelector('h1').innerHTML = 'ou ce que vous voulez';
});
retourner l'interface graphique?;
}();
</script>
</corps>
</html>
Il s'agit d'un bon effet d'arrière-plan d'animation magmatique HTML5 qui peut définir les propriétés de l'animation. Développez le menu en haut à droite de la page Web pour définir l'amplitude, la couleur et d'autres propriétés de l'animation.
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel?! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe
Effets de transition de page HTML5
23 Jul 2025
L'effet de commutation de page peut être obtenu via CSS3 et JavaScript. Les étapes spécifiques sont: 1. Utilisez CSS pour définir les styles de transition, tels que les attributs de transition ou d'animation pour contr?ler l'entrée de la page et l'animation de sortie; 2. Ajouter ou supprimer dynamiquement les noms de classe lors de la commutation de page via JavaScript pour réaliser des mises à jour de déclenchement d'animation et de contenu; 3. Faites attention à l'optimisation des performances, évitez la gigue de mise en page et utilisez raisonnablement l'accélération matérielle et le préchargement des ressources. De plus, vous pouvez également utiliser des conteneurs mondiaux pour gérer uniformément les transitions, utiliser les variables CSS pour améliorer la flexibilité et définir des animations diversifiées pour différentes pages, afin d'obtenir des effets de commutation de page riches et lisses tout en garantissant l'expérience utilisateur.
Utilisation du filtre de fond CSS pour des effets uniques
12 Jul 2025
Le filtre en arrière-plan peut améliorer la hiérarchie des pages Web via un flou et d'autres effets, et convient aux fenêtres, aux cartes et aux autres composants pop-up. 1. Utilisez un flou pour obtenir l'effet du verre givré, tel que .Modal {Filtre de toile de fond: flou (10px); Color d'arrière-plan: RGBA (255 255.255,0.6);}, et il est recommandé d'ajouter le -webkit-prefix pour améliorer la compatibilité; 2. La combinaison de plusieurs fonctions de filtre telles que la luminosité, le contraste, etc. peut créer un style visuel plus riche, mais faire attention à l'ordre affectant l'effet; 3. Faites attention à l'impact de la consommation de performances, de la compatibilité du navigateur et de la structure de la hiérarchie sur l'effet d'affichage et adoptez une solution de rétrogradation pour assurer la page
Utilisation du filtre de fond CSS pour les effets d'interface utilisateur
23 Apr 2025
Conseils et astuces sur l'utilisation de la propriété CSS Back-Filter pour styliser les interfaces utilisateur. Vous apprendrez à superposer des filtres en toile de fond entre plusieurs éléments et à les intégrer à d'autres effets graphiques CSS pour créer des conceptions élaborées.
Comment l'attribut de longueur de chemin SVG affecte-t-il les effets de dessin de chemin et d'animation?
05 Apr 2025
SVG ...
Utilisation de travailleurs Web HTML5 pour les taches de fond
05 Jul 2025
Les travailleurs Web empêchent la congélation des pages en exécutant JavaScript dans un fil séparé. Il convient aux taches telles que le chiffrement des données, le traitement d'image et l'informatique complexe. Lorsque vous l'utilisez, vous devez créer un fichier séparé (tel que worker.js) et communiquer via PostMessage () et OnMessage. Cependant, le travailleur ne peut pas accéder aux objets DOM, fenêtres ou documents, et il ne peut pas mettre à jour directement l'interface utilisateur. De plus, le travailleur doit être chargé via HTTP (s) et doit être réutilisé autant que possible pour réduire les frais généraux et faire attention aux erreurs de traitement et à l'optimisation de la taille des messages.
Filtre de toile de fond indisponible?: comment obtenir des effets d'arrière-plan flou dans les navigateurs modernes??
28 Oct 2024
Solution de contournement CSS?: une solution temporaire pour le filtre de fond insaisissable. Bien qu'il s'agisse d'une fonctionnalité CSS prometteuse, le filtre de fond reste hors de portée...
Comment réaliser des effets d'animation (tels que la transformation 3D, l'animation de transition) via CSS?
20 May 2025
Le CSS peut réaliser des effets d'animation par des propriétés de transition et d'animation. Les étapes spécifiques sont les suivantes: 1. Utilisez des propriétés de transition pour obtenir des effets de transition simples, tels que l'amélioration des couleurs plus gros et modifiée lorsque le bouton est plané. 2. Utilisez des propriétés de transformation et de perspective pour implémenter la transformation 3D, comme la création et la rotation des cubes. 3. Optimiser les performances de l'animation. Il est recommandé d'utiliser l'attribut de changement de volonté pour réduire la complexité de l'animation et d'utiliser la vigueur de demande pour contr?ler la fréquence d'images.
Appliquer des filtres en toile de fond pour des effets comme le verre givré avec CSS
09 Jul 2025
Pour obtenir l'effet de verre givré, l'utilisation de l'attribut de filtre en arrière-plan de CSS est le moyen le plus direct. 1. Définissez une couleur d'arrière-plan translucide sur l'élément, comme RGBA; 2. Ajouter un filtre de fond et définir la valeur de flou pour réaliser un flou; 3. Il est recommandé d'ajouter -webkit-backdrop-filtre pour être compatible avec Safari; 4. Assurez-vous que le conteneur parent a un contenu ou un arrière-plan réel, sinon l'effet flou ne sera pas visible. Les notes comprennent: les frais généraux de performance sont élevés, en particulier sur les terminaux mobiles, la surutilisation doit être évitée; Les anciennes versions de IE ne soutiennent pas, Safari doit être préfixée; Les filtres multiples peuvent être combinés pour améliorer les effets visuels, tels que l'application des ajustements de flou et de saturation en même temps.
Travailler avec des travailleurs Web HTML5 pour des taches de fond
08 Jul 2025
L'utilisation de travailleurs Web peut améliorer les performances des pages Web. Les considérations incluent: 1. Le travailleur ne peut pas accéder à DOM; 2. La communication doit se passer par le post-message et l'oncessage; 3. Les scripts doivent être homologues; 4. Convient pour gérer des taches d'occupation CPU élevées telles que le chiffrement, l'analyse des données, le traitement audio et vidéo; 5. évitez la transmission des mégadonnées et peut être traitée par ArrayBuffer ou Blocks; 6. Il est nécessaire de gérer manuellement le cycle de vie et de le détruire à temps pour éviter les fuites de mémoire.
Outils chauds Tags
Outils chauds
Effets spéciaux d'animation de battement de coeur sur toile HTML5
L'effet spécial d'animation de c?ur flottant sur HTML5 Canvas est une animation générée qui peut être directement ouverte avec un navigateur pour voir un c?ur.
Code source du jeu rebondissant H5 Panda
HTML5 Mobile Panda est aussi un code source de jeu fou. Description du jeu : Appuyez et maintenez l'écran pour régler la force du ressort panda et sauter vers le pilier de pierre. Le jeu se termine si vous tombez dans la rivière.
Effets spéciaux d'animation de bo?te HTML5 pour la Saint-Valentin
Basé sur SVG, dessinez des animations d'ouverture de cadeaux de bo?te d'amour le jour de la Saint-Valentin et des effets spéciaux d'animation de bo?te d'amour.
Code source du jeu de balle roulante H5 3D
Téléchargement de code de jeu mobile HTML5 cool à billes 3D. Introduction au jeu?: Une boule colorée roule et la trajectoire actuelle de la boule colorée est contr?lée en la faisant glisser avec la souris ou l'écran tactile du téléphone mobile. Il s'agit d'un code source de jeu mobile simple et facile à utiliser.