explosion

Ich habe noch eine Alternative gefunden. ein Jquery plugin. Damit kann man Bilder explodieren lassen.

https://www.jqueryscript.net/animation/Create-An-Image-Explosion-Effect-In-jQuery-imgexplode-js.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
<script src="jquery.imgexplode.js"></script>

<title>Move to Click Position</title>
<style type="text/css">
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
border: 1px red solid;
background-color : #FFEFDB;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

function explode() {
$("ballon0.png").explodeRestore();
setTimeout(function () {
$("ballon0.png").explode({
maxWidth: 12,
minWidth: 3,
radius: 331,
release: false,
recycle: false,
explodeTime: 400,
canvas: true,
maxAngle: 360,
gravity:false,
});
}, 300)
}
explode();
</script>
</body>
</html>
Auf der Webseite funktioniert es. Hier kommen 2 Fehlermeldung
Laden fehlgeschlagen und Type error
 
Da ist ein wesentlicher Fehler: Du musst ein im-Tag anlegen und dessen Selektor als Parameter an $ übergeben, nicht die URL des Bildes. So funktioniert es:
Code: 
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
    <script src="js/jquery.imgexplode.min.js"></script>

    <title>Move to Click Position</title>
    <style type="text/css">
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<img id="ballon" src="images/ballon2.jpg">    <script>

        function explode() {
            $("#ballon").explodeRestore();
            setTimeout(function () {
                $("#ballon").explode({
                    maxWidth: 12,
                    minWidth: 3,
                    radius: 331,
                    release: false,
                    recycle: false,
                    explodeTime: 400,
                    canvas: true,
                    maxAngle: 360,
                    gravity: false,
                });
            }, 300)
        }
        explode();
    </script>
</body>

</html>
Damit es gut aussieht, musste ich den Ballon isolieren und die Schnur wegnehmen, siehe Anhang.ballon2.jpg
 
Neue html Datei angelegt.
Dein Script rein geladen
Fehlermeldung

Laden fehlgeschlagen für das <script> mit der Quelle "file:///C:/xampp/htdocs/js/jquery.imgexplode.min.js".

Verstehe Bahnhof
 
Du musst den Pfad für die JS-Datei anpassen, denn Du hast diese offenbar im selben Verzeichnis wie die HTML-Datei:
<script src="jquery.imgexplode.js"></script>
d. h. so wie in deinem ursprünglichen Pfad. Überprüfe auch Pfad und Dateiname der Bilddatei.
 
Sehr schön. Klappt. Dank dir!

It's been a hard day's night
And I've been working like a dog
It's been a hard day's night
I should be sleeping like a log
 
Wenn ich diesen Code in das Programm einbringe bekomme ich die Meldung

TypeError: $(...).explodeRestore is not a function[Weitere Informationen]
 
Hatte ich gemacht.
Hab beide Teile noch einmal zusammengefügt. Dann - O Wunder _ lief es.
Dank dir
Schönen Sonntag
 
Irgendwie sind für mich das Plugin explosion und jcanvas nicht kompatibel
bei exploision arbeite ich mit img.tag und bei jvanvas mit
layer. Zwei Welten?
 
Das sind allerdings zwei Welten. Wenn Du dieses Plugin benutzen willst, musst Du einen Eventlistener in jCanvas für den Click registrieren. Darin kannst Du die x- und y-Position des Ballons auslesen und ein zweites Bild mit einem img-Tag auf dem selben Ort über dem Canvas positionieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück