Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Sp4wNi
Threadersteller
Dabei seit: 26.10.2010
Ort: Düsseldorf
Alter: 37
Geschlecht:
|
Verfasst Fr 06.05.2011 10:43
Titel -moz-transition |
|
|
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
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
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 06.05.2011 10:53
Titel
|
|
|
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.
|
|
|
|
|
Anzeige
|
|
|
Sp4wNi
Threadersteller
Dabei seit: 26.10.2010
Ort: Düsseldorf
Alter: 37
Geschlecht:
|
Verfasst Fr 06.05.2011 11:02
Titel
|
|
|
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
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
grüße
Zuletzt bearbeitet von Sp4wNi am Fr 06.05.2011 11:11, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ä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'
|
|
|
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.
|
|