Ah, verstehe, Du willst die Reihenfolge umkehren?
Beiträge von Sempervivum
-
-
Das kann man sehr gut auch mit Intersection-Observer machen.
https://developer.mozilla.org/en-US/docs/Web…on_Observer_API
Demo:
HTML
Alles anzeigen<!DOCTYPE HTML> <html> <head> <title>Intersection-Observer</title> <style> body { width: 500vw; height: 500vh; display: flex; justify-content: center; align-items: center; } #testdiv { width: 60vw; height: 60vh; background-color: lightblue; } </style> </head> <body> <div id="testdiv"></div> <script> const options = { rootMargin: '0px', threshold: 0.5 } const callback = (entries, observer) => { entries.forEach(entry => { // Each entry describes an intersection change for one observed // target element: // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time console.log(entry.isIntersecting); }); }; const observer = new IntersectionObserver(callback, options); const target = document.querySelector('#testdiv'); observer.observe(target); </script> </body> </html>threshold gibt dabei den Grad der Überdeckung an.
-
Da fällt auf, dass das bisherige offenbar nach "Knr" aufsteigend sortiert ist. Möchtest Du das Array mischen, d. h. eine zufällige Reihenfolge erzeugen?
-
Hallo Nicklas96,
ich bin zwar kein Freund von Bootstrap für Layoutzwecke aber wenn es um die Navigation geht, könntest Du die Version von Bootstrap mit Vorteil einsetzen:
-
Mir scheint jetzt funktioniert alles
-
Jetzt ist es in der animOnScroll.js und dort haben wir ja noch ein Problem mit dem Selektor. Der Container für die Galerie hat ja die ID "container" und wir können bei getElementById bleiben und das Element so ermitteln:
Codenew AnimOnScroll( document.getElementById( 'container' ), { minDuration : 0.4, maxDuration : 0.7, viewportFactor : 0.2 } );In der animOnScroll.js hast Du ja .item für Masonry verwendet und das sollte passen.
Und bei der Ermittlung der Items hast Du es von li auf div geändert:
this.items = Array.prototype.slice.call( document.querySelectorAll( '.' + this.el.className + ' > div' ) );
Allerdings könnte es Probleme machen, dass das Element zwei Klassen hat. Mal abwarten, teste es so und wenn es nicht funktioniert, sehen wir weiter.
Möglicher Weise wäre es besser, es gleich so zu machen:
this.items = Array.prototype.slice.call( this.el.querySelectorAll( 'div.grid-item' ) );
Das verschlechtert zwar die Wiederverwendbarkeit aber beim Masonry haben wir auch schon .grid-item fest eingebrannt.
-
Eine Problemursache solltest Du als erstes beheben: Du fährst da zweigleisig, einmal wird masonry in animOnScroll.js initialisiert und außerdem in deiner HTML-Datei, einschl. imagesLoaded. Dann ist kaum vorhersagbar, wie das Resultat ist, auf jeden Fall braucht es nicht zu verwundern, wenn etwas nicht funktioniert.
-
Der Validator beanstandet es ohne Anführungszeichen nicht und ich mache es auch schon länger so ohne Probleme. Ist auch logisch, weil der String ja schon durch die Klammern eingeschlossen ist.
Was Probleme machen kann ist, wenn man einfach background statt background-image verwendet, das funktioniert zwar aber dadurch werden dann andere Eigenschaften wie position und repeat zurück gesetzt, siehe hier:
-
Dein letzter Link
https://www.mariposa-designography.com/masonry-test_anim4.html
funktioniert bei mir einwandfrei, auch beim ersten Laden.
Vielleicht hast Du ein Problem mit dem Cache, passiert gerade bei ausgelagerten Dateien. Lade mal mit Strg+F5 neu.
-
Zitat
Wenn ich dann noch Bildbeschreibungen hinzufüge und eine Lightbox einbaue, werd ich wohl auch DIVs brauchen
Zumindest Fancybox 3 geht auch in einem Listenelement, siehe hier:
-
Zitat
ich hab noch nichtmal gefunden, wo sie ihr Masonry überhaupt triggert.
Das haben sie in animOnScroll.js eingebaut, ab Zeile 98:
Code// initialize masonry new Masonry( self.el, { itemSelector: 'li', transitionDuration : 0 } );Wie Du siehst ist dort der Selektor 'li' fest eingebrannt.
-
Dann stehe ich erst Mal ratlos davor. Ich nehme an, Du hast das nicht online?
Wirf noch einen Blick in die Console, wenn der Browser es nicht findet, wird er dort eine Fehlermeldung ausgeben.
-
Nein, wenn das Bild jetzt im css-Ordner liegt, muss der Pfad lauten:
background: url(landing.jpg);
-
Dann musst Du die Pfade noch Mal genau überprüfen, auch in Bezug auf Groß- und Kleinschreibung.
-
Wo ist denn das CSS abgelegt, da es einen Ordner css gibt, vermute ich, dass auch die CSS-Datei dort liegt? Wenn das zutrifft, musst Du berücksichtigen, dass der Basisordner für die URL der ist, wo die CSS-Datei liegt, d. h. es müsste so aussehen:
Code#home { background: url(img/landing.jpg); } -
Den Fehler im HTML hatte ich übersehen, den musst Du auch korrigieren. Richtig wäre es so:
Code<ul> <li><a href="#home">Home</a></li>usw.
-
Zitat
Kann mir wer sagen, woran das liegt?
Ich nicht wirklich präzise, nur, dass das die Mysterien von float-Layout sind
Verwende statt dessen Flexlayout, dann wird es ganz einfach:
Codeheader nav { display: flex; justify-content: flex-end; margin: 10px 50px 0 0; } header nav ul { display: flex; margin-left: 36px; }(ungetestet). Näheres kannst Du z. B. hier nachlesen:
-
Guten Morgen Elly,
wenn ich auf deine Version einen Blick werfe, frage ich mich als erstes, warum Du nicht genau die HTML-Struktur verwendest wie in dem Beispiel für die Scrolleffekte? Also ein ul mit lis darin und keine weiteren div-Container. So wundert es nicht, dass es nicht funktioniert.
Masonry dürfte es egal sein, ob die Elemente, die positioniert werden müssen, divs oder lis sind - das Beispiel bei den Scroll-Effekten funktioniert ja.
ZitatWas der Modernizr damit zu tun hat, hab ich noch nicht rausgefunden. Aber ohne ihn läuft die Animation nicht.
Mit Modernizr kann man überprüfen, ob ein bestimmtes Feature verfügbar ist, in diesem Fall die CSS-Animationen:
if( Modernizr.cssanimations ) {
Wird Modernizr nicht eingebunden, kommt es an dieser Stelle zu einem Laufzeitfehler und das ganze Skript bricht ab und ist unwirksam.
-
Zitat
Hier mal der komplette Code, falls ich die Seite mal lösche
Das ist eine gute Entscheidung, Links haben immer die Tendenz, irgend wann tot zu sein.
-
... ich bin lokal auf den Stand gegangen, den Du online hast. Dann habe ich bemerkt, dass da doch noch ein leeres data-masonry am Container steht. Lösche ich das, wird gutter wirksam. Allerdings wird es offenbar nicht in die Berechnung einbezogen sondern ich musste das selber im CSS tun:
Code
Alles anzeigen<style> .grid {} .grid-item, .grid-sizer { width: calc(50% - 5px); } .grid-item img { width: 100%; } </style>