Le blackout de chez Apple

[alargeau]

Bonsoir à tous (et toutes bien sûr),

Je me permets de poster ici car j'ai un site sous WordPress (donc en php) et je suis tombé l'autre jour sur le site d'Apple. Avec la sortie du nouveau MacBook Air, il y a une petite animation sur l'accueil qui est tout à fait sympathique.

J'ai regardé les codes et l'avantage c'est que tout est visible. Je ne sais pas en quoi est écrit le site Apple mais ça me semble être du html et des appels javascript (ac_blackout.js) et css (ac_blackout.css).


J'aimerais donc avoir une petite aide pour essayer de comprendre cette animation et pouvoir ensuite la reproduire sur mon site internet.

Merki !

 

[Niconemo]

C'est un site tout à fait ordinaire en XHTML/CSS et l'effet dont tu parle utilises effectivement le javascript que tu mentionnes associé à une feuille de style CSS.

La logique de base de cet effet est assez simple :

1. Le javascript utilise la feuille de style pour tout passer en noir (la page web et l'image).
2. Puis le javascript fait apparaitre l'image progressivement et fait une pose.
3. Puis le javascript fait apparaitre le reste de la page progressivement.

Pour le reproduire sur son site il suffit de se former au XHTML et aux CSS puis de reproduire les appels javascript du site d'Apple… (en l'occurence ça semble assez facile avec le pré-requis que je viens de donner).

Toute l'efficacité de cet effet vient de la sobriété du graphisme du site. Pas de l'effet lui-même.

Je ne vois pas quoi dire de plus.

 

[alargeau]

Merci Niconemo pour cet éclaircissement, maintenant j'ai bien compris tous les différents fichiers javascript.
Mais si le site est en PHP, est-ce que ce serait bien différent ?

 

[Niconemo]

Le PHP sert à générer du contenu comme le HTML (en gros)… PHP et HTML ne s'opposent donc pas.

Quand je dis que le site d'Apple est en HTML, ça ne veut pas dire que ce HTML n'a pas été généré par du PHP (et en fait c'est même plus que probable qu'il le soit, mais ça ne change rien au fonctionnement du JS dans le HTML).

Le PHP est un langage interprété côté serveur pour générer du code lisible côté navigateurs (comme le HTML, le javascript, les CSS) et aussi dialoguer avec des bases de donnée (SQL ou autre) et éventuellement en extraire du contenu traduit en HTML. Autrement dit : une page en PHP peut offrir beaucoup plus de possibilité qu'une page HTML mais, du côté du navigateur, c'est toujours du HTML qui arrive ; le PHP a été interprété avant, sur le serveur du site.

 

[cherryblue]

le blackout de la page d'accueil du site Apple est basé sur la librairie scriptaculous et prototype