"data-velocity" per CSS

[Sempervivum]

Ja, das geht. Ich hatte dies:

Es würde ja genügen, wenn alle 4 oder 5 Bilder die Geschwindigkeit variiert.

nicht richtig gelesen und dachte, die Geschw. soll für alle Bilder gleich sein.
Dann müsste man ein Array anlegen in dieser Form:
const velocities = [10, 20, 15, 25];
und dieses im Skript so auswerten:

       $images.each(function(idx, item) { // <--- hier die Parameter einfuegen
          var elementOffsetTop = $(this).offset().top,
             element_h = $(this).height(),
             // das folgende ersetzen:         
             // velocity = $(this).data('velocity');
             // durch dieses:
             velocity = velocities[idx % velocities.length]; 
          
             if (windowScrollTop + window_h >

 

[Concilla]

Hallo Sempervivum, es tut mir leid, aber ich weiß nicht, was ich in dem Script wo ersetzen oder ändern muss. Javascript ist für mich Böhmische Dörfer :-( Wie müsste denn das komplette Script aussehen? Ich hänge es hier mal an. Danke im Voraus für Deine Bemühungen.

var $images = $('.parallax-img');
var window_h = $(window).height();

$(window).scroll(function () {
  var windowScrollTop = $(window).scrollTop();

  if (windowScrollTop == 0) {
    TweenLite.to($images, 1.2, {
      yPercent: 0,
      ease: Power1.easeOut,
      overwrite: 0 });

  } else
  {
    $images.each(function () {
      var elementOffsetTop = $(this).offset().top,
      element_h = $(this).height(),
      velocity = $(this).data('velocity');

      if (windowScrollTop + window_h > elementOffsetTop && windowScrollTop < elementOffsetTop + element_h) {
        //if in view:

        TweenLite.to($(this), 1.2, {
          yPercent: (windowScrollTop + window_h - elementOffsetTop) / window_h * velocity,
          ease: Power1.easeOut,
          overwrite: 0 });

      }
    });
  }
});
//# sourceURL=pen.js

 

[Sempervivum]

Ich habe es mal kommentiert in das vollständige Skript eingefügt. Achte auf die Pfeile <---

var $images = $('.parallax-img');
var window_h = $(window).height();

$(window).scroll(function () {
  var windowScrollTop = $(window).scrollTop();

  if (windowScrollTop == 0) {
    TweenLite.to($images, 1.2, {
      yPercent: 0,
      ease: Power1.easeOut,
      overwrite: 0 });

  } else
  {
    $images.each(function (idx, item) { // <--- hier werden die Parameter hinzu gefuegt
      var elementOffsetTop = $(this).offset().top,
      element_h = $(this).height(),
      // und hier nehmen wir die Geschwindigkeit statt aus dem data-Attribut
      // aus dem Array:
      // velocity = $(this).data('velocity');
      velocity = velocities[idx % velocities.length]; // <--- 

      if (windowScrollTop + window_h > elementOffsetTop && windowScrollTop < elementOffsetTop + element_h) {
        //if in view:

        TweenLite.to($(this), 1.2, {
          yPercent: (windowScrollTop + window_h - elementOffsetTop) / window_h * velocity,
          ease: Power1.easeOut,
          overwrite: 0 });

      }
    });
  }
});
//# sourceURL=pen.js

Dieses Skript dann vor dem schließenden </body> einfuegen.
Und dieses:
const velocities = [10, 20, 15, 25];in eine Datei, z. B. velocities.js schreiben und diese vor dem anderen Skript einbinden:
<script src="velocities.js"></script>Diese Datei kann der Seitenadministrator dann ändern um die Geschwindigkeiten festzulegen.

 

[Concilla]

Super! Prima! Es funktioniert hervorragend Da freue ich mich sehr. Vielen, lieben Dank, Supervivum! Das hat mir sehr geholfen. Nochmals danke!

 

[Sempervivum]

Immer erfreulich, wenn man liest, dass es funktioniert. Gern geschehen!