{"id":40,"date":"2012-09-26T17:45:13","date_gmt":"2012-09-26T15:45:13","guid":{"rendered":"http:\/\/geekcommunicant.com\/blog\/?p=40"},"modified":"2024-11-05T14:28:44","modified_gmt":"2024-11-05T13:28:44","slug":"un-effet-de-porte-en-jquery","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","title":{"rendered":"Un effet de porte en jQuery"},"content":{"rendered":"\n<p>Aujourd&rsquo;hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l&rsquo;image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte.<\/p>\n\n\n\n<p>Avant tout, il faut comprendre comment s&rsquo;organiseront les diff\u00e9rentes couches:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00e0 la base, on trouve la couche contenant le texte (<code>z-index: 0<\/code>)<\/li><li>juste au-dessus, on trouve la couche contenant les morceaux d&rsquo;image (<code>z-index: 1<\/code>)<\/li><li>tout en haut, on trouve la couche servant de masque au tout (<code>z-index: 2<\/code>)<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 d\u00e9couper la photo en quatre parties \u00e9gales. Cette \u00e9tape peut-\u00eatre d\u00e9compos\u00e9e comme ceci :<\/p>\n\n\n\n<p>1 &#8211; On englobe l&rsquo;image dans une division de m\u00eames dimensions ne permettant pas les d\u00e9bordements: <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/On englobe notre image avec une div\n$(id de votre image).wrap(&#039;&lt;div class=&quot;imageDoor&quot;&gt;&#039;);\n\n\/\/Pour simplifier la syntaxe\nvar door = $(id de votre image).parent(&#039;.imageDoor&#039;);\n\n\/\/On r\u00e9cup\u00e8re les dimensions de notre image\nvar totalWidth = $(id de votre image).width();\nvar totalHeight = $(id de votre image).height();\n\n\/\/On redimensionne la div, on interdit le d\u00e9bordement, et on la place au-dessus\ndoor.css({&#039;width&#039;:totalWidth,&#039;height&#039;:totalHeight,&#039;overflow&#039;:&#039;hidden&#039;,&#039;z-index&#039;:2});\n<\/pre><\/div>\n\n\n<p>2 &#8211; On remplit la premi\u00e8re div :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/\/On calcule les dimensions des pi\u00e8ces\nvar width = totalWidth\/2;\nvar height = totalHeight\/2;\n\n\/\/On rempli la premi\u00e8re division                \ndoor.html(&#039;&lt;div class=&quot;top-left door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;top-right door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bottom-left door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bottom-right door&quot;&gt;&lt;\/div&gt;&#039;);\n<\/pre><\/div>\n\n\n<p>\u00c0 chaque nouvelle div, on applique la classe suivante :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.door {\n    float: left;\n    z-index: 1;\n    position: relative;\n}\n<\/pre><\/div>\n\n\n<p>3 &#8211; On int\u00e8gre l&rsquo;image aux diff\u00e9rentes sous-divisions :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndoor.children(&#039;.top-left&#039;).css({&#039;width&#039;:width,&#039;height&#039;:height,&#039;background-image&#039;:&#039;url(&quot;&#039;+obj.attr(&#039;src&#039;)+&#039;&quot;)&#039;,&#039;background-position&#039;: &#039;0px 0px&#039;});\ndoor.children(&#039;.top-right&#039;).css({&#039;width&#039;:width,&#039;height&#039;:height,&#039;background-image&#039;:&#039;url(&quot;&#039;+obj.attr(&#039;src&#039;)+&#039;&quot;)&#039;,&#039;background-position&#039;: width+&#039;px 0px&#039;});\ndoor.children(&#039;.bottom-left&#039;).css({&#039;width&#039;:width,&#039;height&#039;:height,&#039;background-image&#039;:&#039;url(&quot;&#039;+obj.attr(&#039;src&#039;)+&#039;&quot;)&#039;,&#039;background-position&#039;: &#039;0px &#039;+height+&#039;px&#039;});\ndoor.children(&#039;.bottom-right&#039;).css({&#039;width&#039;:width,&#039;height&#039;:height,&#039;background-image&#039;:&#039;url(&quot;&#039;+obj.attr(&#039;src&#039;)+&#039;&quot;)&#039;,&#039;background-position&#039;: width+&#039;px &#039;+height+&#039;px&#039;});\n<\/pre><\/div>\n\n\n<p>Pour compl\u00e9ter le \u00ab\u00a0sandwich\u00a0\u00bb, il reste \u00e0 rajouter la couche contenant le texte; pour cela, il suffit de compl\u00e9ter la ligne remplissant la premi\u00e8re division:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndoor.html(&#039;&lt;div class=&quot;top-left door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;top-right door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bottom-left door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;bottom-right door&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;text-box&quot;&gt;&lt;span class=&quot;text&quot;&gt;&#039;+votre texte ici+&#039;&lt;\/span&gt;&lt;\/div&gt;&#039;);\n<\/pre><\/div>\n\n\n<p>Maintenant, il ne reste plus qu&rsquo;\u00e0 animer les diff\u00e9rentes pi\u00e8ces au survol de la souris:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\ndoor.hover(function(){\n    door.children(&#039;.top-left&#039;).animate({&#039;top&#039;: -height, &#039;left&#039;: -width }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.top-right&#039;).animate({&#039;top&#039;: -height, &#039;left&#039;: width }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.bottom-left&#039;).animate({&#039;top&#039;: height, &#039;left&#039;: -width }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.bottom-right&#039;).animate({&#039;top&#039;: height, &#039;left&#039;: width }, 1000, &#039;easeOutBounce&#039;);\n},function(){\n    door.children(&#039;.top-left&#039;).animate({&#039;top&#039;: &#039;0px&#039;, &#039;left&#039;: &#039;0px&#039; }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.top-right&#039;).animate({&#039;top&#039;: &#039;0px&#039;, &#039;left&#039;: &#039;0px&#039; }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.bottom-left&#039;).animate({&#039;top&#039;: &#039;0px&#039;, &#039;left&#039;: &#039;0px&#039; }, 1000, &#039;easeOutBounce&#039;);\n    door.children(&#039;.bottom-right&#039;).animate({&#039;top&#039;: &#039;0px&#039;, &#039;left&#039;: &#039;0px&#039; }, 1000, &#039;easeOutBounce&#039;);\n});\n<\/pre><\/div>\n\n\n<p>Cet article explique comment a \u00e9t\u00e9 r\u00e9alis\u00e9 un des effets propos\u00e9s par mon plugin jQuery.imageDoor. Pour voir ce plug-in en action (dont l&rsquo;effet expliqu\u00e9 dans cet article), rendez-vous <a href=\"https:\/\/geekcommunicant.com\/demos\/imagedoor.html\" target=\"_blank\" rel=\"noopener noreferrer\">ici<\/a> (en anglais).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aujourd&rsquo;hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l&rsquo;image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte. Avant tout, il faut comprendre comment s&rsquo;organiseront les diff\u00e9rentes couches: \u00e0 la &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[10,9,7],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-effet-de-porte","tag-imagedoor","tag-plugin"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-E","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":40,"position":0},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/12\/un-compteur-de-caracteres-en-jquery\/","url_meta":{"origin":40,"position":1},"title":"Un compteur de caract\u00e8res en jQuery","author":"geekc","date":"12\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment faire un plugin jQuery, qui permet de compter le nombre de caract\u00e8res pouvant encore \u00eatre accept\u00e9 dans des champs de texte. Pour commencer, il faut d\u00e9cider du nombre de variables utiles \u00e0 ce genre de r\u00e9alisation. Une longueur maximale autoris\u00e9e est un minimum. Ensuite, comme\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":40,"position":2},"title":"Un dancefloor en jQuery","author":"geekc","date":"06\/09\/2012","format":false,"excerpt":"Aujourd'hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d'abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie. Ici le dancefloor sera une\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":40,"position":3},"title":"Gloubi tuto &#8211; menu interactif d\u00e9roulant","author":"geekc","date":"30\/12\/2022","format":false,"excerpt":"Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire. Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes. Fonctionnement Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/04\/jquery-une-horloge-en-image\/","url_meta":{"origin":40,"position":4},"title":"[jQuery] Une horloge en image","author":"geekc","date":"04\/10\/2012","format":false,"excerpt":"Aujourd'hui, nous allons voir comment r\u00e9aliser en jQuery une horloge utilisant des images, que vous pouvez voir en action ici. Avant de commencer Pour des raisons de practicit\u00e9, nous allons utiliser les images utilis\u00e9es par le compteur de Gelbooru, que j'ai rassembl\u00e9es dans cette archive. La structure HTML Avant tout,\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":211,"url":"https:\/\/geekcommunicant.com\/blog\/2013\/08\/11\/amusons-nous-avec-les-canvas\/","url_meta":{"origin":40,"position":5},"title":"[JavaScript\/HTML5] Amusons-nous avec les canvas","author":"geekc","date":"11\/08\/2013","format":false,"excerpt":"Aujourd'hui nous allons voir comment ajouter du texte aux nouveaux \u00e9l\u00e9ments <canvas> du HTML5. Comme les plus attentifs d'entre-vous l'auront d\u00e9j\u00e0 remarqu\u00e9, le titre de l'article r\u00e9v\u00e8le d\u00e9j\u00e0 une partie du contenu de l'article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript. Le HTML La d\u00e9claration\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}