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 :

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

.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

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...

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

Zitat von domeetr

Hast du zufällig ein Beispiel parat ? Ansonsten würde ich jetzt vermuten du möchtest eine fixed-Navigation, die beim herunterscrollen ab einem gewissen Punkt den Hintergrund und die Schriftfarbe wechselt?

Ganz genau das möchte ich Muss aber nicht nur auf die Navigation bezogen sein, auch Logo wäre Klasse

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

Zitat von nextuser

Object-Fit

Danke danke danke danke !!!!!

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

.leftimg1{
    float: left;
 
    background-image: url(../img/index/jungefrau2.jpg);
    background-size: cover;
    background-position: center;
    height:50vh;
    width: 50%;
    padding:0;
    margin:0;
}
.righttext1{
    float: right;
    width:50%;
    height:50vh;
    background-color: #fff;
    padding:0;
    margin:0;
}

Dann kommt eine Section mit einem Formular..

binde ich dann den Paralax ein

.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

.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...

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

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

so siehts in der HTML aus

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="1" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="6"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/*****Animation/bild1sepia.jpg" class="d-block carouimg" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="img/*****Animation/bild2sepia.jpg" class="d-block  carouimg" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>

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

so sieht es dann am Ende aus :

Ja, das ist mit Jquery gelöst wenn ich mich nicht irre... gibt es da nicht ein simples und reduziertes script dafür ?

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

<section id="programm">
    <div class="container">
      <h1 class="subhead">Programm</h1>

      <div class="mt-5 mb-5">

        <!-- card-deck-animation entfernen und über JavaScript bei Scrollen Adden ! Unfertiges Script bereits vorhanden ! -->

        <div class="card-deck card-deck-animation" id="scrollanimation1">
          <div class="card">

            <div class="card-body">
              <h5 class="card-title">Fachtag von 10 Uhr bis 17 Uhr</h5><br>
              <ul>
                <li><span class="libold">Markt der Möglichkeiten</span> <br>Wir präsentieren unsere Umwelterfolge –
                  machen Sie mit!
                </li><br>
                <li><span class="libold">Faires Frechen</span><br>Podiumsgespräch mit dem Umweltbeauftragten der Stadt
                </li><br>
                <li><span class="libold">Vor Ort Werksbesichtigung</span><br>und Workshops in kleinen Gruppen
                </li>
              </ul>

            </div>
          </div>
          <div class="card">

            <div class="card-body">
              <h5 class="card-title">Abendprogramm ab 19 Uhr</h5><br>
              <ul>
                <li><span class="libold">Zum guten Schluss</span><br>Kulinarischer und musikalischer Ausklang

                </li>
              </ul>

            </div>
          </div>

        </div>

      </div>
      <h5 class="treffpunkt">Treffpunkt: Großer Saal der Packpapp Akademie in Frechen, Gewerbepark am Keramion 5
      </h5>
    </div>

  </section><br>

CSS

.card-deck-animation{
    animation:carddeck 1.5s forwards;
    

}

@keyframes carddeck {
            from {
                transform: translate3d(0,200px,0)
            }
        
            to {
                transform: translate3d(0,0,0);
                opacity: 1
            }
        }
        @keyframes treffpunkt {
            from{transform:translateX(-1000px); opacity: 0;}
            to {transform:translateX(0px); opacity: 1;}
        }

Javascript

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

Zitat von basti1012

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

<!doctype html>
<html lang="de">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>PackPapp GmbH</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

   
  </head>
  <body>

  <header class="heroheader">
      <span class="herooverlay"></span>
    <div class="container">
      
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent " >
        <img src="img/logo.png" class="logo">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Programm</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Über Uns</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Impressum</a>
              </li>
          </ul>
        </div>
      </nav>
    </div>
   
    <div class="firstheadline mt-5">
    <span >Umwerfend Öko</span>

    </div>
    <div class="firsttext">
        <span>Wir verpacken nachhaltig<br> 
            Vorfeier zum internationalen Tag der Umwelt<br>
            Freitag, 4. Juni 2021, 10 Uhr</span>
    </div>

    
  </header>
       


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.js" ></script>
    <script src="js/popper.min.js" ></script>
    <script src="js/bootstrap.min.js" ></script>
  </body>
</html>

CSS

.heroheader{
    position: absolute;
    background-image: url(../img/windraeder.jpg);
    background-size: cover;
    background-position: center;
    width:100vw;
    height:100vh;
    z-index:-1
}

.herooverlay{
    position: absolute;
    height:100vh;
    width:100vw;
    background-color: #383838;
    opacity: 0.5;
    z-index:-2

}
.logo{
  
    margin-right: 250px;
    margin-left: 50px;
    max-height: 100px;
    max-width: 100px;

}

.navbar{
    color:#fff!important;
}

.nav-link{
    color:#fff!important;
    font-weight: bold;
    text-transform: uppercase;
}

.active{
    border-bottom: solid 2px #7D9F00;
}

.firstheadline{
    position: absolute;
    display:inline;
    margin-left: 800px;
    color:#7D9F00;
    font-size: 100px;
    text-transform: uppercase;
    animation: firstheadline 1s linear forwards;
    opacity: 0;
}


.firsttext{
    position: absolute;
    display:inline;
    margin-left: 800px;
    margin-top: 200px;
    color:#fff;
    font-size: 40px;
    text-transform: uppercase;
    animation: firsttext 1s linear forwards;
  
    opacity: 0;
}



@keyframes firstheadline {
    from{transform:translateX(-1000px); opacity: 0;}
    to {transform:translateX(10px); opacity: 1;}
}
    @keyframes firsttext {
        from{transform:translateX(-1000px); opacity: 0;}
        to {transform:translateX(10px); opacity: 1;}
    }

    @keyframes secondheadline {
        from{transform:translateX(-1600px); opacity: 0;}
        to {transform:translateX(10px); opacity: 1;}
    }
        @keyframes secondtext {
            from{transform:translateX(-1000px); opacity: 0;}
            to {transform:translateX(10px); opacity: 1;}
        }

Zitat von Sempervivum

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..

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

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

Das ist das komplette Hero

.heroheader{
    background-image: url(papier1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    border-bottom-left-radius: 10% 200px;
    border-bottom-right-radius: 10% 200px;
    

}

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 ?

Zitat von basti1012

He ?

Kannst du mal ein Beispiel zeigen welche Seite sowas nutzt ?

Ich verstehe das so das du die Seite öffnen tust.

Dann sieht man zb 8 Bilder.

Klickt man dann den Button werden 8 neue Bilder DAZU geladen .

Bei jeden klick auf Button kommen wieder neue 8 Bilder DAZU.

Ist das richtig ??

Wenn ja wo ist den genau dein problem ?

Alles anzeigen

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

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 ?

<script>
        const showbutton2 = document.getElementById("showbutton2")
        const showbutton3 = document.getElementById("showbutton3")
       
       
        const loadmorebutton2 = document.getElementById("loadmorebutton2")
        const loadmorebutton3 = document.getElementById("loadmorebutton3")
    
        const dontshowbutton = document.getElementById("dontshowbutton")

        const loadmorecontent1 = document.getElementById("loadmorecontent1")
        const loadmorecontent2 = document.getElementById("loadmorecontent2")
      

        loadmorebutton1.addEventListener("click", function (e) {
            loadmorecontent1.classList.remove("d-none")
        
        
            
            loadmorebutton1.style.display = "none"
            showbutton2.classList.remove("buttonstyleroff")
            showbutton2.classList.add("buttonstyleron")
            
        
            
        })
        loadmorebutton2.addEventListener("click", function (e) {
            loadmorecontent2.classList.remove("d-none")
        
        
            
            loadmorebutton2.style.display = "none"
            
            dontshowbutton.classList.remove("buttonstyleroff")
            dontshowbutton.classList.add("buttonstyleron")
            
        
            
        })
       
        
        
    </script>

Irgendwas lief da schief... ich wollte den Thread löschen.. ich hab nen span daneben gesetzt und dann ging es

Zitat von basti1012

Wo ist den in dein data-text ein Icon ?

das habe ich nicht mitkopiert... das < 3 soll das icon sein... also als platzhalter... ich kopiere es genau so rein wie im span das resultat ist eben dass es nicht ganz angezeigt wird..

so ungefähr zeigt es das dann an... der Text beinhaltet eine Animation wo der Text von weiss zu rot wird

https://www.bilder-upload.eu/bild-7425a8-1576237532.png.html

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 ?

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