Beiträge von Dropthemike

    Guten Morgen, oder Mittag oder Abend... wann du das wohl liest ? ^^...


    Ich habe eine Frage zum Thema Schrift... ich habe die Schirftart 'vignette' von envato bezogen und diese verfügt über eine woff und woff2... ich habe diese so eingebunden :


    Code
    @font-face {
      font-family: 'mrssaint';
      src:  url("../fonts/vignette-webfont.woff2") format("woff2"), url("../fonts/vignette-webfont.woff") format("woff");
      font-weight: 400;
      font-display: swap;
      font-style: normal;
    }

    Und so ist es in Benutzung :


    CSS
    .indexhead{
      font-family: 'mrssaint','serif';
      font-size: 7em !important;
     
    
      color:#7e192d!important;
      
     
    
    }




    Im Firefox sieht das super prächtig aus... aber kaum mache ich die Seite über Safari auf, ist die Schrift erst verzogen... lädt dann zwar nach aber dafür ist sie dann abgeschnitten... gibts da eine Art Media Query für einen Browser ? Oder habe ich irgendwas falsch gemacht beim einbinden.. ? :O


    Süße Grüße 8o


    Edit: Der Name der Schrift dann 'mrssaint' war von vorherigen Versuchen... wollt die nur nichtmehr ändern

    Hi, kann mir jemand erklären wie genau man was mittig platziert ? Ich habe immer wieder das Problem dass Div Container oder anderes sich nicht so leicht mittig platzieren lassen...

    Jetzt zB habe ich das Ding mit einer Spotify-Playlist...


    Code
    <iframe src="https://open.spotify.com/embed/album/2ZOLWMZW0oPGCtamYRpMyb" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

    Wie bekomme ich es hin dass diese Playlist mittig auf der Seite erscheint ?


    Beste Grüße

    Achso, ich glaub wir haben uns falsch verstanden :D Ich will quasi dass die sticky-nav einen transparenten Hintergrund hat.. und wenn sie zB oben ist ist der sichtbare Bereich schwarz das Logo und die Schrift in der Nav Weiß, scrolle ich runter kommt die nächste section mit weissen Hintergrund... dann soll sich die Farbe des Logos sowie die Farbe des Textes auf Schwarz ändern, kommt die nächste Section dann eben wieder anders herum... Auch wenn ich hin und her scrolle :) Ich brauche wohl JavaScript dafür oder ? Trotzdem schonmal vielen lieben Dank :)

    Hallo, mal eine Frage nach einem Ansatz... wie schaffe ich es dass sich die Textfarbe durch die Hintergrundfarbe ändert ? Also Ich habe mehrere Div Boxen und da ist Inhalt drinnen, 1 Box schwarz oben die Nav weisse Schrift... man scrollt runter dann weisser Hintergrund... aber die Schrift bleibt weiss... wie stelle ich es an dass die Schriftfarbe sich ändert... natürlich vor und zurück scrollen... und mehr ebenen... also weiss-schwarz-weiss-schwarz usw... Bin mega happy über Vorschläge :)

    Hallo, ich habe noch ein Problem mit meiner Seite.. zwar habe ich es alles in sections unterteilt... oben in den Sections zwei DIV Boxen.. mit jeweils float left und float right zu je 50%

    als Beispiel

    Dann kommt eine Section mit einem Formular..

    binde ich dann den Paralax ein

    Code
    .paralax{
        background-image: url("../img/index/jungefrau.jpg");
        height:20vh;
        width:100vw;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    Ist dieser auch zu sehen unter dem Footer

    Code
    .optikfooter{
          background-color:#D1945F ;
       
          width:100%;
          text-align: center;
          
      }
      .footertext{
          color:#fff;
      }

    Packe ich jedoch nochmal so eine 50:50 Divbox dazwischen ist der Paralax weg...

    Code
    <section >
        <div class="rightimg1"></div>
        <div class="lefttext1"><p><h2 class="headlines" id="wir">blablabla<br><span class="headlinesblack">Firma</span>
        </h2><br>
        <p class="fließtext">
            blablablablabla.... 
            </p></p></div>
    </section>

    ich habe mehrere unterschiedliche Klassen angelegt wie rightimg2 und lefttext2 weil es ja auch ein anderes Hintergrundbild hat... ich frage mich wieso ? Wieso verschwindet das ich wie kann ich es fixen..


    freue mich auf Vorschläge :O

    Hallo, eine Frage.. zwar ist die Aufgabe eine 20-30 Sekunden lange Animation auf einer Seite zu erstellen, bei der sollen Bilder und Text dazu eingeblendet werden, ich hab mich für das Karussell entschieden,. wegen der schnelligkeit diesbezüglich.. jedoch bekomme ich es nicht hin die Bilder auf 100vw und 100vh zu stellen ohne dass diese völlig verzerrt sind.. gibt es eine Möglichkeit dies anzupassen ? WIe gesagt habs schon mit ner klasse versucht :


    Code
    .carouimg{
        height:100vh;
        width:100vw;
    }


    so siehts in der HTML aus

    Es sind schon 6 Elemente drinnen, habe es nur für die Übersichtlichkeit hier verkürzt...


    so sieht es dann am Ende aus :

    Hey, ich bin am üben für die Abschlussprüfung... wir haben die von 2016 vorliegen, da gehts drum einen Onepager zu bauen... ich will den bissl dynamischer gestalten und hab vereinzelt css animationen am laufen.. so gut soweit.. ich habe am Anfang ein Heroimage mit 100Vh... wenn ich dann runter scrolle ist die Animation bereits abgespielt ohne dass irgendjemand davon Wind bekommen hat... wie kann ich es angehen dass die Animation abgespielt wird wenn ich die Section erreicht habe ? Das habe ich bisher aber es klappt nicht


    HTML

    CSS


    Javascript

    Code
    <script>
        let scrollanimation1 = document.getElementById("scrollanimation1")
        scrollanimation1.addEventListener("scroll", function (e) {
          scrollanimation1.classList.add("card-deck-animation")
        });
      </script>

    du möchtest das der Text da rein gefahren kommt und es trotzdem responsiv bleibt ?

    Ja sehr sehr gerne, aber ich denke da muss ich sehr intensiv mit mediaqueries drann oder ?


    Zitat

    Warum hast du den da zwei gleiche Animationen ?

    Das kannst du ja alles in einen Container machen , da kommt das gleiche raus.

    Ja ich hatte bei der second zuerst die Y Achse... ich habs soweit zum laufen gebracht, vorher ging es nicht... nur war es zu verspielt deswegen hab ichs wieder geändert und als Platzhalter genommen, hab ich nicht bemerkt :D sorry..


    Zitat


    Dann hast du da noch 2 Animationen ( secondheadline , secondtex ) wo ich kein Element zu finde , hat das einen Grund ?

    die hatte ich schon drinnen, auch wieder rausgelöscht weil margin-top nicht funktioniert hat... der text hat sich nicht nach unten bewegt..

    Ich versuche als Übung für die anstehende Abschlussprüfung einen Onepager zu bauen, der ein bisschen dynamisch ist.. ich dachte da an paar CSS Animationen..

    Ich habe jetzt ewig versucht und geschafft ein Overlay mit CSS zu gestalten, mit Z-Index.. usw.. nur scheint da auch das Problem zu liegen.. lege ich dann animationen drüber bewegen sie sich nicht, ausser ich lege die postition auf absolute.. nur ist das alles nicht responsiv und irgendwie funktioniert auch alles nicht..

    Was kann ich besser machen ? Andere Vorschläge ? Ich glaube wirklich langsam dass das Problem am z-index liegt..


    Probleme:

    Es ist nicht responsiv

    Es ist umständlich

    Animationen funktionieren nur bei pos: absolute




    HTML



    CSS

    Bei mir sind beide Seiten gleich, allerdings sieht die Rundung ganz anders aus als auf deinem Screenshot. Hast Du Scollbars? Wenn ja, ist das möglicher Weise eine Täuschung und kann behoben werden, indem Du body ein margin: 0; gibst.

    Sehr merkwürdig, stimmt sogar... argh... ist mir das jetzt peinlich... jedoch dann ne andere Frage wie bekomme ich eine solche Rundung hin ? meine sieht immer sehr mies aus..


    Code
    border-bottom-left-radius: 80% 250px;
        border-bottom-right-radius: 80% 250px;

    Hallo, sitze grad an was... zwar möchte ich mein Heroimage unten abgerundet haben so wie im Screenshot versucht habe ich es bereits mit


    Code
        border-bottom-left-radius: 10% 200px;
        border-bottom-right-radius: 10% 200px;


    Das ist das komplette Hero

    Es wird aber nicht so dargestellt, die linke Seite hat trotzdem eine andere rundung als die rechte.


    Eine Idee ?


    Grüße Mike

    Hallo, ich bin aus meinem Praktikum zurück in der Schule, und wir haben ab nun Prüfungsvorbereitung .. gut wir haben eine Abschlussprüfung von 2016 vorgelegt bekommen, da geht es darum einen Onepager zu bauen und als wäre das nicht genug ein Puzzlespiel mit Canvas und Javascript programmieren, dazu soll ein Button der die 12 Teile nochmal zufällig anordnet.. ich suche schon bei google aber ich finde nichts... auf themeforest finde ich auch nichts... hat jemand eine Ahnung wie das zu realisieren ist ?

    Exakt... wenn es dann 24 Bilder sind soll ein Button wieder nur die 8 ursprünglichen anzeigen, das funktioniert auch... aber dann ist der Button weg und ich kann den vorgang nicht wiederholen, nehme ich den button in der letzten funktion dazu kommt dann auch nur dieser wieder.. und funktioniert auch nur 1x.. Ich möchte quasi dass wenn ich alle Bilder geladen habe, den Ursprung hergestellt habe das wieder und wieder durchführen können ohne die Seite neu zu laden :D

    Hey, wie gehe ich es an dass der Code sich automatisch wiederholt ? es ist ein button der mehr bilder lädt... danach kommt einer der nochmal mehr lädt... dann kommt der button um den anfangszustand herzustellen (8 Bilder) und dann soll wieder der Button kommen um mehr einzublenden... aber unsette ich das display none in dem letzten button geht es nur 1x weiter... also brauche ich warscheinlich eine Schleife... könnt ihr mir da weiterhelfen ?


    Hallo ich stehe wieder vor einer Herausforderung... zwar arbeite ich diesmal mit nem Template das scheinbar auf Ajax basiert... die Texte die ich ausgeben möchte müssen im data-text attribut stehen.. ich hätte sehr gerne ein Icon dadrinnen... aber das funktioniert so nicht... ne idee ?


    Code
    <p class="p-style-bold-up text-height-20 d-flex-wrap">
                                        <span class="load-title-fill tr-delay08"
                                            data-text="Und noch viel viel mehr <3>">UND NOCH VIEL VIEL MEHR <i class="fas fa-heart"></i></span>
                                       
                                    </p>