Comment transformer une animation flash en javascript

Version imprimable

30/11/2015, 15h40
titiphp

1 pièce(s) jointe(s)

Comment transformer une animation flash en javascript

Bonjour à tous :D
J'ai un petit souci : je refais un site qui existait en flash mais je n'arrive pas à obtenir les mêmes effets avec du css3 ou du javascript pour
l'animation de l'intro : un mot tout petit qui en faisant un looping arrive en gros. J'ai bien trouvé des scripts pour faire l'effet zoom mais pour le looping je n'y arrive pas.
Quelqu'un peut-il m'aider ?
Vous pouvez trouver le rendu que je souhaiterais avoir autrement qu'en langage flash à l'adresse suivante :
http://hollandergallery.net

Merci à ceux qui m'aideront.
Bonne fin de journée:P
30/11/2015, 15h57
SpaceFrog

une piste http://www.w3schools.com/css/css3_3dtransforms.asp
08/12/2015, 19h19
titiphp

:oops:non mon problème n'est pas résolu car ce n'est pas une forme que je veux changer mais un texte qui partant de 0px fait un looping en grossissant et au final fait 30px:P
08/12/2015, 19h57
NoSmoking

Citation:

J'ai bien trouvé des scripts pour faire l'effet zoom mais pour le looping je n'y arrive pas.

il y a également de la rotation dans l'air

Les transformations en CSS3.
08/12/2015, 21h08
SylvainPV

Tu as essayé https://developers.google.com/swiffy/ ?

jour

avec les transformation css3d couplé aux transition css et en modifiant simplement la class ca donne ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Déplacement images</title>
<style>
html, body{
  margin:0;
  padding:0;
  font-family:Verdana, sans-serif;
    background:gray
}
 
.el{
        transform:rotateX(-270deg);
        position:absolute;
        width:100%;
        height:5%;
        top:45%;
        font-size: 12px;
        text-align:center;
}
 
.el_rot{
        transition: all 2s;
        position:absolute;
        transform:rotateX(0deg);
        width:100%;
        height:30%;
        font-size: 140px;
        margin:auto;
        top:35%;
        text-align:center;
}
 
</style>
<script>
 
 
function tourne(e) {
                
    var elem = document.getElementById('el');
    elem.className='el_rot';
    }
 
</script>
</head>
<body>
<div id="el" class="el">
 hollander
</div>
<button onclick="tourne()">appui</button>
</body>
</html>

10/12/2015, 18h24
titiphp

:lol:Super merci Melka one, c'est exactement ce que je voulais, je potasse ton code, encore merci et bonnes fêtes de Noël.:P