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 d'animation de déformation de texte HTML5 SVG sympas
18 Jan 2017
Il s'agit d'un effet d'animation de déformation de texte HTML5 SVG très cool. Cet effet spécial utilise SVG et anime.js pour compléter divers effets spéciaux d'animation de lettres magnifiques grâce à l'animation de traits SVG.
Une appréciation graphique et textuelle de 8 superbes effets spéciaux d'animation de texte HTML5
06 Mar 2017
Le texte est l’âme des pages Web. Il y a longtemps, quelqu’un a inventé de nombreuses belles polices informatiques, qui donnaient aux pages Web des styles différents. Avec l'émergence du HTML5 et du CSS3, nous pouvons personnaliser le texte. Dans certaines situations, lorsque cela est nécessaire, nous pouvons même utiliser HTML5 pour animer le texte. Cet article partage 8 très beaux effets spéciaux d'animation de texte HTML5, j'espère qu'il pourra être utilisé comme référence pour vous. 1. Animation de texte pliable et retourné 3D CSS3 Aujourd'hui, nous allons partager une application d'effets spéciaux de texte CSS3. Elle est similaire aux effets de texte HTML5/CSS3 partagés auparavant. Il s'agit également d'une animation de texte pliée et retournée 3D CSS3. .
Introduction détaillée à 7 étonnants effets spéciaux d'animation de particules HTML5
06 Mar 2017
L'un des grands avantages du HTML5 est qu'il peut créer plus facilement et plus efficacement des effets spéciaux d'animation de particules sur les pages Web, en particulier la fonctionnalité Canvas, qui peut dessiner n'importe quel graphique et animation sur les pages Web. Cet article partagera 7 effets d'animation de particules HTML5 étonnants. Ces effets de particules permettent de télécharger le code source pour que tout le monde puisse l'apprendre. 1. Effet de simulation de particules HTML5 Canvas Il s'agit d'une animation de 30 000 particules simulée à l'aide de HTML5 Canvas. Lorsque vous déplacez la souris sur la toile, certaines particules autour de la souris se déplacent avec vous et forment un certain motif, tout comme si vous jouiez avec de la peinture sur sable. , l'effet...
Introduction détaillée à 7 superbes effets d'animation de chargement HTML5
07 Mar 2017
Lorsque nous transmettons du Big Data ou attendons des opérations complexes, il est préférable d'avoir une petite animation de chargement pour le rappeler à l'utilisateur. Cet article partagera avec vous de superbes effets d'animation de chargement basés sur HTML5. J'espère que vous l'aimerez. 1. HTML5 Canvas implémente une animation de chargement super cool. Cette fois, nous examinons un effet de chargement d'animation de chargement très cool. Il est similaire à l'animation de chargement d'engrenage implémentée en CSS3 pur. Il s'agit également d'une animation. similaire à la rotation. Démonstration en ligne Téléchargement du code source 2. HT..
Détails du code de l'exemple d'animation du logo HTML5 rotatif 3D multi-vues
04 Mar 2017
Il s'agit d'un effet spécial d'animation 3D basé sur HTML5 et CSS3. Différent des effets spéciaux 3D précédents, celui-ci est entièrement implémenté en utilisant les fonctionnalités HTML5 au lieu de superposer plusieurs images. Une autre caractéristique de cette animation 3D est qu'elle peut pivoter à l'infini, de sorte que le logo HTML5 puisse être observé sous plusieurs perspectives. Téléchargement du code source de la démo en ligne Code HTML <div class='link-overlay'> </div> <canvas id='canvas' style='background-c..
Démonstration du code graphique de l'effet d'animation HTML5 Canvas
22 Mar 2017
Démontrer des compétences en dessin d'animation basées sur HTML5 Canvas pour obtenir des effets de lecture d'images. Il démontre également les compétences de base du déplacement d’objets.
Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 8, effets de particules de traitement d'image
17 Jan 2017
En utilisant une syntaxe de type ActionScript pour écrire la série html5, vous devriez pouvoir créer quelque chose maintenant. Étudions d'abord les différents effets des images.
Introduction détaillée à l'exemple de code d'animation de graphique de focus de lecture d'éléments personnalisés HTML5
06 Mar 2017
Il s'agit d'une animation d'image ciblée basée sur HTML5. Ce qui la différencie des autres images ciblées, c'est qu'elle lit non seulement des images, mais aussi des éléments Web qui peuvent être personnalisés et contrôlés. Il a non seulement un effet d'animation de transition lors du passage d'une image à l'autre, mais les éléments de l'image auront également des effets d'animation lors du changement, tels que le déplacement, la rupture, le regroupement du texte dans l'image, etc. Ce lecteur d'images animées HTML5 peut être considéré comme haut de gamme et élégant. Téléchargement du code source de la démonstration en ligne Code HTML <div class='parallax-bg' id='slider-wrap'> <div ..
Introduction détaillée au partage de code source d'applications d'animation HTML5/CSS3 sélectionnées
08 Mar 2017
Cet article partagera des informations utiles pour les développeurs Web. Si vous êtes passionné par le développement de HTML5 et CSS3, vous serez certainement intéressé par les applications d'animation HTML5 suivantes. Tout en fournissant une démonstration, cet article affichera et analysera également certains codes de base. J'espère qu'il vous plaira. Le menu d'animation dégradé de la boîte jQuery est tout à fait unique dans sa forme de présentation. Il n'est pas disposé verticalement ou horizontalement comme les autres menus, mais est disposé dans une grille rectangulaire, et vous pouvez cliquer sur l'élément de menu pour développer les informations détaillées du menu dans une animation. façon. , en utilisant CSS3 pour produire des effets d'animation très sympas. Code source de démonstration DEMO.
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.