Le plugin jQuery InView permet de d\u00e9clencher des actions en JavaScript en fonction de l’apparition \u00e0 l’\u00e9cran d’un \u00e9l\u00e9ment ou d’une partie de cet \u00e9l\u00e9ment. Il est donc facile d’imaginer toutes sortes de succession d’animations ou d’actions asynchrones gr\u00e2ce \u00e0 ce plugin. Voyons comment l’utiliser.<\/p>\n
J’entends d\u00e9j\u00e0 des personnes crier au scandale \u00e0 cause de la d\u00e9pendance \u00e0 jQuery. Il existe un alternative datant de 2016. In-View.js<\/a>.<\/p>\n Cela se passe sur GitHub, il est donc possible de t\u00e9l\u00e9charger le script, mais \u00e9galement de l’am\u00e9liorer et partager vos suggestions. Commencez simplement par appeler votre biblioth\u00e8que jQuery, puis chargez le plugin InView :<\/p>\n Une fois le plugin charg\u00e9, il est possible de \u00ab\u00a0binder\u00a0\u00bb, autrement dit de lier un \u00e9l\u00e9ment \u00e0 l’\u00e9v\u00e8nement \u00ab\u00a0inview\u00a0\u00bb pour effectuer des actions.<\/p>\n La fonction accepte plusieurs variables qui vont nous permettre d’ex\u00e9cuter les choses au bon moment. Nous allons concevoir une b\u00eate d\u00e9monstration pour comprendre les bases.<\/p>\n Nous allons essayer d’afficher un contenu textuel qui nous dit quelle partie est visible de deux \u00e9l\u00e9ments d’une page HTML. N’h\u00e9sitez pas \u00e0 mettre plus de contenu pour prendre un peu de hauteur dans votre document.<\/p>\n Je vous fourni \u00e9galement ce CSS pour que l’on ait \u00e0 peu pr\u00e8s le m\u00eame document de test :<\/p>\n L’\u00e9l\u00e9ment Reprenons sur du JS, ce JavaScript est \u00e0 placer apr\u00e8s l’appel \u00e0 la biblioth\u00e8que jQuery et son plugin, bien entendu \ud83d\ude09 Ici le code est vraiment basique, nous ne faisons qu’ajouter du texte dans un \u00e9l\u00e9ment Avec les quelques commentaires du code jQuery vous devriez maintenant avoir compris le fonctionnement du plugin. \u00c0 vous d’envisager une suite ! :p (Lazy Load, chargement Ajax, infinite scroll, etc.) Amusez-vous bien !<\/p>\n","protected":false},"excerpt":{"rendered":" Le plugin jQuery InView permet de d\u00e9clencher des actions en JavaScript en fonction de l’apparition \u00e0 l’\u00e9cran d’un \u00e9l\u00e9ment ou d’une partie de cet \u00e9l\u00e9ment. Il est donc facile d’imaginer toutes sortes de succession d’animations ou d’actions asynchrones gr\u00e2ce \u00e0 ce plugin. Voyons comment l’utiliser.<\/p>\n","protected":false},"author":4,"featured_media":2781,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,50,9],"tags":[478,125,52,51],"coauthors":[597],"class_list":["post-2752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-ressources-telechargements","category-tutoriels","tag-inview","tag-javascript","tag-jquery","tag-plugin"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=2752"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/2781"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=2752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=2752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=2752"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=2752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}O\u00f9 le trouver<\/h2>\n
\nT\u00e9l\u00e9charger InView<\/a><\/p>\nComment l’utiliser ?<\/h2>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"><\/script>\r\n<script src=\"js\/jquery.inview.min.js\"><\/script><\/code><\/pre>\n$('.element').bind('inview',function(event, isInView, visiblePartX, visiblePartY){\r\n \t\t\t\/\/ le code ici (\u00e7a va venir)\r\n});<\/code><\/pre>\n
\nLe deuxi\u00e8me param\u00e8tre (et variable) isInView<\/code> retourne true<\/code> ou false<\/code> en fonction de si l’\u00e9l\u00e9ment est visible ou non (peu importe quelle partie est visible). visiblePartX<\/code>, la troisi\u00e8me variable d\u00e9tecte quelle partie lat\u00e9rale de l’\u00e9l\u00e9ment est visible (sur l’axe X donc), les valeurs retourn\u00e9es possibles sont left<\/code>, right<\/code> et both<\/code>.
\nLa derni\u00e8re est visiblePartY<\/code> et d\u00e9tecte quelle partie en hauteur de l’\u00e9l\u00e9ment est visible (sur l’axe Y donc), les valeurs retourn\u00e9es possibles sont top<\/code>, bottom<\/code> et both<\/code>.<\/p>\nD\u00e9finir les parties visibles d’un \u00e9l\u00e9ment<\/h2>\n
\nCommencez par copier\/coller ce code HTML (rien de compliqu\u00e9).<\/p>\n<div id=\"first-part\">\r\n <h2>This is the first part<\/h2>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\tproident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p> \r\n <span class=\"info\"><\/span>\r\n<\/div>\r\n<div id=\"second-part\">\r\n <h2>This is the second part<\/h2>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \t\tcillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n<\/div> \r\n<div id=\"third-part\"> \r\n <h2>This is the third part<\/h2>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n<\/div>\r\n<div id=\"last-part\"> \r\n <h2>This is the last part<\/h2>\r\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \tproident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\r\n <span class=\"info\"><\/span>\r\n<\/div><\/code><\/pre>\nhtml {\r\n\twidth: 750px;\r\n\tmargin: 0 auto;\r\n\tpadding: 2em 0;\r\n\tfont-size: 62.5%;\r\n\tline-height: 1.55em;\r\n\tbackground: #f2f2f2;\r\n\tcolor: #555;\r\n\tfont-family: Helvetica, Arial, Verdana, sans-serif;\r\n}\r\nbody {\r\n\tfont-size: 1.4em;\r\n\tline-height: 1.55em;\r\n}\r\ndiv {\r\n\tmargin: 4em 0;\r\n\tposition:relative;\r\n}\r\n.info {\r\n\tposition: absolute;\r\n\tright: 0;\r\n\ttop:0;\r\n\tpadding: 15px;\r\n\tborder-radius: 8px;\r\n\tbackground: #ddd;\r\n\tborder: 1px solid #fff;\r\n\tcolor: #666;\r\n\tfont-weight:bold;\r\n\tfont-size: 16px;\r\n\tbox-shadow: 2px 2px 3px rgba(0,0,0,0.4);\r\n}<\/code><\/pre>\n.info<\/code> va nous servir \u00e0 afficher du texte.<\/p>\n
\nNous allons analyser avec notre code JS quelles sont les zones visibles sur notre premi\u00e8re division et sur la derni\u00e8re division de notre document.<\/p>\n$(document).ready(function(){\r\n $('.element').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {\r\n\u00a0\r\n if (isInView) {\r\n \/\/ l'\u00e9l\u00e9ment est visible\r\n\u00a0\r\n if (visiblePartY == 'top') {\r\n \/\/ Le haut de l'\u00e9l\u00e9ment est visible\r\n $(this).find('.info').text('Only top is visible');\r\n } \r\n\u00a0\r\n else if (visiblePartY == 'bottom') {\r\n \/\/ Le bas de l'\u00e9l\u00e9ment est visible\r\n $(this).find('.info').text('Only bottom is visible');\r\n } \r\n\u00a0\r\n else {\r\n \/\/ Les deux parties sont visibles (tout l'\u00e9l\u00e9ment)\r\n $(this).find('.info').text('Whole part is visible');\r\n }\r\n } \r\n\u00a0\r\n else {\r\n \/\/ l'\u00e9l\u00e9ment n'est pas visible\r\n \/\/ on fait quoi maintenant ?\r\n }\r\n });\r\n});<\/code><\/pre>\nspan<\/code> porteur de la classe info<\/code> en fonction de la zone visible d’un \u00e9l\u00e9ment.
\nVoici ce que vous devriez obtenir :
\nVoir la d\u00e9monstration<\/a>
\nAmusez-vous \u00e0 faire d\u00e9filer doucement la page pour voir ce qui s’affiche dans les blocs d’informations en haut et bas de la page.<\/p>\n
\nDes exemples plus complexes sont donn\u00e9s par l’auteur de ce plugin sur GitHub.
\nPlugin sur GitHub<\/a><\/p>\n