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
Tutoriel d'édition auto-apprentissage
10 Dec 2024
Apprendre vous-même des didacticiels de montage n'est pas difficile, suivez simplement ces étapes : Choisissez le bon logiciel de montage (par exemple Shotcut ou Adobe Premiere Pro) Trouvez un cours ou un didacticiel en ligne (par exemple YouTube, Udemy ou Coursera) Pratiquez et pratiquez Étudiez les techniques de montage (par ex. transitions, effets spéciaux et étalonnage de la chrominance) Obtenez des commentaires pour trouver des erreurs et améliorer vos clips Restez curieux d'en savoir plus sur les nouveaux logiciels, fonctionnalités et techniques
Quels sont les outils d'IA de Douyin ?
29 Nov 2024
Douyin fournit bon nombre de ses propres outils d'IA pour aider les créateurs à créer, éditer et promouvoir facilement du contenu, notamment : le montage intelligent, les effets spéciaux vidéo, la génération de sous-titres, la génération de couvertures et d'autres créations de contenu auxiliaire. Des recommandations intelligentes, des outils de révision de contenu et d’aide à la création améliorent la qualité du contenu et l’efficacité de sa diffusion. Les changeurs de voix et bien plus encore ajoutent de l'intérêt au contenu.
Comment « rendement » et « attente » gèrent-ils le flux de contrôle et l'état dans les opérations asynchrones .NET ?
14 Jan 2025
Comprendre le flux de contrôle dans .NET avec Yield et AwaitYield et wait, introduits dans .NET, fournissent du sucre syntaxique pour gérer le contrôle...
Comment puis-je trouver des voitures qui ont réussi tous les tests répertoriés ?
14 Jan 2025
Trouver les voitures qui ont réussi tous les tests dans une listeLa tâche à accomplir consiste à identifier les voitures à partir d'un tableau « voitures » qui ont réussi tous les tests...
Comment spécifier des noms personnalisés pour les valeurs Enum dans System.Text.Json ?
14 Jan 2025
System.Text.Json : Comment spécifier un nom personnalisé pour une valeur d'énumération ? Cette fonctionnalité n'est pas disponible par défaut dans .NET Core 3.0, .NET 5, .NET...
Pourquoi ne puis-je pas utiliser d'alias de colonne dans les expressions SELECT suivantes et comment puis-je y remédier ?
14 Jan 2025
Alias de colonne et expressions SELECTDans SQL, les alias de colonne sont utilisés pour fournir des noms temporaires aux colonnes de résultats, leur permettant d'être référencées...
Comment trouver les voitures qui ont réussi tous les tests (A, B, C, D) dans une base de données ?
14 Jan 2025
Sélectionnez un groupe de lignes correspondant à tous les éléments d'une liste. Considérez deux tableaux : voitures : répertorie les voitures avec leurs numéros de modèle correspondants.passedtest : enregistrements...
Comment Tablefunc peut-il gérer le pivotement de plusieurs variables pour éviter la perte de données ?
14 Jan 2025
Pivotement de plusieurs colonnes à l'aide de TablefuncQuestion : Comment tablefunc peut-il être exploité pour faire pivoter les données sur plusieurs variables, plutôt que d'utiliser uniquement le...
Comment C/CLI peut-il faciliter l'intégration transparente du code C dans les applications C# ?
14 Jan 2025
Intégration du code C dans C# : un guide complet via C/CLI L'intégration transparente du code C dans C# est depuis longtemps recherchée...
Outils chauds Tags
Hot Tools
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.