Comment transformer une animation flash en javascript

**titiphp** · 30/11/2015, 15h40

Bonjour à tous

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

**SpaceFrog** · 30/11/2015, 15h57

une piste http://www.w3schools.com/css/css3_3dtransforms.asp

**titiphp** · 08/12/2015, 19h19

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

**NoSmoking** · 08/12/2015, 19h57

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.

**SylvainPV** · 08/12/2015, 21h08

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

**melka one** · 08/12/2015, 22h13

jour

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**titiphp** · 10/12/2015, 18h24

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

Comment transformer une animation flash en javascript

JavaScript

Discussions similaires

Partager

Partager