drag slider durchsichtig

  • Coole Sache! Du kannst einen transparenten Hintergrund erzeugen, indem Du den Renderer so änderst:

  • Danke. Nein, leider klappt das nicht. Es soll in folgendes Beispiel integriert werden:

    https://tympanus.net/codrops/2…able-dual-view-slideshow/

    Daran habe ich mich bereits gestern verbissen.

    Wenn es in der Header kommt ist alles rot.



    Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!

    Falls es nicht machbar ist, dieses durchsichtig zu machen:

    wie kann ich dieses Herz auf allen Oberseiten anzeigen lassen? Es klappt immer nur auf einer. Unter:

    Zitat

    let canvas = document.getElementById('Hannibal');

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

    let ctx = canvas.getContext('2d');

    Zwar kann ich das Canvas beliebig benennen. Aber insgesamt geht nur ein einziges Canvas auf den Seiten der id=slideshow

  • Es muss sliden,

    Mit jedem canvas habe ich schon versucht.

    Ich versuchte mehrfach auf jeder Unterseite ein Canvas einzubauen, doch schaffte ich nur eines. WIe kann ich pro Unterseite ein Canvas einrichten? Ich versuchte es mit let canvas = document.getElementById('Hannibal'); let canvas = document.getElementById('Hannibal2');let canvas = document.getElementById('Hannibal3');

    sowie sämtlichen Möglichkeiten im html scipt

  • Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:

    Und dieses CSS:

    Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.

  • Zitat
    Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist

    Erledigt, so sind auch die unteren Teilseiten einbezogen:

  • Ok. Nur klappt leider jetzt der Befehl:


    <div class="content" data-content="content-2">


    <img src="./Hover Effect Ideas _ Set 2_files/24.jpg" alt="img24">


    <h2>Round Table <span>King Arthur's creative team techniques</span></h2>

    <p>Passing......</p>


    </div>



    nicht mehr, bzw. es wird nur "img24"angezeigt,

  • Kann ich nicht reproduzieren. Wenn ich ein Bild einfüge, wird es auch angezeigt, etwa so:

    Code
    1. <div class="slide" data-content="content-2">
    2. <div class="img-wrap"><img src="img/2.jpg" alt="img2" /></div>
    3. <h2>Round Table <span><img src="img/buttonpause.png">King Arthur's creative team
    4. techniques</span></h2>
    5. <button class="content-switch">Read more</button>
    6. </div>
  • Wenn es direkt in dem Container div.content liegt, so wie Du es in #12 gepostet hast, kannst Du es anpassen, indem Du die Größe in Prozent angibst:

    Code
    1. div[data-content="content-2"]>img {
    2. width: 30%;
    3. height: auto;
    4. }

    Liegt es in irgend welchen Untercontainern, kannst Du statt dessen Viewport-Units verwenden, z. B.:

    width: 30vw;d. h. 30% der Breite des Browserfenstern.