Wordpress Arriere plan de mon site avec des effects

Fermé
johnv12 Messages postés 8 Date d'inscription mercredi 5 mars 2014 Statut Membre Dernière intervention 30 mars 2014 - Modifié par johnv12 le 5/03/2014 à 11:31
johnv12 Messages postés 8 Date d'inscription mercredi 5 mars 2014 Statut Membre Dernière intervention 30 mars 2014 - 10 mars 2014 à 16:31
bonjour a tous j' ai créer un petit site wordpress
 http://www.optionbinairepro.fr 
ce site est un comparatif de brokers d' option binaire BREF...
je souhaiterais mettre dans mon arriere plan des images (logo) qui tombent tout le long de la visite
comme un peu l' effect arriere plan que l' on vois souvent a noel avec de la neige qui tombe

merci
A voir également:

4 réponses

Blockiestbeatle Messages postés 84 Date d'inscription vendredi 27 mai 2011 Statut Membre Dernière intervention 20 mars 2014 5
Modifié par Blockiestbeatle le 5/03/2014 à 11:53
Bonjour,

Beau site! je n'y connais rien sur les brokers mais je vais lire ta doc.

J'ai regardé dans ton code source, à mon avis ce lien pourrait t'aider: https://www.w3schools.com/css/css3_animations.asp

Véritable bible du CSS, avec explications, codes, tutos,... tout! (pour info il ne font pas que CSS).

Plus précisément, affiche le 3e "Try it yourself", je pense que cela te donera une bonne base pour résoudre ton problème: https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

Tiens moi au courant svp,

@+

Gilles
0
Blockiestbeatle Messages postés 84 Date d'inscription vendredi 27 mai 2011 Statut Membre Dernière intervention 20 mars 2014 5
5 mars 2014 à 12:51
Ah aussi, N'oublie pas de supprimer ou modifier le "Acceuil Widget 3" ;)

Tu es parti d'un template de design mais il est resté dedans!

(Page acceuil; tout en bas a droite)
0
johnv12 Messages postés 8 Date d'inscription mercredi 5 mars 2014 Statut Membre Dernière intervention 30 mars 2014
5 mars 2014 à 13:40
salut Merci pour ta réponse et tes conseils
le problème c'est que je suis complètement novice
je souhaiterais
- que les images défilent verticalement du haut vers le bas
- que des qu'elles arrivent en bas elle disparessent
- que ca soit plusieurs images differentes qui tombent en même temps
- et que ca soit en continue
je sais que ca fait beaucoup mais derniere petite chose ou dois je coller le code
0
Blockiestbeatle Messages postés 84 Date d'inscription vendredi 27 mai 2011 Statut Membre Dernière intervention 20 mars 2014 5
6 mars 2014 à 09:00
Il faut le faire en changeant les paramètres du code qu'il donne au début..

Par exemple si dans un "try it yourself" tu mets ceci à la place du code de base tu as déjà le déplacement haut/bas, la disparition qui donne une réapparition en haut de page..

Pour plusieurs images il faut définir plusieurs animation du même type et ce sont les paramètres que tu lui donne qui en feront son comportement..

Par du début du tutoriel du site pour apprendre comment coder ton projet.

Et pour placer le code, tu dois avoir accès au code source de ta page que tu as fais avec wordpress, je ne connais pas le mode de développement de ce type de site, personnellement on est jamais mieux servi que par soit même, et sans contrainte ;)

Si tu as accès au code, il faut placer le code de tes animations dans ce dernier:

<head>
<style>

// Le code de tes animations

<head>
<style>

Les balise head et style sont déjà présentes avec du code dedans, il faut ajouter tes animations avec.

Pour avoir une idée de ton code source: clic droit sur ton site > afficher le code source de la page.

Pour commencer fait des animations avec de simples carrés, on sait les remplacer par après avec nos propres images...


Voici le code pour haut/bas + Disparition + Continu:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
0% {background:red; left:100px; top:0px;}
25% {background:yellow; left:100px; top:100px; width:50px; height:50px;}
50% {background:blue; left:100px; top:200px; width:100px; height:100px;}
75% {background:green; left:100px; top:300px; width:50px; height:50px;}
100% {background:red; left:100px; top:400px; width:100px; height:100px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:100px; top:0px;}
25% {background:yellow; left:100px; top:100px; width:50px; height:50px;}
50% {background:blue; left:100px; top:200px; width:100px; height:100px;}
75% {background:green; left:100px; top:300px; width:50px; height:50px;}
100% {background:red; left:100px; top:400px; width:100px; height:100px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

0
johnv12 Messages postés 8 Date d'inscription mercredi 5 mars 2014 Statut Membre Dernière intervention 30 mars 2014
10 mars 2014 à 16:31
salut merci pour ton aide je vais faire avec la balise marquee
0