"data-velocity" per CSS

C

Concilla

Mitglied
Hallo an alle, ich habe bei Codepen ein Script gefunden, welches ich gern für meine Fotogalerie einsetzen möchte.

https://codepen.io/lab21/pen/qxgMEY

Es soll hier aber eine kleine Änderung geben. Wäre es auf irgendeine Weise möglich, den Wert von data-velocity (z.B. -20), der sich im IMP-tag befindet, per CSS auszugeben? Ich benötige es, um per CSS den Wert steuern zu können.

<img src="https://images..." alt="" class="parallax-img" data-velocity="-20">

Ich würde mich sehr über Hilfe freuen und bedanke mich im Voraus.

Concilla
 
Ich verstehe das so, dass Du die Geschwindigkeit ändern willst, indem Du das data-Attribut im HTML irgend wie über das CSS beeinflusst. Da ist mir leider nichts bekannt, wie das möglich wäre. Mit Javascript wäre es kein Problem, das data-Attribut zu setzen bzw. zu ändern. Beschreibe doch mal den Hintergrund deiner Anforderung vielleicht gibt es ja eine andere, einfache Lösung.
 
Vielen Dank für Deine Antwort, Sempervivum.

Das Problem ist, dass derjenige, der die Seite dann administriert, keine Veränderungen in diesem data-Attribut durchführen kann. Einmal, weil der Upload der Fotos über das CMS stattfindet (Bilder werden hochgeladen, automatisch runtergerechnet) und ein andere Mal, weil die Person keinerlei Kenntnisse diesbezüglich hat. In einer anderen Fotogalerie steuere ich z.B. eine Animation über CSS so:

.wow {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.wow:nth-child(2n) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.wow:nth-of-type(3n) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.wow:nth-of-type(4n) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.wow:nth-of-type(5n) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}

Das funktioniert hervorragend. Nun wollte ich halt gern diese Script einsetzen und ebenfalls, wenn möglich über CSS steuer. Aber vielleicht geht ja Ähnliches über Javascript? Es würde ja genügen, wenn alle 4 oder 5 Bilder die Geschwindigkeit variiert.

Danke schon mal.
Concilla
 
Das ist schon mal sehr aufschlussreich. Das CSS, das Du da postest entspricht einem Schema, das allgemein gebräuchlich ist, nur arbeitet das Skript das Du jetzt hast, ganz anders und kann auf diese Weise nicht gesteuert werden. Würde es helfen, ein Javascript zu verwenden, in dem als erster Schritt für alle Bilder einheitlich die Geschwindigkeit in einer Variablen definiert ist und das Skript dann die data-Attribute in dem img-Elementen ändert?
Code: 
<script>
    // ueber die folgende Konstante wird die Geschwindigkeit fest gelegt
    const velocity = 10;
    // hier wuerde dann der Code folgen, der die Geschwindigkeit in die
    // data-Attribute uebertraegt
    // also Anweisung an den Seitenadministrator:
    // "den folgenden Code nicht aendern"
    
</script>
Als nächsten Schritt könnte man dann noch die Geschwindigkeit für die Bilder einzeln fest legen.
 
PS: Ich habe noch einen Blick auf das Skript im Codepen geworfen und wenn Du das ändern kannst, könnte man auf den Umweg über das data-Attribut verzichten und die Geschwindigkeit direkt übergeben. D. h. einfach diese Zeile löschen:
Code: 
             velocity = $(this).data('velocity');
dann würde die Konstante übernommen werden.
 
Ich denke, wenn ich es richtig verstanden habe, könnte es so weiterhelfen. Nur weiß ich natürlich nicht, wie es gemacht wird :-)

Die folgende Zeile wird gelöscht:

Code: 
velocity = $(this).data('velocity');

Und dafür dann das eingetragen:

Code: 
const velocity = 10;

Und wie beeinflusse ich nun die Geschwindigkeit?

Der Seitenadministrator bekommt das Script nicht zu Gesicht. Es wird ja dann ins Template gesetzt.
 
Die Geschwindigkeit wird direkt durch den Wert dieser Konstanten fest gelegt. Wenn der Seitenadministrator das Skript nicht zu Gesicht bekommen soll, würde es sich anbieten, diese Konstantendefinition in eine getrennte Datei zu legen, die der Seitenadmin dann editieren kann.
Dann natürlich nur die oben genannte Zeile löschen, das const velocity = 10; steht ja dann in der getrennten Datei.
 
Das verstehe ich nicht wirklich. Und wie ändere ich dann die Geschwindigkeit, wenn es eine Konstante gibt, die ja eine konstante Geschwindigkeit ausweist?
 
Die Konstante ist ja nur für die Laufzeit des Skriptes konstant, Du kannst sie durch Editieren jederzeit ändern, also const velocity = 10; in const velocity = 20; ändern, um die Geschwindigkeit zu verdoppeln.
 
Es sollte ja aber automatisiert ablaufen, so in der Art, wie in dem CSS-Beispiel. Also in etwa so: Jedes 2. Bild ist velocity = 20, jedes 3. Bild velocity = -10 und jedes 4. Bild velocity = 5.

Ob so etwas geht?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück