Frage von Ishidres, 13

Was für einen Code brauch ich für CSS/HTML/JavaScript, damit das so funktioniert...?

Hallo,

ich habe ein Bild und möchte es einstellen, dass wenn das Bild angeklickt wird, eine Animation erscheint, in der das Bild kurz größer und dann wieder kleiner wird.

Wenn möglich sollte es auch einstellbar sein, dass man das Bild nicht aus dem Fenster ziehen kann, also, dass ich es anklicke, gedrückt halte und dann beliebig rumziehen kann.

Viele Grüße, Ishidres

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Dory1, 10

html

<div class="bild"></div>
<div class="bild"></div>
<div class="bild"></div>

css

.bild {
width: 103px;
display: inline-block;
height: 103px;
background: red url(http://bilder.bild.de/fotos/bild-de-15401182/Bild/20.bild.png);
cursor: pointer;
}

.bild.scaleanim {
-webkit-animation: scaleanim 1s;
animation: scaleanim 1s;
}
@-webkit-keyframes scaleanim {
0% { transform: scale(1); }
50% { transform: scale(1.5) }
100% { transform: scale(1); }
}

@keyframes scaleanim {
0% { transform: scale(1); }
50% { transform: scale(1.5) }
100% { transform: scale(1); }
}

js

document.querySelectorAll(".bild")
  .forEach(function(bild) {
bild.addEventListener("click", function() {
if (bild.className == "bild") {
bild.className = "bild scaleanim";
setTimeout(function() {
bild.className = "bild";
}, 1000);
}
})
});

Demo: http://codepen.io/anon/pen/BzmExQ

Antwort
von regex9, 8

1. Bildgröße bei Klick animieren:

Du musst mit JS einen Event-Handler für das onclick-Event schreiben. In diesem erstellst du deine Animation, das Resizing kann bspw. über einen Timer (setTimeout) laufen. 

Einfacher geht es sicherlich, wenn du jQuery nutzt, da das Framework einige Methoden bereits anbietet, z.B. delay für eine kurze Verzögerung vor dem Ausführen der Animation und animate für die Animation selbst.

Ich würde wohl 2 JS-Objekte anlegen, mit den jeweiligen Properties width und height. Das eine Objekt repräsentiert den Normalzustand, das andere Objekt den Zustand der Vergrößerung. Der Normalzustand wird dem Bild zugeordnet (mit css) und eine boolsche Variable legt den Startzustand fest. Bei Klick auf das Bild wird in animate je nach Zustand der boolschen Variable die neue Größe via css zugewiesen und die boolsche Variable negiert. Nach einem delay wird das Gleiche erneut ausgeführt.


2. Image-drag verhindern:

Entweder du schreibst dir einen Event-Handler für ondragstart, der das Event verhindert:

document.getElementById("your-image").ondragstart = function() { return false; };

Oder du nutzt das CSS-Property pointer-events (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).


Keine passende Antwort gefunden?

Fragen Sie die Community