Antworten auf deine Fragen:
Neues Thema erstellen

Wie blende ich ein DIV ein?

Thomas811

Nicht mehr ganz neu hier

Ich habe eine Webseite entdeckt bei der mit der Anfangseffekt gefällt!
https://zahnarzt-ixmann.de
Hier wird nach dem Laden das DIV in dem sich der Foto-Slider befindet eingeblendet, bzw. wird die Höhe verändert.
Ich hab schon verschiedene Lösungsansätze ausprobiert, jedoch komme ich nicht zum gewünschten Erfolg.
Ich wollte das mit CSS realisieren.
Wer kann mir dabei helfen!?

Eine andere Webseite ist http://www.nfzfranken.de hier wird auch ein Einblendeffekt verwendet!

Ich möchte falls es realisierbar ist kein Javascript verwenden.
 
Zuletzt bearbeitet:

Squeendot

Aktives Mitglied

Hallo Thomas!
Einfach beim CSS des Sliders
Code:
transition: all 1s;
hinzufügen, dann wird beim Neu-Laden das Einblenden animiert.
Ansonsten geht das ganze mit jQuery und slideToggle ziemlich simpel.

LG,

Julian
 

Thomas811

Nicht mehr ganz neu hier

Ich habs geschafft :) oben in der CSS Datei ein FADEIN beschrieben

@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fad

Dann den eigentlichen CSS Befehl beim zugehörigen DIV in der CSS Datei,
hier habe ich einen container beschrieben und mit der letzten Zeile animation:fadein den Ablauf der
Animation gestartet.

#container {
margin:1% 1% auto;
width:98%;
border:1px solid black;
background-color:azure;
/* fade in blendet die Seite weich ein */
animation:fadein 1.0s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 1.0s;


Viel Spaß beim Nachbauen :)
 

Myhar

Hat es drauf

Wozu werden -moz-animation und -webkit-animation noch gebraucht? Auch sollten Vendor-Prefixes immer zuerst stehen und der Standardbefehl zuletzt. Sollten diese Befehle also wirklich benötigt werden, dann wäre folgendes korrekt:
HTML:
-moz-animation:fadein 1.0s;
-webkit-animation:fadein 1.0s;
animation:fadein 1.0s;
 

Thomas811

Nicht mehr ganz neu hier

Hier eine Übersicht über die Herstellerpräfixe:

  • -webkit- (Chrome, Safari, neuere Versionen von Opera, fast alle iOS-Broswer - einschließlich Firefox für iOS; im Grunde genommen jeder auf WebKit basierende Browser)
  • -moz- (Firefox)
  • -o- (Alte Versionen von Opera aus der Zeit vor WebKit)
  • -ms- (Internet Explorer und Microsoft Edge)
 

Myhar

Hat es drauf

Danke für die Übersicht, das ist mir durchaus bewusst. Aber falls das als Antwort auf meine Frage gedacht war: Das hat leider nicht viel damit zu tun.
Diese präfixe werden für (noch) experimentelle Features benutzt, deshalb soll auch der Standardwert immer als letztes ausgegeben werden. Damit, falls ein Standardwert implementiert wird, dieser dann auch überall korrekt verwendet wird. (Siehe mein voriges Posting)
Auch ist es im Falle von animation nicht mehr notwendig Präfixe zu verwenden da alle Browser die Animationen bereits ohne diese unterstützen. Siehe auch. http://caniuse.com/#feat=css-animation
 

Thomas811

Nicht mehr ganz neu hier

Vielen Dank für die Information. Den Befehl für die Animation hab ich mir von einer Webseite die sich mit CSS beschäftigt geholt und eingefügt. Da ich in der Vergangenheit des öfteren darüber gestolpert bin, dass verschiedene Befehle von manchen Browsern nicht unterstützt wurden, oder diese eine "Sondereinladung" benötigt haben, entschied ich mich den Code unverändert zu übernehmen und nur die Werte anzupassen. Danke für deinen Link, fand ich sehr hilfreich.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben