mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 20:41 Benutzername: Passwort: Auto-Login

Thema: -moz-transition vom 06.05.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> -moz-transition
Autor Nachricht
Sp4wNi
Threadersteller

Dabei seit: 26.10.2010
Ort: Düsseldorf
Alter: 37
Geschlecht: Männlich
Verfasst Fr 06.05.2011 10:43
Titel

-moz-transition

Antworten mit Zitat Zum Seitenanfang

Servus,

ich weiß nicht ob ich falsch informiert bin, aber seit Firefox 4 gibt es ja sowas wie transitions im CSS.
Meinem Chef ist das aufgefallen als er seinen Firefox geupdated hat.
Mein Job war natürlich ihm zu erklären wie es geht und ein beispiel zu erstellen.
Dies haben ich natürlich auch gemacht und möchte dies gerne mit euch teilen.

Mein Code im HTML:
Code:


<html lang="de" dir="ltr">
  <head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css" >
 
  <title></title>
  </head>
  <body class="start">
    <header>
      <h2>
        <img id="logo" class="start" alt="bildchen" src="test.jpg">
        <img id="logo2" class="start" alt="bildchen2" src="test2.jpg">
      </h2>
    </header>
  </body>
</html>
<script>
    document.getElementById('logo').className = 'start';
    document.getElementById('logo2').className = 'start';
    document.body.className = 'start';
    window.onload = function() {
    document.body.className = 'go';
    };
</script>


Verständlicher Code versteht wahrscheinlich jeder auf den ersten blick, keine erklärung notwendig denke ich oder?
Javascript am ende .. sonst findet er die ID bzw Classen nicht.
zum css

Code:


h1 {
margin: 0;
padding-top: 50px;
}
#logo {
display: block;
}
#logo.start {
margin-left: 630px;
opacity:0;
}
.go #logo {
margin-left: 0;
opacity: 1;
-moz-transition: margin-left 0.8s ease-out,
opacity 0.5s ease-in;
}

body.start {
opacity:0;
}

#logo2 {
  display: block;
}

#logo2.start {
  position: absolute;
  top: 0px;
  margin-left: 630px;
  margin-top: 0px;
  opacity: 0;
}
.go #logo2 {
  margin-left: 630px;
  margin-top: 300px;
  opacity: 1;
  -moz-transition: margin-top 0.8s ease-out, opacity 0.5s ease-in;
}


vll ne kleine erklärung
>> start ist die ausgangsposition .. sprich im ersten fall mit nem margin-left
>> go ist die endposition sprich im ersten fall margin-left wieder auf 0.
darain enthalten -moz-transition die eigentlich die animation beschreibt.
der margin left in 0.8 sekunden mit einem ease out
und opacity in 0.5 sekunden mit einem ease in.

zum bisschen javascript im html nochmal.
Den Codeschnipsel versteht wahrscheinlich jeder mit grundkenntnis.
er wechselt eigentlich nur die classe von start in go *zwinker*

bei fragen, anregungen, Kritik, lob, ergänzugen oder weiterem wissenswertem in dem Bereich hoffe ich auf eine antwort


grüße

Stefan

ps: mir ist bewusst, dass das für viele nichts besonderes ist.


Zuletzt bearbeitet von Sp4wNi am Fr 06.05.2011 10:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 06.05.2011 10:53
Titel

Antworten mit Zitat Zum Seitenanfang

Danke fürs Bereitstellen, ist für den ein oder anderen vielleicht interessant.

Ich verstehe trotzdem nicht, wozu der Klassenwechsel per JS nötig ist. Ich denke, dass transitions im Normalfall auf eine Pseudoklasse reagieren wie :hover. Das wäre das einfachste Beispiel und JS würde nicht benötigt werden.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Sp4wNi
Threadersteller

Dabei seit: 26.10.2010
Ort: Düsseldorf
Alter: 37
Geschlecht: Männlich
Verfasst Fr 06.05.2011 11:02
Titel

Antworten mit Zitat Zum Seitenanfang

Da hast du auf jedenfall recht.
Dennoch denke ich, dass es früher oder später, je nachdem was man für ein Projekt hat und wofür man die transition verwendet, sowieso auf javascript hinausläuft.
Desweiter brauch man für den HOVER eine interaktion mit dem User und es läuft nicht von alleine ab.

Dennoch kann ich bei gelegenheit (vielleicht schaff ich es heute noch) eine zweite version mit einem HOVER machen *zwinker*


EDIT:
Recht lustig:D
Gerade eigentlich kurz direckt mal rangemacht es mit HOVER umzusetzen.
Problem:
Wenn der man mit der Maus auf das Bild geht und natürlich die transition dank dem HOVER startet, dann muss man mit der maus auf dem Bild bleiben >> sprich man muss die Maus mitbewegen, weil sonst endet der Hovereffekt und das Bild ist sofort wieder auf anfangs position.
Das heißt, dass das mit dem Javascript dann doch etwas leichter und effektiver ist *zwinker*

grüße


Zuletzt bearbeitet von Sp4wNi am Fr 06.05.2011 11:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS-3 TRANSITION im IE
Div weicher öffnen per Transition
[Javascript] Image Transition / Ein- und Ausblenden?
hover befehl: mit transition und verlauf möglich?
[TUT] - CSS3 Techniken Transform - Transition - Animate
[CSS3] Problem: transition durch :hover 'hakt'
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Tipps & Tricks für Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.