localisation actuelle: Maison > Télécharger > Effets JS > effets spéciaux HTML5 > Effets de fond d'animation de magma HTML5
Effets de fond d'animation de magma HTML5
Classer: Effets JS / effets spéciaux HTML5 | Temps de libération: 2017-12-23 | visites: 1560 |
Télécharger: 55 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Le défi de la création d'applications Web avec les frameworks Node.js
- 2 Sur quelles bourses les pièces CFX peuvent-elles être achetées ?
- 3 Qu'est-ce qui différencie Wrapped Dog des autres dogecoins ?
- 4 Découvrez l’origine de la monnaie FTM dans un seul article
- 5 Supercharge Your Web Animations: Optimize requestAnimationFrame Like a Pro
- 6 La devise EOS vaut-elle la peine d’être conservée à long terme ?
- 7 Écrire du code propre, efficace et maintenable - Python comme cas d'utilisation.
- 8 Tutoriel d'utilisation du portefeuille froid Coldlar : Comment utiliser le portefeuille froid Coldlar de la manière la plus sûre ?
- 9 Les nouvelles fuites du Kindle de 12e génération seront disponibles dans un magnifique coloris vert
- 10 Sony révèle un nouvel événement de lancement pour les nouveaux haut-parleurs LinkBuds, LinkBuds S et LinkBuds
- 11 Quelle devise est le FTM ?
- 12 Epic Games Store offre un jeu indépendant attachant dans le cadre d'une offre hebdomadaire de jeux gratuits
- 13 Garmin publie une nouvelle mise à jour pour plusieurs montres intelligentes visant à corriger les plantages d'activité
- 14 Comment réussir à investir dans les tokens SEI ?
- 15 Tutoriel d'utilisation du portefeuille froid iToken : Comment utiliser le portefeuille froid iToken de la manière la plus sûre ?
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1699 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1582 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2420 2024-03-29
<!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.