JS-Spezialeffekte
HTML5-Spezialeffekte
HTML5-Spezialeffekte für kreisförmige Wellenladeanimationen
HTML5-Spezialeffekte für kreisförmige Wellenladeanimationen
HTML5-Spezialeffekte für kreisförmige Wellenladeanimationen
Der Spezialeffekt der HTML5-Animation zum Laden kreisförmiger Wellen ist eine native HTML5 CSS3 Canvas-Wellenbewegungsanimation mit ansteigendem Laden und kreisförmigem Ladecontainereffekt.
var wave = (function () {
var ctx;var waveImage;
var canvasWidth;
var canvasHeight;
var needAnimate = false;
Funktion init (Rückruf) {
var wave = document.getElementById('wave');
var canvas = document.createElement('canvas');
if (!canvas.getContext) return;
ctx = canvas.getContext('2d');
canvasWidth = wave.offsetWidth;
canvasHeight = wave.offsetHeight;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
wave.appendChild(canvas);
waveImage = new Image();
waveImage.onload = function () {
waveImage.onload = null;
callback();
}
waveImage.src = 'images/wave.png';
}
Funktion animieren () {
var waveX = 0;
var waveY = 0;
var waveX_min = -203;
var waveY_max = canvasHeight * 0.7;
var requestAnimationFrame =
window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };
Funktionsschleife () {
ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
if (!needAnimate) return;
if (waveY < waveY_max) waveY = 1,5;
if (waveX < waveX_min) waveX = 0; else waveX -= 3;
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(waveImage, waveX, canvasHeight - waveY);
requestAnimationFrame(loop);
}
loop();
}
Funktion start () {
if (!ctx) return init(start);
needAnimate = true;
setTimeout(function () {
if (needAnimate) animate();
}, 500);
}
Funktion stop () {
needAnimate = false;
}
return {start: start, stop: stop};
}());
wave.start();
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Spezialeffekte für Textanimationen basierend auf HTML5 Canvas
02 Apr 2018
Dieser Artikel teilt Ihnen die auf HTML5 Canvas basierenden Textanimations-Spezialeffekte mit. Es ist sehr nützlich, dass Freunde es als Referenz verwenden können.
16 May 2016
In diesem Artikel werden hauptsächlich die Uhr-Spezialeffekte von Jquery HTML5 vorgestellt, mit denen Wecker eingestellt und Spracherinnerungen bereitgestellt werden können. Es wird jedem empfohlen, der sich darauf bezieht.
Ausgewählter Code für HTML5-Spezialeffekte (Sammlung)
01 Mar 2019
Im Webdesign-Prozess verwenden wir häufig einige HTML5-Spezialeffektcodes, die von der chinesischen PHP-Website zusammengestellt und geteilt werden. Sie können sie gerne in Ihren Anwendungen verwenden.
HTML5 Canvas-Spezialeffekte für mobile Verlosungen
18 Jan 2017
Dies ist ein Spezialeffekt für die Verlosung, der auf JQuery und HTML5 Canvas basiert. Der Glückspreis-Spezialeffekt unterstützt mobile Endgeräte. Er generiert eine Hauptpreisscheibe durch dynamisches Erstellen von Canvas-Elementen und erhält zufällige Preise über JQuery-Code.
So verwenden Sie HTML5 + CSS3, um Spezialeffekte für Textanimationen mit Partikeleffekten zu erzielen (vollständiger Code im Anhang)
25 Sep 2018
Wenn wir Webseiten durchsuchen, werden wir feststellen, dass die heutigen Webseiten immer schöner werden und viele Animationsspezialeffekte immer cooler werden. Dies ist untrennbar mit der tiefgreifenden Entwicklung von HTML5 und CSS3 verbunden. Heute werden wir einen auf HTML5 und CSS3 basierenden Texteffekt vorstellen – einen Textanimationseffekt mit Partikeleffekt. Der Inhalt dieses Artikels befasst sich mit der Verwendung von HTML5 + CSS3 zum Erzielen von Spezialeffekten für Partikeleffekte. Freunde in Not können sich darauf beziehen.
Verwenden Sie HTML5/CSS3, um in fünf Schritten (Bilder und Text) schnell Codebeispiele für Spezialeffekte für Haftnotizen zu erstellen.
20 Mar 2017
In diesem Artikel erfahren Sie, wie Sie mit HTML5/CSS3 in nur 5 Schritten eine HTML-Seite mit einem Haftnotizeffekt erstellen.
HTML5-Imitation der offiziellen AMD9-Website, Beispielcode für coole Download-Anleitungsseite, Animations-Spezialeffekte
01 Apr 2017
Ich habe immer am Backend gearbeitet, aber in letzter Zeit bin ich immer noch ein wenig daran interessiert, dass H5 sehr beliebt ist, also habe ich HTML5 verwendet, um den Fall der coolen Download-Guide-Seite mit Spezialeffekten auf der offiziellen AMD9-Website zu imitieren Teilen Sie es unten mit. Natürlich bin ich nur ein Anfänger.
27 May 2017
Bitte verwenden Sie die von html5canvas implementierte Uhr als Referenz
Detaillierte Einführung von 20 wunderschönen HTML5/CSS3-Anwendungs-Plug-Ins (Bilder)
09 Mar 2017
Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos, starke visuelle Wirkung Es gibt viele HTML5-Video-Spezialeffekte, aber diese Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie auf eine beliebige Stelle im Video, und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese zerbrochenen Videofragmente automatisch wieder zusammengesetzt. Es ist ein sehr gutes HTML5-Video.
Hot Tools
HTML5-Canvas-Herzflattern-Animations-Spezialeffekte
Der HTML5 Canvas-Spezialeffekt „Herzflattern-Animation“ ist eine generierte Animation, die direkt mit einem Browser geöffnet werden kann, um ein Herz zu sehen.
Quellcode des H5-Panda-Bounce-Spiels
HTML5 Mobile Panda ist auch ein verrückter Spielquellcode. Spielbeschreibung: Halten Sie den Bildschirm gedrückt, um die Stärke der Panda-Feder anzupassen und zur Steinsäule zu springen. Das Spiel endet, wenn Sie in den Fluss fallen.
HTML5-Valentinstag-Box-Animations-Spezialeffekte
Zeichnen Sie basierend auf SVG Animationen zum Öffnen von Liebesbox-Geschenken am Valentinstag und Spezialeffekte für Liebesbox-Animationen.
Quellcode des H5 3D Rolling Ball-Spiels
HTML5 cooler 3D-Ball-Rolling-Handyspielcode herunterladen. Spieleinführung: Ein farbiger Ball rollt und die aktuelle Bahn des farbigen Balls wird durch Ziehen mit der Maus oder dem Touchscreen des Mobiltelefons gesteuert. Dies ist ein einfacher und leicht zu bedienender Quellcode für Mobilspiele.