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

  • Zitat

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

    Versuche, das Canvas mit position: fixed; zu fixieren. Dann wird es natürlich nicht mit sliden. Wenn Du das möchtest, musst Du wohl in jeder Unterseite bzw. div.slide ein Canvas einrichten.

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

  • PERFEKT. VIELEN VIELEN DANK

    Nur eine Frage noch:

    Wenn ich in die Seiten darunter sehe, ist auch das Herz zu sehen. Mal oben, mal unten, ganz anders als die Maus.

    Es darf nur auf den Hauptseiten zu sehen sein/den oberen Abschnitten(slide)

  • 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
                        <div class="slide" data-content="content-2">
                            <div class="img-wrap"><img src="img/2.jpg" alt="img2" /></div>
                            <h2>Round Table <span><img src="img/buttonpause.png">King Arthur's creative team
                                    techniques</span></h2>
                            <button class="content-switch">Read more</button>
                        </div>
  • Soweit nur noch eine Frage:

    wie kann ich das Bild der Bildschirmgröße anpassen, wie es bei den slidern ist? Bei <div class="img-wrap> zeigt er es sehr sehr klein an beziehungsweise ändert die Größe nicht mit.

  • 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
    div[data-content="content-2"]>img {
       width: 30%;
       height: auto;
    }

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

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

  • folgendes klappt nicht:

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

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

    <div[data-content="content-2"]>

    <img src="img/1.jpg" alt="img2" />

    width: 50%;

    height: auto;

    }

    </div>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!