{"id":5375,"date":"2011-11-14T10:50:39","date_gmt":"2011-11-14T09:50:39","guid":{"rendered":"https:\/\/www.ideematic.com\/actualites\/?p=207"},"modified":"2022-03-01T11:42:38","modified_gmt":"2022-03-01T10:42:38","slug":"la-parallaxe","status":"publish","type":"post","link":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/","title":{"rendered":"La parallaxe"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Enfant, nous avons souvent pos\u00e9 notre regard contre la vitre pour observer lors de longs voyages en voiture le paysage qui d\u00e9filait sous nos yeux. Au premier plan les panneaux de signalisations passaient tr\u00e8s vite. Plus loin, nous avions le temps de voir les vaches dans le pr\u00e9 qui d\u00e9filait alors moins rapidement. Encore plus loin les collines quittaient notre champs de vision que bien plus tard.
\nCette profondeur de champs donnent \u00e0 chaque plan une vitesse de d\u00e9placement qui lui est propore du point de vue de l’observateur.
\nCet effet ou cons\u00e9quence, est ce que l’on nomme la parallaxe.
\nOn retrouve d’ailleurs ce terme apparu XVIe si\u00e8cle dans diff\u00e9rents domaines comme la psychologie, la m\u00e9trologie, l’astronomie, ou la photographie.<\/p>\n

<\/p>\n

Lien Wikip\u00e9dia : La parallaxe<\/a><\/p>\n

Revenons-en au visuel et notons au passage que c’est aussi cette danse des plans qui participe \u00e0 donner toute la profondeur \u00e0 la sc\u00e8ne \u00e9voqu\u00e9e plus haut.
\nInversement, on peut mettre en sc\u00e8ne une parallaxe pour recr\u00e9er un effet de 3D.
\nDans le contexte d’une page web, le mouvement correspond alors au d\u00e9placement du regard sur le plan donn\u00e9 par celui de la souris ou d’un scroll.<\/p>\n

Quelques explications sur cet effet :<\/p>\n

\"\"<\/a>

Sc\u00e8ne d’ensemble<\/p><\/div>\n

\"\"<\/a>

Sc\u00e8ne d’ensemble d\u00e9compos\u00e9e en 3 plans<\/p><\/div>\n

Dans cet exemple, nous pourrions imaginer qu’au survol de la souris vers la gauche, les 3 plans se d\u00e9placeraient vers la droite chacun \u00e0 une vitesse qui lui serait propre. Plus le plan est \u00e9loign\u00e9 et plus lente sera sa vitesse.<\/p>\n

Voici quelques exemples de sites mettant en avant cet effet de parallaxe :<\/p>\n

\"http:\/\/www.nikebetterworld.com\"<\/a><\/p>\n

http:\/\/www.nikebetterworld.com<\/a><\/p>\n

\u00a0(Effet activ\u00e9 au scroll)<\/p>\n

\"http:\/\/www.digitalhands.net\"<\/a>

Digitalhands<\/p><\/div>\n

http:\/\/www.digitalhands.net<\/a><\/p>\n

(Effet activ\u00e9 au mouvement de la souris)<\/p>\n

\"http:\/\/www.iutopi.com\"<\/a>

Iutopi<\/p><\/div>\n

http:\/\/www.iutopi.com<\/a><\/p>\n

(Effet activ\u00e9 au scroll)<\/p>\n

Initialement, cet effet a \u00e9t\u00e9 cr\u00e9\u00e9 en Flash. Mais peu \u00e0 peu, nous avons vu fleurir des sites utilisant les technologies CSS et Javascript pour y parvenir.<\/p>\n

Heureusement, des scripts JS ont donc fait leur apparition pour une fois de plus, soulager le travail des d\u00e9veloppeurs.<\/p>\n

En premier lieu, je citerai\u00a0jParallax<\/em> qui me semble le plus simple \u00e0 utiliser et qui se base sur le Framework JQuery<\/a> :<\/p>\n

Son impl\u00e9mentation est extr\u00eamement ais\u00e9e car chaque plan est plac\u00e9 dans une balise <li>. <\/em>En reprenant le sch\u00e9ma de tout \u00e0 l’heure, nous aurions donc :<\/p>\n

<\/pre>\r\n<ul id="parallax">\r\n<li>Plan 1<\/li>\r\n<li>Plan 2<\/li>\r\n<li>Plan 3<\/li>\r\n<\/ul>\r\n<pre>\r\n<\/pre>\n
Toujours du c\u00f4t\u00e9 des scripts, nous pouvons \u00e9galement citer jQuery Parallax.<\/em><\/p>\n
Enfin, pour celles et ceux qui souhaitent d\u00e9velopper eux-m\u00eame cet effet, je vous invite \u00e0 suivre l’excellent tutoriel de grafikart.<\/p>\n
Tutoriel<\/strong> : http:\/\/www.grafikart.fr\/tutoriels\/html-css\/parallaxe-css-88<\/a><\/p>\n
Auteur : Gr\u00e9gory Toucas<\/strong><\/p>\n
[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
[vc_row][vc_column][vc_column_text]Enfant, nous avons souvent pos\u00e9 notre regard contre la vitre pour observer lors de longs voyages en voiture le paysage qui d\u00e9filait sous nos yeux. Au premier plan les panneaux de signalisations passaient tr\u00e8s vite. Plus loin, nous avions le temps de voir les vaches dans le pr\u00e9 qui d\u00e9filait alors moins rapidement. Encore plus […]<\/p>\n","protected":false},"author":3,"featured_media":1641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[29],"tags":[43,44,54,55,56],"class_list":["post-5375","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web","tag-javascript","tag-jquery","tag-parallax","tag-plugin","tag-webdesign"],"acf":[],"yoast_head":"\nLa parallaxe - Id\u00e9ematic<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La parallaxe - Id\u00e9ematic\" \/>\n<meta property=\"og:description\" content=\"[vc_row][vc_column][vc_column_text]Enfant, nous avons souvent pos\u00e9 notre regard contre la vitre pour observer lors de longs voyages en voiture le paysage qui d\u00e9filait sous nos yeux. Au premier plan les panneaux de signalisations passaient tr\u00e8s vite. Plus loin, nous avions le temps de voir les vaches dans le pr\u00e9 qui d\u00e9filait alors moins rapidement. Encore plus […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\" \/>\n<meta property=\"og:site_name\" content=\"Id\u00e9ematic\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-14T09:50:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-01T10:42:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ideematic.com\/wp-content\/uploads\/2011\/11\/parallax.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1314\" \/>\n\t<meta property=\"og:image:height\" content=\"418\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"ideematic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"ideematic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\"},\"author\":{\"name\":\"ideematic\",\"@id\":\"https:\/\/www.ideematic.com\/#\/schema\/person\/370c36971663238299b6ca729674a7e4\"},\"headline\":\"La parallaxe\",\"datePublished\":\"2011-11-14T09:50:39+00:00\",\"dateModified\":\"2022-03-01T10:42:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\"},\"wordCount\":524,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.ideematic.com\/#organization\"},\"keywords\":[\"javascript\",\"jquery\",\"parallax\",\"plugin\",\"webdesign\"],\"articleSection\":[\"D\u00e9veloppement web\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\",\"url\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\",\"name\":\"La parallaxe - Id\u00e9ematic\",\"isPartOf\":{\"@id\":\"https:\/\/www.ideematic.com\/#website\"},\"datePublished\":\"2011-11-14T09:50:39+00:00\",\"dateModified\":\"2022-03-01T10:42:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.ideematic.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement web\",\"item\":\"https:\/\/www.ideematic.com\/actualites\/category\/developpement-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La parallaxe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ideematic.com\/#website\",\"url\":\"https:\/\/www.ideematic.com\/\",\"name\":\"Id\u00e9ematic\",\"description\":\"Id\u00e9ematic est une agence digitale \u00e0 Strasbourg et Paris\",\"publisher\":{\"@id\":\"https:\/\/www.ideematic.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ideematic.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ideematic.com\/#organization\",\"name\":\"Id\u00e9ematic\",\"url\":\"https:\/\/www.ideematic.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.ideematic.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ideematic.com\/wp-content\/uploads\/2017\/12\/agence-react-native-ruby-on-rails.png\",\"contentUrl\":\"https:\/\/www.ideematic.com\/wp-content\/uploads\/2017\/12\/agence-react-native-ruby-on-rails.png\",\"width\":1200,\"height\":500,\"caption\":\"Id\u00e9ematic\"},\"image\":{\"@id\":\"https:\/\/www.ideematic.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ideematic.com\/#\/schema\/person\/370c36971663238299b6ca729674a7e4\",\"name\":\"ideematic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.ideematic.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b8a07f4e3fca5c7a27804ef22287e90?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b8a07f4e3fca5c7a27804ef22287e90?s=96&r=g\",\"caption\":\"ideematic\"},\"url\":\"https:\/\/www.ideematic.com\/actualites\/author\/ideematic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La parallaxe - Id\u00e9ematic","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/","og_locale":"fr_FR","og_type":"article","og_title":"La parallaxe - Id\u00e9ematic","og_description":"[vc_row][vc_column][vc_column_text]Enfant, nous avons souvent pos\u00e9 notre regard contre la vitre pour observer lors de longs voyages en voiture le paysage qui d\u00e9filait sous nos yeux. Au premier plan les panneaux de signalisations passaient tr\u00e8s vite. Plus loin, nous avions le temps de voir les vaches dans le pr\u00e9 qui d\u00e9filait alors moins rapidement. Encore plus […]","og_url":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/","og_site_name":"Id\u00e9ematic","article_published_time":"2011-11-14T09:50:39+00:00","article_modified_time":"2022-03-01T10:42:38+00:00","og_image":[{"width":1314,"height":418,"url":"https:\/\/www.ideematic.com\/wp-content\/uploads\/2011\/11\/parallax.jpg","type":"image\/jpeg"}],"author":"ideematic","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"ideematic","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#article","isPartOf":{"@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/"},"author":{"name":"ideematic","@id":"https:\/\/www.ideematic.com\/#\/schema\/person\/370c36971663238299b6ca729674a7e4"},"headline":"La parallaxe","datePublished":"2011-11-14T09:50:39+00:00","dateModified":"2022-03-01T10:42:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/"},"wordCount":524,"commentCount":1,"publisher":{"@id":"https:\/\/www.ideematic.com\/#organization"},"keywords":["javascript","jquery","parallax","plugin","webdesign"],"articleSection":["D\u00e9veloppement web"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/","url":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/","name":"La parallaxe - Id\u00e9ematic","isPartOf":{"@id":"https:\/\/www.ideematic.com\/#website"},"datePublished":"2011-11-14T09:50:39+00:00","dateModified":"2022-03-01T10:42:38+00:00","breadcrumb":{"@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ideematic.com\/actualites\/2011\/11\/la-parallaxe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.ideematic.com\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement web","item":"https:\/\/www.ideematic.com\/actualites\/category\/developpement-web\/"},{"@type":"ListItem","position":3,"name":"La parallaxe"}]},{"@type":"WebSite","@id":"https:\/\/www.ideematic.com\/#website","url":"https:\/\/www.ideematic.com\/","name":"Id\u00e9ematic","description":"Id\u00e9ematic est une agence digitale \u00e0 Strasbourg et Paris","publisher":{"@id":"https:\/\/www.ideematic.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ideematic.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.ideematic.com\/#organization","name":"Id\u00e9ematic","url":"https:\/\/www.ideematic.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.ideematic.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.ideematic.com\/wp-content\/uploads\/2017\/12\/agence-react-native-ruby-on-rails.png","contentUrl":"https:\/\/www.ideematic.com\/wp-content\/uploads\/2017\/12\/agence-react-native-ruby-on-rails.png","width":1200,"height":500,"caption":"Id\u00e9ematic"},"image":{"@id":"https:\/\/www.ideematic.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.ideematic.com\/#\/schema\/person\/370c36971663238299b6ca729674a7e4","name":"ideematic","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.ideematic.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b8a07f4e3fca5c7a27804ef22287e90?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b8a07f4e3fca5c7a27804ef22287e90?s=96&r=g","caption":"ideematic"},"url":"https:\/\/www.ideematic.com\/actualites\/author\/ideematic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/posts\/5375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/comments?post=5375"}],"version-history":[{"count":0,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/posts\/5375\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/media\/1641"}],"wp:attachment":[{"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/media?parent=5375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/categories?post=5375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ideematic.com\/wp-json\/wp\/v2\/tags?post=5375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}