{"id":227828,"date":"2022-09-27T16:51:00","date_gmt":"2022-09-27T13:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227828"},"modified":"2022-11-09T02:42:26","modified_gmt":"2022-11-08T23:42:26","slug":"excellentes-transitions-de-page-css-que-vous-pouvez-utiliser-aujourdhui-sur-votre-site-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/excellentes-transitions-de-page-css-que-vous-pouvez-utiliser-aujourdhui-sur-votre-site-web\/","title":{"rendered":"Excellentes transitions de page CSS que vous pouvez utiliser aujourd’hui sur votre site Web\u00a0"},"content":{"rendered":"\n

Les animations CSS font r\u00e9f\u00e9rence aux animations utilis\u00e9es pour manipuler et mettre en valeur les \u00e9l\u00e9ments HTML \u00e0 l’aide de CSS – c’est-\u00e0-dire avec peu ou pas de JavaScript, et certainement pas besoin de Flash.<\/p>\n

Comme de nombreux concepteurs le savent, l’utilisation de JavaScript et de Flash pour les animations peut \u00eatre inutilement gourmande en ressources et, dans le cas de Flash, peu s\u00e9curis\u00e9e.<\/p>\n

Les transitions de page CSS sont des transitions anim\u00e9es entre les pages qui sont utilis\u00e9es pour donner aux sites Web une touche suppl\u00e9mentaire qui les distingue comme \u00e9tant de premier ordre et dignes d’une bonne navigation. Et lorsqu’ils sont appliqu\u00e9s correctement, ils peuvent non seulement donner une impression de vivacit\u00e9, mais aussi aider grandement \u00e0 la navigation.<\/p>\n

Cet article cr\u00e9\u00e9 par notre \u00e9quipe de wpDataTables (le meilleur plugin de tableau WordPress<\/a>) couvrira ce que vous devez savoir sur les transitions de page CSS et leur fonctionnement, ainsi que la liste de certains des meilleurs que vous pouvez utiliser d\u00e8s maintenant. Faites d\u00e9filer vers le bas pour en savoir plus.<\/p>\n

L’importance d’ajouter des transitions de page CSS<\/h2>\n

M\u00eame s’il peut sembler que l’animation<\/a> n’a pas beaucoup d’importance lors de la cr\u00e9ation d’un site Web anim\u00e9<\/a> – ou, du moins, pas autant que la r\u00e9activit\u00e9 et la convivialit\u00e9 de base du site – la v\u00e9rit\u00e9 est que l’animation peut faire toute la diff\u00e9rence entre un site r\u00e9ussi et engageant site et un al\u00e9sage total.<\/p>\n

Les transitions de page repr\u00e9sentent une pratique souvent n\u00e9glig\u00e9e dans la conception Web, et c’est dommage compte tenu de leur impact. Ils peuvent changer compl\u00e8tement l’ambiance d’un site Web et l’exp\u00e9rience que les visiteurs en ont<\/a>.<\/p>\n

De nombreux concepteurs ont tendance \u00e0 \u00e9viter les animations car ils pensent qu’ils sont des mangeurs de ressources qui ne feront que ralentir le site Web et le ralentir. Cela ne se produit que si les animations ne sont pas impl\u00e9ment\u00e9es correctement, et c’est l\u00e0 que les transitions de page CSS changent la donne.<\/p>\n

Ce sont des moyens cr\u00e9atifs et efficaces d’ajouter des animations fluides \u00e0 votre site Web. Le CSS est un outil puissant qui peut aider un site Web \u00e0 d\u00e9velopper sa personnalit\u00e9. Vous trouverez ci-dessous une liste d’exemples qui devraient vous inciter \u00e0 utiliser les transitions de page CSS pour votre propre site\u00a0:<\/p>\n

Exemples de transitions de page CSS<\/h2>\n

Mise en page sympa avec des transitions de page fantaisistes et un menu hors canevas<\/h3>\n

\"Excellentes<\/a><\/p>\n

Cette mise en page de transition de page Web a \u00e9t\u00e9 cr\u00e9\u00e9e par NikolayTalanov et elle n’a l’air bien qu’en plein \u00e9cran sur un grand bureau. L’id\u00e9e originale a \u00e9t\u00e9 impl\u00e9ment\u00e9e dans le canevas HTML5, mais Nikolay l’a intelligemment adapt\u00e9e \u00e0 une version CSS.<\/p>\n

Les transitions de page CSS ont fi\u00e8re allure, mais l’inconv\u00e9nient est que les utilisateurs peuvent rencontrer des blocs qui tremblent ou disparaissent si les valeurs d’index z de votre site ne sont pas correctement configur\u00e9es.<\/p>\n

folio.transitions<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

Cette transition de page a \u00e9t\u00e9 cr\u00e9\u00e9e et lanc\u00e9e par Foliodot et c’est l’une des pr\u00e9f\u00e9r\u00e9es du march\u00e9. Il a une page pr\u00eate \u00e0 l’emploi et des transitions de section qui sont tout simplement magnifiques. Ils auraient fi\u00e8re allure sur n’importe quel site Web, quel que soit son type.<\/p>\n

Pagination et mise en page avec des div’s d’arri\u00e8re-plan coup\u00e9s<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

Nikolai Talanov a propos\u00e9 l’une des meilleures transitions de page CSS que vous verrez. Talanov a \u00e9labor\u00e9 ce concept en gardant \u00e0 l’esprit que de nombreuses personnes utilisent leur clavier pour naviguer sur un site, en cliquant simplement de haut en bas.<\/p>\n

Les transitions de page fonctionnent bien de cette fa\u00e7on, et elles sont \u00e9galement assez r\u00e9actives. Il y a aussi quelques probl\u00e8mes de performances. Le contenu a tendance \u00e0 se charger plus lentement au d\u00e9but, et les utilisateurs peuvent rencontrer des probl\u00e8mes lors de l’ouverture d’une page avec des tonnes de contenu.<\/p>\n

Transitions de curseur<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

MirkoZoric a cr\u00e9\u00e9 ces transitions de page CSS en explorant le style Swiper. Il utilise le populaire effet de parallaxe et joue avec des filtres pour obtenir un effet \u00e9tonnant.<\/p>\n

Transition Sucette<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

Lollipop, comme Jeff McCarthy a appel\u00e9 sa transition de page, est similaire \u00e0 l’apparence d’Android 5.0. La transition de page imite l’animation de tiroir\/dossier d’Android 5.0 Lollipop qui utilise un effet de type sucette circulaire.<\/p>\n

le contexte<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

Kontext a \u00e9t\u00e9 cr\u00e9\u00e9 par Hakim El Hattab et c’est assez simple – c’est une transition de changement de contexte qui souligne que le contexte de la page a chang\u00e9. Vous \u00eates probablement habitu\u00e9 \u00e0 ce type de transition si vous avez utilis\u00e9 un appareil qui ex\u00e9cute iOS.<\/p>\n

Mise en page sympa avec une animation cha\u00eenable complexe<\/strong><\/h3>\n

\"Excellentes<\/a><\/p>\n

Une autre de NikolayTelanov, cette transition de page est bas\u00e9e sur le prototype de site Web satellite<\/a> et elle est cr\u00e9\u00e9e en ajoutant 2 classes avec JavaScript et un simple survol. Il s’agit d’une fonctionnalit\u00e9 de d\u00e9monstration et elle a des animations encha\u00een\u00e9es.<\/p>\n

Il s’agit d’une transition r\u00e9active qui est \u00e9galement facile \u00e0 maintenir au niveau SCSS.<\/p>\n

H\u00e9, saviez-vous que les donn\u00e9es peuvent aussi \u00eatre belles\u00a0?<\/h3>\n

wpDataTables<\/a> peut le faire de cette fa\u00e7on. Il y a une bonne raison pour laquelle c’est le plugin WordPress #1 pour cr\u00e9er des tableaux et des graphiques r\u00e9actifs.<\/p>\n

\"Excellentes<\/a><\/p>\n

Un exemple r\u00e9el de wpDataTables dans la nature<\/p>\n

Et c’est vraiment facile de faire quelque chose comme \u00e7a :<\/p>\n

    \n
  1. Vous fournissez les donn\u00e9es du tableau<\/li>\n
  2. Configurez-le et personnalisez-le<\/li>\n
  3. Publiez-le dans un article ou une page<\/li>\n<\/ol>\n

    Et ce n’est pas seulement joli, mais aussi pratique. Vous pouvez cr\u00e9er de grandes tables avec jusqu’\u00e0 des millions de lignes<\/a>, ou vous pouvez utiliser des filtres et une recherche avanc\u00e9s<\/a>, ou vous pouvez vous d\u00e9cha\u00eener et les rendre modifiables<\/a>.<\/p>\n

    "Ouais, mais j’aime trop Excel et il n’y a rien de tel sur les sites Web". Oui, c’est vrai. Vous pouvez utiliser la mise en forme conditionnelle<\/a> comme dans Excel ou Google Sheets.<\/p>\n

    Vous ai-je dit que vous pouviez \u00e9galement cr\u00e9er des graphiques<\/a> avec vos donn\u00e9es\u00a0? Et ce n’est qu’une petite partie. Il y a beaucoup d’autres fonctionnalit\u00e9s<\/a> pour vous.<\/p>\n

    Transitions de texte de type Uber<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Nicolas Engler a cr\u00e9\u00e9 ces traductions qui ressemblent \u00e0 celles que vous pouvez voir sur Uber. Ils passent d’une diapositive \u00e0 l’autre tr\u00e8s facilement et sont parfaits pour les interfaces simples.<\/p>\n

    Carrousel 3D divis\u00e9<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Comme son nom l’indique, Paul Noble a eu une id\u00e9e int\u00e9ressante qui utilise le mod\u00e8le de carrousel, seulement qu’il est bas\u00e9 sur une transition de panneau divis\u00e9 dans trois dimensions diff\u00e9rentes. C’est certainement l’un des styles de transition de page CSS les plus utilis\u00e9s.<\/p>\n

    Effet de r\u00e9v\u00e9lation de page multicouche factice<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Mehmet Burak Erman est le cr\u00e9ateur de ce bel effet de r\u00e9v\u00e9lation de page. Il a \u00e9t\u00e9 construit dans un style multicouche, \u00e0 l’aide de HTML, CSS et JavaScript. Actuellement, la transition de page est compatible avec Chrome, Firefox, Opera et Safari.<\/p>\n

    Transition de page de tuiles (CSS)<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Milan Ricoul a cr\u00e9\u00e9 cette transition de page de tuiles en utilisant CSS et elle a en effet obtenu une grande reconnaissance. Milan l’a cr\u00e9\u00e9 en utilisant la combinaison classique HTML, CSS et JavaScript et il est compatible, comme celui de Mehmet Erman, avec la plupart des navigateurs.<\/p>\n

    Page de transition d’article<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    C’est l’une des transitions de page CSS cr\u00e9\u00e9es par Muna. Il a \u00e9t\u00e9 initialement inspir\u00e9 de ReAlign 2 sur le site Web Dribble en utilisant CSS, mais il est \u00e9galement bas\u00e9 sur HTML et JavaScript. Par rapport aux autres transitions de page sur le Web, cela est \u00e9galement compatible avec Microsoft Edge.<\/p>\n

    Transition de page simple<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Il n’y a pas grand-chose \u00e0 dire sur cette transition de page \u2014 elle est exactement comme elle est nomm\u00e9e: simple. Il a \u00e9t\u00e9 cr\u00e9\u00e9 par ktsn et est bas\u00e9 sur HTML-Pug, CSS\/SCSS et JavaScript avec vue.js. Vous devriez essayer si vous cherchez quelque chose de simple mais impressionnant.<\/p>\n

    R\u00e9v\u00e9ler l’animation du contenu (et le menu)<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Tobias Glaus est le cr\u00e9ateur de cette animation de contenu et de menu simple. Il est bas\u00e9 sur un simple effet de r\u00e9v\u00e9lation, mais il est aussi efficace qu’il devrait l’\u00eatre. Si vous voulez juste une transition de page CSS de base avec ce style de r\u00e9v\u00e9lation \u00e9l\u00e9gant, c’est l’un de vos meilleurs choix.<\/p>\n

    Extension de l’effet de transition de la page de la carte<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    C’est un morceau de code sur lequel Rachel Smith travaille encore, mais il a un grand potentiel. Il n’est pas pr\u00eat \u00e0 \u00eatre utilis\u00e9 comme une transition termin\u00e9e, mais son cr\u00e9ateur l’a propos\u00e9 pour test. Une fois termin\u00e9e, la transition sera utilisable sur tous les navigateurs et accessible depuis toutes les plateformes.<\/p>\n

    Transitions de page<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    C’est le projet de MergimUjkani et la transition consiste en un simple \u00e9cran avec des boutons\/menus pour naviguer. Si vous vous souvenez comment les anciens t\u00e9l\u00e9viseurs s’\u00e9teignaient en r\u00e9duisant la taille de l’\u00e9cran en une ligne fine, vous savez d\u00e9j\u00e0 \u00e0 quoi ressemble cette transition.<\/p>\n

    Ceux qui ont besoin de transitions de pages CSS vintage devraient essayer celle-ci.<\/p>\n

    Transition de la miniature \u00e0 la page plein \u00e9cran<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Cette transition transparente d’une vignette \u00e0 une page plein \u00e9cran est un must absolu. Steve Gardner a utilis\u00e9 des animations CSS et Angular pour l’assembler. En l’utilisant, vous pouvez d\u00e9velopper n’importe quelle vignette dans un arri\u00e8re-plan en taille r\u00e9elle.<\/p>\n

    Chargeur de transition de page<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    ArsenZbidniakov a propos\u00e9 ce concept de pr\u00e9-chargeur qui peut \u00eatre utilis\u00e9 chaque fois que vous ouvrez une nouvelle page sur un site Web. Il se compose d’un chargeur de cercle SVG qui a un effet de morphing suppl\u00e9mentaire.<\/p>\n

    Cette transition de page CSS fonctionnerait bien sur des sites Web visionnaires contenant beaucoup de contenu multim\u00e9dia.<\/p>\n

    Menu CSS de navigation sur une page<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Alberto Hartzet a cr\u00e9\u00e9 ce menu CSS<\/a> de navigation d’une page qui comprend quelques sections et des transitions CSS pures. Il convient aux sites Web plus simples, aux portefeuilles et \u00e0 d’autres sites qui fonctionnent bien avec une conception d’une page.<\/p>\n

    R\u00e9agir aux transitions de page anim\u00e9es<\/strong><\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Sarah Drasner a cr\u00e9\u00e9 une petite d\u00e9mo pour ces transitions de pages CSS. Elle l’a cr\u00e9\u00e9 en utilisant GreenSock et SVG. Les transitions de page dans React fonctionnent en douceur et ont fi\u00e8re allure en m\u00eame temps, alors allez-y et essayez-le.<\/p>\n

    Transition de la conception des mat\u00e9riaux<\/h3>\n

    \"Excellentes<\/a><\/p>\n

    Le style et l’animation de cette transition sont enti\u00e8rement r\u00e9alis\u00e9s en CSS par David Marland. Il fonctionne bien et contient du JavaScript pour ajouter des classes. La transition peut \u00eatre interrompue jusqu’\u00e0 ce que le contenu soit remplac\u00e9. Il s’agit d’une animation en deux temps.<\/p>\n

    Navigation verticale en une seule page en CSS pur<\/h3>\n

    \"Excellentes<\/a><\/p>\n

    La derni\u00e8re de notre liste de transitions de page CSS, cette transition de navigation verticale CSS pure par Alberto Hartzet a une mise en page classique pour les sites Web d’une page. Encore une fois, la transition est tr\u00e8s simple mais ajoute une touche agr\u00e9able au site Web.<\/p>\n

    Fin des r\u00e9flexions sur ces transitions de page CSS<\/h3>\n

    Il y a beaucoup de concurrence pour suivre les tendances dans ce secteur, il n’est donc pas \u00e9tonnant qu’il soit si difficile de d\u00e9cider de quelque chose d’aussi simple qu’une transition de page.<\/p>\n

    Les transitions de page CSS vous permettent d’animer facilement votre site Web sans ralentir son chargement. De plus, il favorise un look plus frais et ajoute une touche de professionnalisme \u00e0 n’importe quel site Web.<\/p>\n

    Les transitions de pages CSS ont parcouru un long chemin au cours des deux derni\u00e8res ann\u00e9es, et les utilisateurs devraient en profiter pour am\u00e9liorer leur UX et garder les utilisateurs heureux de cliquer ou de faire d\u00e9filer.<\/p>\n

    Si vous avez aim\u00e9 lire cet article sur les transitions de page CSS, vous devriez consulter celui-ci sur les effets de lueur de texte CSS .<\/a><\/p>\n

    Nous avons \u00e9galement \u00e9crit sur quelques sujets connexes tels que le menu mobile CSS<\/a>, le champ de recherche HTML<\/a>, la galerie d’images<\/a> CSS, l’ \u00e9diteur<\/a> CSS et les effets de survol d’images CSS<\/a>.<\/p>\n

    Source d’enregistrement: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

    Les transitions de pages CSS ont parcouru un long chemin au cours des deux derni\u00e8res ann\u00e9es, et les utilisateurs devraient en profiter pour am\u00e9liorer leur UX et garder les utilisateurs heureux.<\/p>\n","protected":false},"author":1,"featured_media":181788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,904,717,748,841,862],"tags":[1167],"class_list":["post-227828","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-css-3","category-developpeur","category-open-source-projektmanagement-2","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/227828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=227828"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/227828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/181788"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=227828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=227828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=227828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}