wow.min.js trifft auf mousewheel.min.js

[wanjapflueger]

Hallöchen,

ich hab da mal ein altes Experiment wieder ausgepackt und Bilder horizontal in einem DIV in eine Reihe gepackt.

Mit mousewheel.min.js hab ich die Scrollrichtung nach Links zu Rechts geändert und mit wow.min.js lasse ich zusammen mit animate.css die Bilder "ein-faden"- also animieren wenn sie im viewport sind.

wow.min.js:

<script src="js/wow.min.js"></script>
<script>
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       90,          // distance to the element when triggering the animation (default is 0)
    mobile:       false        // trigger animations on mobile devices (true is default)
  }
);
wow.init();
</script>

mousewheel.min.js

<script>$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 1);
   
      event.preventDefault();

   });

});</script>

HTML

<div id="container">
   
    <?
        $directory = "bilder/01/";
        $images = glob($directory . "*.jpg");
        sort($images);
        foreach($images as $image) {
          echo "<img class='wow fadeIn' src='".$image."'/>";
        }
    ?>
</div>

Berechnung der Breite von body (damit ich keine Breite des Containers definieren muss)

<script>var adjustSize = function(){
    var total = 0, // include extra width padding here
        win = $(window),
        winW = win.width(),
        // subtract scroll bar height to prevent vertical scrollbar
        winH = win.height() - 0;
    $('#container img').each(function(){
        var $t = $(this),
            r = $t.width()/$t.height(); // image aspect ratio
            // set image size, but maintain aspect ratio
            worh = (r > 1) ?
                { width : winW,  height: winW/r, maxHeight: winH, maxWidth: winH*r } :
                { height : winH, width : winH*r, maxWidth: winW, maxHeight: winW/r };
        $t.css(worh);
        // add up total width for body size
        total += $t.width();
    });
    $('body').width(total);
};

// run script after all the images have loaded & on window resize
$(window)
    .load(function(){ adjustSize(); })
    .resize(function(){ adjustSize(); });


</script>

CSS:
gibts nicht




Nur leider klappts mit der Animation nicht so recht, sobald ich die Seite nicht vertikal, sondern horizontal layoute...

Vielleicht gibts da ja nen Schalter den ich umlegen kann? :)

Achja und zu sehen gibts das ganze hier höchst offiziell: http://www.wanjapflueger.de/doc/




PS: Lazyload klappt bei mir mit wow.min.js auch nicht mehr, das ist ebenfalls zu betrauern...



Zutiefst verbunden,
Wanja :)