Beiträge von Dropthemike

    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
    1. .paralax{
    2. background-image: url("../img/index/jungefrau.jpg");
    3. height:20vh;
    4. width:100vw;
    5. background-attachment: fixed;
    6. background-position: center;
    7. background-repeat: no-repeat;
    8. background-size: cover;
    9. }

    Ist dieser auch zu sehen unter dem Footer

    Code
    1. .optikfooter{
    2. background-color:#D1945F ;
    3. width:100%;
    4. text-align: center;
    5. }
    6. .footertext{
    7. color:#fff;
    8. }

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

    Code
    1. <section >
    2. <div class="rightimg1"></div>
    3. <div class="lefttext1"><p><h2 class="headlines" id="wir">blablabla<br><span class="headlinesblack">Firma</span>
    4. </h2><br>
    5. <p class="fließtext">
    6. blablablablabla....
    7. </p></p></div>
    8. </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
    1. .carouimg{
    2. height:100vh;
    3. width:100vw;
    4. }


    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 :

    Dateien

    • sample.jpg

      (82,95 kB, 4 Mal heruntergeladen, zuletzt: )

    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
    1. <script>
    2. let scrollanimation1 = document.getElementById("scrollanimation1")
    3. scrollanimation1.addEventListener("scroll", function (e) {
    4. scrollanimation1.classList.add("card-deck-animation")
    5. });
    6. </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
    1. border-bottom-left-radius: 80% 250px;
    2. border-bottom-right-radius: 80% 250px;

    Dateien

    • pack6.jpg

      (372,31 kB, 3 Mal heruntergeladen, zuletzt: )

    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
    1.     border-bottom-left-radius: 10% 200px;
    2. 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
    1. <p class="p-style-bold-up text-height-20 d-flex-wrap">
    2. <span class="load-title-fill tr-delay08"
    3. data-text="Und noch viel viel mehr <3>">UND NOCH VIEL VIEL MEHR <i class="fas fa-heart"></i></span>
    4. </p>

    Hallo ich hab mal wieder ein Problem für das mir grad der Durchblick fehlt... zwar binde ich 3 Bilder auf einer Seite vor dem Footer einm soweit so gut aufn Desktop... nur auf mobil wird das hässlich gestaucht... sieht dann so aus :


    https://www.bilder-upload.eu/bild-ececc3-1575454092.png.html


    das ist der zugehörige Code dafür..


    Code
    1. <div class="col-lg-4 col-sm-12">
    2. <img src="img/*****_img/******/axes.jpg "style="height:622px;width:830px;display:inline;padding-bottom: 20px;padding-top: 60px;" class="img-fluid">
    3. </div>

    und das hier dann in CSS


    Code
    1. .img-fluid{
    2. max-width: 100%;
    3. height: auto;
    4. }

    Was mache ich falsch ? :O

    Hi, ich hab mal wieder ne Frage... ich habe schonmal nen Code gesehen wo das Bild angegeben war und dann eine Alternative die dann benutzt wird wenn es zB auf nem Smartphone angeschaut wird... das war eindeutig im HTML enthalten und ohne Media Query leider habe ich diesen Code Schnipsel nichtmehr vorliegen, weiß jemand wie das gehen könnte ? :)

    Hey, ich tu mich wahnsinnig schwer mit den Bildschirmgrößen in Chrome oder in Safari unter Mac... ich bekomme für die Responsivität iPhones und iPads angezeigt schön und gut, aber wie finde ich denn genau heraus welche Maße ich zB brauche für ein 13 Zoll/Macbook, 15/ZollMacbook, 21.5 Zoll/iMac und 27 Zoll/iMac... was muss ich da verwenden die Displayauflösungen wie vom Händler vorgegeben oder was ganz anderes ? Ich hab das Problem dass sehr oft 13 Zoll Macbook stark differenziert zum 27 Zoll iMac darstellt und dem wollte ich mal entgegen wirken :) Ich habe gesehen dass vor einiger Zeit eine ähnliche Frage aufgekommen ist, diese ist jedoch ein wenig anders... Kurz gefasst ich möchte in Chrome zumindest ein 13,15,21.5/27 Zoll Gerät angezeigt bekommen bzw selbst einstellen... und suche welche Maße ich dafür benötigte... zB sowas wie 200x300px (nur aus Beispiel)


    grüße

    Mike