"data-velocity" per CSS

Sempervivum

Erfahrenes Mitglied
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:
Code:
       $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

Mitglied
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.

Javascript:
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

Erfahrenes Mitglied
Ich habe es mal kommentiert in das vollständige Skript eingefügt. Achte auf die Pfeile <---
Code:
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

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