Fenêtres de démarrage de style Windows 8 pour le site Web

Question

Je travaille sur un projet qui donne aux gens une nouvelle page d'accueil du navigateur à afficher lorsqu'ils ouvrent la fenêtre de leur navigateur ou un nouvel onglet. Cette page contiendra des icônes/carreaux de sites Web populaires et, à un moment donné, leurs propres sites Web personnalisés. Ce que je veux faire est d'avoir des carreaux qui ressemblent à ceux de Windows 8 et avoir l'effet de bascule et zoom en plein écran qu'ils font dans l'écran de démarrage réel de Windows 8 en cliquant dessus, où il montrera le icône et titre du site pendant le chargement de la page. Je ne cherche pas à charger le site dans la page d'accueil, car il les dirigera vers le site sur lequel on clique, mais jusqu'à ce qu'ils arrivent sur le site, il montrera l'icône et le titre du site sur l'écran.

Toutes les suggestions sur la façon dont cela peut être réalisé avec quelques exemples seraient impressionnantes.

Merci d'avance pour votre temps, et j'attends votre réponse avec impatience.

Answer 1

Il existe une pseudo-classe si vous voulez avoir des styles spécifiques en plein écran. https://developer.mozilla.org/es/docs/Web/CSS/:fullscreen

Je pense que la plupart de vos problèmes seront: la sélection d'un système de grille ou thechnique à la mise en page de ces tuiles. Les effets de zoom et de bascule doivent être effectués avec la propriété transform.

Commander ce que j'ai trouvé: http://metroui.org.ua/tiles.html (guide de style avec composants Win8)

Voici un autre exemple par l'incroyable Sara Soueidan: sarasoueidan. com/demos/windows8-animations (ne pouvait pas coller le lien en raison de mes points de réputation faible)

Si vous avez besoin de JS ou que vous voulez juste aller avec des compatibilités cross-navigateurs, consultez cette lib. Il est tout simplement génial: GSAP

Tip Pro: cela va être votre ami: backface-visibility: hidden;