• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Animationstechniken

burn4ever

Mitglied
Hallo,
beim betrachten dieser Website, welche ich übrigens ziemlich gelungen finde, habe ich mich gefragt was es alles für Techniken bezüglich sequentieller Animationen gibt.

Auf der Startseite werden ja Texte via margin etc. positioniert, geht ja alles mit css und transitions aber wie funktioniert der zeitliche Ablauf?

Flash und JavaScript basierend gibt es ja für solche Zwecke librarys wie diese von greensock.

Was könnt Ihr mir denn für solche Zwecke empfehlen?
 
Werbung:
So unterschiedlich können die geschmäcker sein, ich finde die grauenhaft bis nicht zu mutbar.

Flash ist da wohl eher kaum am werck erher jquery oder css3.

Cheffchen
 
Ja, das da kein Flash am Start ist schon klar.
Mir ging es jetzt auch mehr um Input wie man geschicktesten solche Sequenzen baut.
Mit css animation-delay, oder irgend welchen JavaScript Helferchen wie die von greensock?
 
Werbung:
Ich kann deine Website leider ned betrachten...

Code:
<DOCTYPE html!>

<html>

<head>

<title>Movie</title>
<meta charset="utf-8"/>

<style>

body {

    background-color: black;
   
    }
   
#leinwand {

    height: 480px;
    width: 640px;
    margin: auto;
    border-image: url(vorhang.png) 0 151 0 151 repeat;
    -webkit-border-image: url(vorhang.png) 0 151 0 151 repeat;
    border-width: 0 151px;
    border-style: solid;
    overflow: hidden;
    text-align: center;
    font-size: 50px;
    color: yellow;
    font-family: fantasy;
    font-weight: bold;
    text-shadow: 0 0 10px yellow,
                0 0 10px orange,
                0 0 10px red;
    text-align: center;
    perspective: 100px;
    -webkit-perspective: 100px;
   
    }
   
#viewport {

    width: 640px;
    height: 480px;
    transform: rotateX(15deg);
    -webkit-transform: rotateX(15deg);
    overflow: hidden;
   
    }
   
#gluh {

    font-size: 50px;
    color: yellow;
    font-family: fantasy;
    font-weight: bold;
    text-shadow: 0 0 10px yellow,
                0 0 10px orange,
                0 0 10px red;
    text-align: center;
   
    }
   
p {

    color: yellow;
    font-size: 20px;
    }
   
@keyframes scroll {

    from {top: 400px;}
    to {top: -1500px;}
   
    }
   
@-webkit-keyframes scroll {

    from {top: 400px;}
    to {top: -1500px;}
   
    }
   
#film {

    position: relative;
    animation-name: scroll;
    animation-duration: 80s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
   
    -webkit-animation-name: scroll;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
   
   
</style>
   
   

</head>

    <body>
   
        <div id="leinwand">
       
        <div id="viewport">
       
        <div id="film"><p>Es war einmal vor langer Zeit in einer weit,<br>weit entfernten Galaxis....</p><br>


Browser Wars<br>
Episode IV<br>

EINE NEUE WEBSITE
<p>
Es herrscht Bürgerkrieg. Die Webentwickler, <br>deren Computer von einem geheimen Stützpunkt<br>
aus angreifen, haben ihren ersten Sieg <br>gegen das böse JavaScript errungen.<br>

Während der Schlacht ist es Spionen<br> der Designer gelungen, Geheimpläne über den<br> absoluten Code
der Hacker in ihren Besitz <br>zu bringen, den TODESCODE, ein Superscript,<br> dessen
Macht ausreicht, um einen<br> ganzen Planeten zu vernichten.<br>

Verfolgt von den finsteren Agenten<br> der Hacker, jagen Scripter und Designer<br> an Bord ihres Sternenschiffes
nach Hause,<br> als Hüter der erbeuteten Pläne,<br> die ihr Volk retten und der <br>Webentwicklung die Freiheit <br>wiederbringen könnten....</p>
</div>
</div>
</div>
       
   
   
    </body>
   
</html>

Habe ich eben gemacht, meinst du sowas?
Das Bild für den Vorhang hast du ned, ist aber auch egal, der Effekt ist trotzdem da ;)

transitions wäre die eine Überlegung, das andere sind keyframes. Muss man sich immer entscheiden welche man nimmt. Aber es lassen sich sehr nette Animationen damit machen.
 
Zuletzt bearbeitet:
Zurück
Oben