Quel type de transition (s'il s'agit d'une transition) ce site Web lorsque vous cliquez sur les liens du menu principal?jQuery, transition CSS3 ou HTML5?
http://ivalladare7.wix.com/testepi#!home/mainPage
Il est juste un test, mais je pense que l'idée est claire. Est-ce HTML5, CSS ou jQuery/JavaScript?
Je l'ai vu dans quelques endroits mais je ne sais pas comment l'implémenter parce que je ne sais pas comment trouver un exemple.
Toute aide appréciée
Il semble que ce soit une transition CSS.
Si vous voyez la règle:
.wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1 {
-webkit-transition: color 0.4s ease 0s;
}
Mais vous pouvez obtenir quelque chose de mieux à: http://css3generator.com/
Choisissez des transitions et utiliser cet outil. Cela vous aidera à obtenir quelque chose de plus inter-navigateur.
C'est une transition CSS (et pas très bonne car c'est webkit seulement). Une meilleure version avec préfixes fournisseur serait:
.menu a {
color: #999;
transition: color 0.4s ease; /* vendorless fallback */
-o-transition: color 0.4s ease; /* opera */
-ms-transition: color 0.4s ease; /* IE 10 */
-moz-transition: color 0.4s ease; /* Firefox */
-webkit-transition: color 0.4s ease; /*safari and chrome */
}
.menu a:hover {
color: #340065;
}
Si vous voulez dire que le contenu de glissement, puis c'est Javascript.
En fait, attendez, voulez-vous dire le contenu qui tombe dans OU la couleur qui s'estompe? – SpaceBeers
La structure HTML semble un peu intimidante en un coup d'œil. Je ne suis pas sûr de quelle transition (?) Voulez-vous dire, mais je présume que c'est le contenu glissant quand nous cliquons sur le menu. Au début, je soupçonne que c'est une sorte de Javascript (jQuery le plus probable), car il ajoute des pistes à l'URL du site dans la barre d'adresse. Ensuite, j'essaie d'afficher la source (en utilisant l'élément d'inspection de Chrome) et j'ai trouvé qu'il n'y a pas d'élément <a> dans le menu. Je n'ai trouvé que ceci:
Ensuite, pour être sûr, je désactive Javascript sur le navigateur. Le contenu glissant cesse de fonctionner. Donc, oui, c'est Javascript.
EDIT:
En fait, si vous essayez d'afficher la source (Ctrl + U) directement, vous trouverez un tas de lignes Javascript. Et si vous essayez de Ctrl + F le texte Home, vous le trouverez dans les lignes de Javascript. Donc, c'est en effet un JS.
Oui, je veux dire le contenu coulissant. Désolé si je n'étais pas clair. Je suis d'accord c'est javascript mais quoi. Je ne veux pas exactement la même solution juste et un exemple de la façon de faire glisser le contenu. Je pense que c'est un effet vraiment cool. – nachovall
Je pense que cela vient d'un constructeur de site (Wix) qui a utilisé pour faire des sites Flash. Le code est fou. – SpaceBeers
Certainement un constructeur de site quand le code est aussi décourageant que ça ... au fait, @nachovall, ce n'est pas exactement le même mais je suppose que c'est un peu similaire: http://www.queness.com/resources/html /scroll/vertical.html Le tutoriel se trouve ici: http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery – deathlock
Les transitions faciles sur ce site sont faites avec des transitions css3. Cependant le glissement des transitions de contenu est fait avec TweenMax (Greensock)
C'est un script léger qui peut fonctionner parfaitement avec jQuery ou vanilla js spécialement pour l'interpolation/animation.
Commander leur démonstration (animée avec GreenSock)
Il est sur Internet, vous pouvez regarder la source. –
CSS3 et les nouveaux apis javascript font partie de HTML5, ils ne sont pas séparés.Je ne pense pas que vous comprenez ce que le HTML5 est exactement, je vous recommande de lire cette intro http://www.html5rocks.com/fr/pourquoi – BBog
@BBog Vous avez raison. Je vais jeter un coup d'oeil à votre lien. Merci. – nachovall