Fallender CSS3 Effekt – zum Beispiel Schnee

von | Mrz 2, 2014 | Design | 4 Kommentare

Schlagwörter: CSS - CSS3

Ja ich weiss, seit gestern haben wir eigentlich Frühling – trotzdem friert man sich, wenn man auf der Strasse unterwegs ist, einen ab – wenigstens hier in der Ostschweiz. Wenn es so kalt ist, dann fehlt mir persönlich der Schnee und wenn Frau Holle sich weigert so etwas zu liefern, ja dann lass ichs halt im Blog ein wenig schneien.

Eigentlich ist so ein fallender CSS Effekt wirklich sehr einfach zu generieren. Man braucht eigentlich nichts weiteres als 3 Bilder, die dann übereinander gezeigt werden und ein kleiner CSS Code, und so wird der fallende Effekt erzeugt.

Hier die Anleitung:

  1. 3 Bilder besorgen

    Zuerst einmal braucht man die 3 Bilder die dann übereinander gelegt diesen fallenden Effekt erzeugen. Ich habe hier mal Schnee genommen, man kann natürlich auch andere Symbole wie zum Beispiel Osteier nehmen, oder $ Zeichen oder sonst was lustiges. Ich habe das Ganze mal mit Schnee gemacht und diese 3 Bilder auf den Server hochgeladen https://www.chefblogger.me/images/schnee1.png, https://www.chefblogger.me/images/schnee2.png, https://www.chefblogger.me/images/schnee3.png.

    Wenn ihr selbst Bilder macht, solltet ihr einfach schauen, dass die 3 Bilder unterschiedliche Bildergrössen enthalten – damit man ne Art Tiefen-Effekt erhält.

  2. Bilder in CSS einbinden

    Jetzt geht ihr zu eurem Designordner und öffnet das CSS File. Dort bindet ihr dann den Code ein – zb im Body-Bereich oder sonst wo ihr ihn angezeigt haben möchtet.

    1
    2
    3
    4
    5
    6
    7
    8
    
    background-color:#3b8dbd;
    background-image:url('https://www.chefblogger.me/images/schnee1.png'),
    url('https://www.chefblogger.me/images/schnee2.png'),
    url('https://www.chefblogger.me/images/schnee3.png');
    -webkit-animation:schnee 25s linear infinite;
    -moz-animation:schnee 25s linear infinite;
    -ms-animation:schnee 25s linear infinite;
    animation:schnee 25s linear infinite;

    Natürlich müsst ihr euren Code so anpassen, dass die 3 Bilder eine richtige URL bekommen (auf eurem Server am besten). Hinter Background-Color (1. Zeile) müsst ihr die Hintergrundfarbe definieren. Am besten wählt ihr die Farbe aus, bei der euer Effekt am besten hervortritt. Ich hab sie hier mal Hellblau genommen.

  3. Fallender Effekt in CSS einbinden

    Nun müsst ihr nur noch den fallende Effekt einbauen und zwar geht das am einfachsten, wenn ihr den folgende Code zu unterst bei eurem style.css File platziert.

    1
    2
    3
    4
    5
    6
    7
    8
    
    @keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px;}}
    @-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%
    {background-position:500px 1000px,400px 400px,300px 300px}}

    Solltet ihr eure eigenen Befehle schreiben, dann müsst ihr einfach schauen, dass ihr sie richtig verlinkt. So heisst hier der Effekt immer „schnee“, das seht ihr unter Punkt 2. in verbindung mit Punkt 3. sehr schön.

  4. CSS File hochladen und Effekt geniessen

    Jetzt müsst ihr nur noch das CSS File hochladen und dann könnt ihr, wenn ihr alles richtig gemacht habe, den Effekt geniessen.

So einfach geht das, und nun viel Spass beim rumexperimentieren !





4 Kommentare

  1. xXNeofightXx

    Guten Hallo.

    Da bewegt sich leider gar nichts. Habe nur die Bilder starr mit dem blauen Hintergrund…

    Habe den Code so eins zu eins kopiert und die image url geändert mehr nicht.
    Auch „-ms-animation“ wird nicht erkannt.(schwarz statt blau in der css dargestellt).

    Ist der Code hier nicht mehr zeitgemäß oder habe ich was falsch gemacht?

    Antworten
    • Eric-Oliver Mächler

      hallo, danke für dein nachfragen – ich habe es gerade getestet und bei mir läufts.
      du musst die css halt in zb body {} oder in * {} eingeben und nachher das mit den keyframes (aber nicht innerhalb des body tag.
      und wenn du es wo anders haben willst kannst du das natürlich auch machen, musst nur die klasse entsprechend bezeichnen.
      ich hoffe ich konnte dir helfen

      Antworten
  2. xXNeofightXx

    Hallöchen Eric.

    Ich habe selbstverständlich einiges ausprobiert… in den body tag, außerhalb des body tags…

    Hier mal die codes im ganzen:

    #body{
    height:1000px;
    width:1000px;
    margin:0px auto;

    background-color:#3b8dbd;
    background-image:url(‚../images/schnee1.png‘),
    url(‚../images/schnee2.png‘),
    url(‚../images/schnee3.png‘);
    -webkit-animation:schnee 25s linear infinite;
    -moz-animation:schnee 25s linear infinite;

    ——————————————————————————————–

    -ms-animation:schnee 25s linear infinite;
    /*-ms-animation:*/ ist schwarz statt blau (edit mit notepad++)
    und heißt für mich es wird nicht als code angenommen

    ——————————————————————————————–

    animation:schnee 25s linear infinite;

    @keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px;}}
    @-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%
    {background-position:500px 1000px,400px 400px,300px 300px}}
    }

    Aber ja es funktioniert…Habe es nochmal getestet bevor ich meinen Einwand abgeschickt habe. Keyframes außerhalb des body tags hat geholfen.

    Als Tipp für dich:
    „den folgende Code zu unterst bei eurem style.css File platziert.“
    war für mich etwas irreführend. In Verbindung mit „Dort bindet ihr dann den Code ein – zb im Body-Bereich“
    Kann auch bedeuten man soll die keyframes innerhalb dessen einbinden wo man es angezeigt haben möchte also an das Ende, aber innerhalb des Body
    Bereichs.

    Aber danke für die schnelle Antwort und deine Hilfe, für einen Beitrag von vor 5 Jahren 🙂

    Lang ist´s her.

    Frohes Fest lieber Eric und einen guten Rutsch dir und deiner Familie

    Antworten
    • Eric-Oliver Mächler

      ja ich gebe zu, die alten anleitungen wo man code einbauen könnte – könnten besser strukturiert werden – das habe ich bei den neueren anleitungen bereits so gemacht 🙂 freut mich aber wens bei dir geklappt hat.

      Ja bitte bitte und dir und deiner Fam auch eine schöne weihnachten

      Antworten

Trackbacks/Pingbacks

  1. Monatsrückblick für Dezember 2014 › Chefblogger - […] Fallender CSS3 Effekt – zum Beispiel Schnee […]

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung