C'est donc plus une question de curiosité qu'une vraie question, alors soyez indulgent avec moi. Je viens de vérifier:

http://www.apple.com/iphone/

Et le diaporama de couverture me semble vraiment impressionnant. Je ne veux pas le reproduire, mais je suis vraiment intéressé par la façon dont cela fonctionne. D'après mon inspection, ils utilisent juste un tas de transitions / transformations chronométrées de webkit, mais je ne sais pas exactement ce qui se passe.

De plus, existe-t-il un moyen facile de créer ce comportement sans le coder en dur, car c'est ce que je ferais en ce moment.

1
nambrot 6 oct. 2011 à 04:58

3 réponses

Meilleure réponse

Je réponds juste à ma propre question, car personne ne pourrait vraiment me proposer une réponse en dehors du codage en dur. Je suppose qu'Apple y met beaucoup d'efforts. Je suis toujours impressionné par l'utilisation sophistiquée des transitions CSS, en particulier là où les objets passeraient dans la prochaine image

2
nambrot 12 oct. 2011 à 18:26

Voici une explication: http://johnbhall.com/iphone-4s/

3
mga911 20 févr. 2012 à 04:28

Voici une démonstration fonctionnelle avec le code source.

Fondamentalement, l'idée est,

  • précharger toutes les images

  • il y a une minuterie, qui se déclenche toutes les N secondes

  • lorsque le minuteur se déclenche, démarrez une animation de transformation, qui fait glisser la nouvelle image dans.


Les explications sur l'idée vous permettent d'arrêter / inverser / mettre en pause / reprendre, d'arrêter automatiquement après un cycle, etc.


Le nom commercial de cet effet est "slider". afin que vous puissiez google pour slider et trouver beaucoup de discussions. Il y a des curseurs pour jquery (nivoslider), il y en a un pour mootools (slideitmoo), il y a des options sans framework (comme la démo scriptiny que j'ai liée), et ainsi de suite.

-1
Cheeso 6 oct. 2011 à 01:18