Sujet Précédent Sujet Suivant

Jquery flyng text + zIndex petit calage...

damoz Messages postés 2 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 6 mars 2011 - 4 mars 2011 à 14:28
damoz Messages postés 2 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 6 mars 2011 - 6 mars 2011 à 18:48
Bonjour,
je me bats avec un jquery flying text fait avec un .animate que j'ai bidouillé (ultra newbie en javascript...) pour pouvoir faire du fade in fade out et par dessus ce fade out à la fin de cette animation avoir une autre animation avec un zIndex à 300 qui démarre et se superpose à la première div. Cela fonctionne à peu près mais j'ai un petit soucis, une fois mes textes positionnés, au moment du fadeout, ils continuent à se déplacer... mais pourquoi donc ?

un bout de mon code : le premier cad "filmons" se met bien en place et ne bouge plus jusqu'à ce que le mot1 apparaisse. Par contre le suivant (pour ne pas dire les suivants j'ai plusieurs phrase et mots dans la page), "createurs" se met en place et quand il se fade et que le mot2 arrive pour se positionner, "createurs" continue à se déplacer pendant son fadeout.


Voilà si vous avez un bout de solution, je suis preneuse, évidemment vous risquez de trouver laborieux mon code...mais je ne suis pas arrivée à mieux pour l'instant.
merci
lili

$("#filmons").css({
opacity: 0.5,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
opacity: 1,
marginLeft: "80px",
marginTop: "200px",
fontSize: "20pt",
letterSpacing: "0px",
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 6000,
});


$("#mot1").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "80px",
marginTop: "-30px",
fontSize: "20pt",
letterSpacing: "0px",
}, 12000 );


$("#createurs").css({
opacity: 0.5,
color: "#1881B6"
}).animate({
opacity: 1,
marginLeft: "150px",
marginTop: "80px",
fontSize: "14pt",
letterSpacing: "0px",
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 8000,
});

$("#mot2").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "150px",
marginTop: "-30px",
fontSize: "14pt",
letterSpacing: "0px",
}, 13000 );

1 réponse

Réponse 1 / 1
damoz Messages postés 2 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 6 mars 2011
6 mars 2011 à 18:48
Après plusieurs heures à traficoter tout ça, tout ça,

Pour ceux que cela intéresse voici un code qui fonctionne pour moi :

les phrases arrivent dans la page en fade in, puis elles s'effacent pour laisser la place à des mots qui apparaissent, disparaissent... et comme le tout en boucle et bien, ça recommence ! Mon code est peut être un peu laborieux mais en l'absence d'aide, j'ai po pu faire mieux !
lili

LE STYLE DU BACKGROUND :

<STYLE type="text/css">

#background2 {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0; }
</STYLE>

LE JAVASCRIPT :

<script type="text/javascript" src="http://www.votresite.net/js/jquery-1.4.2.js"></script>

<script src="http://www.votresite.net/js/jquery.backgroundPosition.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
animation();
})
function animation(){
$('#background2').css({backgroundPosition: '0px 0px'});

$("#filmons").css({
opacity: 0.5,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
opacity: 1,
marginLeft: "80px",
marginTop: "200px",
fontSize: "20pt",
letterSpacing: "0px",
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 6000,
});

$("#mot1").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "80px",
marginTop: "-30px",
fontSize: "20pt",
letterSpacing: "0px",
},
{
duration: 13000,
}).animate({
opacity: 0,
}, {
duration: 1000,
});

$("#createurs").css({
opacity: 0.5,
color: "#1881B6",
marginLeft: "700px",
marginTop: "80px",
}).animate({
opacity: 1,
marginLeft: "150px",
marginTop: "80px",
fontSize: "14pt",
letterSpacing: "0px",
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 8000,
});

$("#mot2").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "150px",
marginTop: "-30px",
fontSize: "14pt",
letterSpacing: "0px",
},
{
duration: 13000,
}).animate({
opacity: 0,
}, {
duration: 1000,
});

$("#histoire").css({
opacity: 0.5,
color: "#1881B6",
marginLeft: "300px",
marginTop: "10px"
}).animate({
opacity: 1,
marginLeft: "950px",
fontSize: "15pt" ,
letterSpacing: "0px",
marginTop: "-80px"
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 8000,
});

$("#mot3").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "950px",
fontSize: "15pt" ,
letterSpacing: "0px",
marginTop: "-120px",
},
{
duration: 13000,
}).animate({
opacity: 0,
}, {
duration: 1000,
});

$("#salons").css({
opacity: 0.5,
color: "#1881B6",
marginLeft: "100px",
marginTop: "50px",
}).animate({
opacity: 1,
marginLeft: "950px",
marginTop: "110px",
fontSize: "20pt" ,
letterSpacing: "0px",
},
{
duration: 5000,
}).animate({
opacity: 0,
}, {
duration: 8000,
});

$("#mot4").css({
opacity: 0,
color: "#1881B6",
marginLeft: "700px",
marginTop: "50px",
}).animate({
zIndex: 300,
opacity: 1,
marginLeft: "1050px",
marginTop: "-40px",
fontSize: "20pt" ,
letterSpacing: "0px",
},
{
duration: 13000,
}).animate({
opacity: 0,
}, {
duration: 1000,
});
}
setInterval("animation();",14000);

</script>


LE HTML :






Nous filmons
vos aventures humaines


Idées



Des créateurs
au service
de votre entreprise



Mise en valeur




Nous sommes attachés
à votre histoire


Passion



Nous vous accompagnons
sur les salons.


Emotion
0

Discussions similaires

Obtenir le z-index d'un élément définit en css
gr43 -
gr43 -

1 réponse
Retour à la ligne dans une text box
Nizam65 -
philippe laschweng 1 -

7 réponses
DIAPORAMA ALÉATOIRE AVEC TIMER
seufseuf -
neigedhiver -

31 réponses
text to speech et le francais :(
cs_atarax -
lastlonewolf -

4 réponses
Text Aleatoire
ideosphere -
BruNews -

3 réponses
Rejoignez-nous