Background animée

[alex6levrai]

Bonsoir,
je souhaiterai créer un background comme celui-ci : http://www.newmuseum.org/ qui me permet de faire défiller 3/4 photos.
Voici ma page www.musthaveonline.fr, quelqu'un pourrai m'aider ou m'orienter ?

Merci

 

[PA5CAL]

Bonsoir

Une petite analyse du code de la page que tu indiques permettrait de te donner quelques idées.

Remarque que les images apparaissent grâce aux lignes suivantes:

[SIZE="1"][COLOR="SlateGray"](...)[/COLOR]

<div id="image_0"></div>
<div id="image_1"></div>

[COLOR="SlateGray"](...)[/COLOR]

<script type="text/javascript" charset="utf-8" src="/javascripts/homepage_data.js"></script>
<script type="text/javascript" charset="utf-8" src="/javascripts/homepage_images.js"></script>

[COLOR="SlateGray"](...)[/COLOR][/SIZE]

Puis regarde les scripts correspondants (celui-ci et celui-là).

Il n'est pas permis de les recopier, mais tu pourrais t'en inspirer...

 

[zepatente]

Bonjour,

vu que ton sitye est fait sur iweb , les conseils de Pascal devront être mis en place après publication de ton site . Et n'oublies pas de faire une sauvegarde de tes changements vu que 'iweb écrase tout à chaque publication

@+

 

[alex6levrai]

C'est gentil de votre aide,
m'en inspirer mais ... sans connaissance, ca va etre dur dur

 

[momo-fr]

Certainement moins simple qu'il n'y paraît si tu ni connais rien.

Ce système est basé sur un effet BlindDown contenue dans la librairie prototype désignée dans le head :

<script type="text/javascript" src="/javascripts/prototype.js?1209145428"> ->base générale
<script type="text/javascript" src="/javascripts/effects.js?1209145428"> -> module des effets

Tu as ensuite 2 div traitées par cet effet :

<div id="image_0" style="background: transparent url(/assets/images/homepage/1.jpg) no-repeat scroll 0% 0%; height: 730px; width: 1000px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
<div id="image_1" style="background: transparent url(/assets/images/homepage/3.jpg) no-repeat scroll 0% 0%; height: 730px; width: 1000px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; opacity: 0.999999;"/>

Elles reçoivent les données (vitesse d'affichage, chemin du dossier des images) par le script placé en dessous :

<script src="/javascripts/homepage_images.js" charset="utf-8" type="text/javascript">

Enfin il y a aussi un bouton "?" pour afficher la légende des photos dans une autre div :

<div id="photocredit" style="display: none;">New Museum, 235 Bowery, New York, NY 10002, USA. Photo by Dean Kaufman. 
<a href="/about/new_building/">MORE  ></a>


</div>

Et pour celle-ci les données sont traitées par le script suivant :

<script src="/javascripts/homepage_data.js" charset="utf-8" type="text/javascript">

Si tu utilises iWeb passe ton chemin, ça n'a rien à voir avec ce soft. Impossible à implémenter sans coder dans le dur ta page. Soit tu te mets au développement web d'urgence, soit tu trouves une personne compétente pour t'aider... Pascal par exemple... :siffle:

 

[PA5CAL]

Voici un exemple de ce qui peut être fait. Il faut lancer "dia.html". (Désolé pour la pub au premier chargement des pages).

Regarde le code source à partir du navigateur (Alt+Pomme+U sous Safari).

Cela peut se rajouter simplement dans n'importe quelle page existante, et ne nécessite pas de librairies supplémentaires en dehors du fichier "diaporama.js" fourni.

J'ai fait ça rapidement, mais ça tourne bien avec les dernières versions de Safari, Firefox, Opera, Netscape, et IE 7. Par contre je n'ai pas testé avec d'autres navigateurs.