{"id":5664,"date":"2018-03-16T10:30:58","date_gmt":"2018-03-16T09:30:58","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=5664"},"modified":"2025-08-20T17:17:20","modified_gmt":"2025-08-20T15:17:20","slug":"effets-de-scroll-originaux","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/","title":{"rendered":"Inspiration&nbsp;: 15 effets de scroll originaux"},"content":{"rendered":"<p>Le scroll est aujourd&#8217;hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c&#8217;est d&#8217;ailleurs une fonction vitale pour faciliter la lecture de votre site.<\/p>\n<p>Depuis quelques ann\u00e9es, les animations de contenus sont venues accompagner ce d\u00e9filement, ajoutant ainsi du dynamisme aux pages web. Mais si le scroll lui-m\u00eame pouvait servir \u00e0 l&#8217;exp\u00e9rience de votre site&nbsp;?<\/p>\n<p>Au travers de cet article, nous vous proposons diff\u00e9rentes fa\u00e7on de vous d\u00e9marquer de vos concurrents et surprendre vos utilisateurs gr\u00e2ce \u00e0 un scroll original.<\/p>\n<h2>Le scroll horizontal<\/h2>\n<p>Qui a dit que tout d\u00e9filement devait \u00eatre vertical&nbsp;?<\/p>\n<p>Avec un scroll horizontal, vous pouvez par exemple pr\u00e9senter vos cr\u00e9ations en laissant ainsi une belle place pour vos images.<\/p>\n<figure id=\"attachment_5695\" aria-describedby=\"caption-attachment-5695\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-5695 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-25yearsweb.gif\" alt=\"Animations avec scroll horizontal\" width=\"640\" height=\"264\" \/><figcaption id=\"caption-attachment-5695\" class=\"wp-caption-text\">Source&nbsp;: Onyx.net<\/figcaption><\/figure>\n<figure id=\"attachment_5688\" aria-describedby=\"caption-attachment-5688\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-5688 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-norebro_web.gif\" alt=\"Theme WordPress avec scroll horizontal\" width=\"640\" height=\"264\" \/><figcaption id=\"caption-attachment-5688\" class=\"wp-caption-text\">Source&nbsp;: Theme Norebro<\/figcaption><\/figure>\n<figure id=\"attachment_5718\" aria-describedby=\"caption-attachment-5718\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-readymag.gif\"><img decoding=\"async\" class=\"wp-image-5718 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-readymag.gif\" alt=\"Site avec scroll horizontal\" width=\"640\" height=\"334\" \/><\/a><figcaption id=\"caption-attachment-5718\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/enso.readymag.com\/eames\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ready Mag<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5721\" aria-describedby=\"caption-attachment-5721\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-vw_web.gif\"><img decoding=\"async\" class=\"wp-image-5721 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-vw_web.gif\" alt=\"Animation avec scroll horizontal\" width=\"640\" height=\"293\" \/><\/a><figcaption id=\"caption-attachment-5721\" class=\"wp-caption-text\">Source&nbsp;: Volkswagen<\/figcaption><\/figure>\n<figure id=\"attachment_5689\" aria-describedby=\"caption-attachment-5689\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/en.momentomultimedia.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5689 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-horizontal-momentmultimedia_web.gif\" alt=\"Navigation avec scroll horizontal \" width=\"640\" height=\"264\" \/><\/a><figcaption id=\"caption-attachment-5689\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/en.momentomultimedia.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Momento Multimedia <\/a><\/figcaption><\/figure>\n<p>Si vous souhaitez int\u00e9grer vous-m\u00eame cet effet \u00e0 votre site, vous pouvez t\u00e9l\u00e9charger une extension sur\u00a0jInvertScroll\u00a0ou encore sur\u00a0<a href=\"https:\/\/alvarotrigo.com\/fullPage\/extensions\/scroll-horizontally.html#firstPage\" target=\"_blank\" rel=\"noopener noreferrer\">fullPage.js.<\/a><\/p>\n<h2>Le double scroll ou Split-Screen<\/h2>\n<p>Le concept est simple&nbsp;: votre page est divis\u00e9e en deux colonnes et celles-ci d\u00e9filent \u00e0 une vitesse diff\u00e9rente ou dans un sens diff\u00e9rent.<\/p>\n<p style=\"text-align: left\">Inspir\u00e9 par les interfaces mobiles, le double scroll a vu le jour apr\u00e8s l&#8217;apparition des mises en page en deux colonnes.<\/p>\n<figure id=\"attachment_5698\" aria-describedby=\"caption-attachment-5698\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/melaniedaveid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5698 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-portfoliomelanie_web.gif\" alt=\"Portfolio avec effet double scroll\" width=\"640\" height=\"266\" \/><\/a><figcaption id=\"caption-attachment-5698\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/melaniedaveid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Portfolio de Melanie Daveid<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5722\" aria-describedby=\"caption-attachment-5722\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-studiometa.gif\"><img decoding=\"async\" class=\"wp-image-5722 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-studiometa.gif\" alt=\"Split screen et double scroll\" width=\"640\" height=\"297\" \/><\/a><figcaption id=\"caption-attachment-5722\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/www.studiometa.fr\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Studio Meta<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5699\" aria-describedby=\"caption-attachment-5699\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.daucy.fr\/nuances\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5699 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-daucy_web.gif\" alt=\"Effet double scroll \" width=\"640\" height=\"316\" \/><\/a><figcaption id=\"caption-attachment-5699\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/www.daucy.fr\/nuances\/\" target=\"_blank\" rel=\"noopener noreferrer\">Daucy<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5701\" aria-describedby=\"caption-attachment-5701\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/nightcall.us\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5701 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-nightcallus_web.gif\" alt=\"Split-screen et effet double scroll\" width=\"640\" height=\"316\" \/><\/a><figcaption id=\"caption-attachment-5701\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/nightcall.us\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nightcall Productions<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5705\" aria-describedby=\"caption-attachment-5705\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.carlespalacio.com\/#\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5705 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-double-scroll-carlespalacio_web.gif\" alt=\"Photographies avec effet double scroll\" width=\"640\" height=\"316\" \/><\/a><figcaption id=\"caption-attachment-5705\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/www.carlespalacio.com\/#\" target=\"_blank\" rel=\"noopener noreferrer\">Portfolio de Carles Palacio<\/a><\/figcaption><\/figure>\n<p>Vous pouvez int\u00e9grer le double scroll \u00e0 votre site gr\u00e2ce \u00e0 l&#8217;extension <a href=\"https:\/\/alvarotrigo.com\/multiScroll\/#first\" target=\"_blank\" rel=\"noopener noreferrer\">multiScroll.js<\/a>.<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/susciter-emotion-webdesign\" target=\"_blank\" rel=\"noopener noreferrer\">Comment susciter l&#8217;\u00e9motion gr\u00e2ce au webdesign&nbsp;?<\/a> <\/p><\/blockquote>\n<h2>L&#8217;effet parallaxe<\/h2>\n<p>Certains diront que cet effet est pass\u00e9 de mode mais il est\u00a0tout \u00e0 fait possible de le remettre au go\u00fbt du jour. Jugez plut\u00f4t ces deux sites sur lesquelles un design pertinent est li\u00e9 \u00e0 un effet de profondeur.<\/p>\n<blockquote><p>\u00c0 lire aussi&nbsp;:\u00a0<a href=\"https:\/\/graphiste.com\/blog\/web-design-comment-utiliser-effet-parallax\">Web design\u00a0: comment utiliser l\u2019effet Parallax\u00a0?<\/a><\/p><\/blockquote>\n<figure id=\"attachment_5711\" aria-describedby=\"caption-attachment-5711\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mdmoch.com\/index.php\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5711 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-parallaxe-portfolio_web.gif\" alt=\"Portfolio avec scroll effet parallaxe\" width=\"640\" height=\"334\" \/><\/a><figcaption id=\"caption-attachment-5711\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/www.mdmoch.com\/index.php\" target=\"_blank\" rel=\"noopener noreferrer\">Portfolio de Marcin Dmoch<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5707\" aria-describedby=\"caption-attachment-5707\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.sbs.com.au\/theboat\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5707 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-parallaxe-theboat_web.gif\" alt=\"Histoire avec scroll effet parallaxe\" width=\"640\" height=\"291\" \/><\/a><figcaption id=\"caption-attachment-5707\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/www.sbs.com.au\/theboat\/\" target=\"_blank\" rel=\"noopener noreferrer\">The boat<\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5710\" aria-describedby=\"caption-attachment-5710\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/porschevolution.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5710 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-parallaxe-porschevolution_web.gif\" alt=\"Site avec scroll effet parallaxe\" width=\"640\" height=\"293\" \/><\/a><figcaption id=\"caption-attachment-5710\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"http:\/\/porschevolution.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PORSCHEvolution <\/a><\/figcaption><\/figure>\n<figure id=\"attachment_5709\" aria-describedby=\"caption-attachment-5709\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-5709 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-parallaxe-melanie_web.gif\" alt=\"Look Book avec effet parallaxe au scroll\" width=\"640\" height=\"293\" \/><figcaption id=\"caption-attachment-5709\" class=\"wp-caption-text\">Source&nbsp;: Look Book de Melanie F.<\/figcaption><\/figure>\n<figure id=\"attachment_5708\" aria-describedby=\"caption-attachment-5708\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/dfynorm-comic.kraftpixel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-5708 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-parallaxe-comic_web.gif\" alt=\"Histoire avec effet parallaxe au scroll\" width=\"640\" height=\"293\" \/><\/a><figcaption id=\"caption-attachment-5708\" class=\"wp-caption-text\">Source&nbsp;: <a href=\"https:\/\/dfynorm-comic.kraftpixel.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DFYnorm<\/a><\/figcaption><\/figure>\n<p>Aujourd&#8217;hui, vous pouvez cr\u00e9er de superbes effets parallaxe gr\u00e2ce \u00e0 <a href=\"https:\/\/prinzhorn.github.io\/skrollr\/\" target=\"_blank\" rel=\"noopener noreferrer\">skrollr.js<\/a>.<\/p>\n<blockquote><p>Lire aussi&nbsp;: <a href=\"https:\/\/graphiste.com\/blog\/storytelling-se-scroller\" target=\"_blank\" rel=\"noopener noreferrer\">Le storytelling se fait scroller<\/a> <\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Le scroll est aujourd&#8217;hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c&#8217;est d&#8217;ailleurs une fonction vitale pour faciliter la lecture de votre site. Depuis quelques ann\u00e9es, les animations de contenus sont venues accompagner ce d\u00e9filement, ajoutant ainsi du dynamisme aux pages web. Mais si le scroll lui-m\u00eame pouvait servir \u00e0 l&#8217;exp\u00e9rience de [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":5727,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[55],"class_list":["post-5664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-inspiration"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Inspiration : 15 effets de scroll originaux - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Le scroll est aujourd&#039;hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c&#039;est d&#039;ailleurs une fonction vitale pour faciliter la lecture\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inspiration : 15 effets de scroll originaux - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Le scroll est aujourd&#039;hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c&#039;est d&#039;ailleurs une fonction vitale pour faciliter la lecture\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-16T09:30:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Inspiration&nbsp;: 15 effets de scroll originaux\",\"datePublished\":\"2018-03-16T09:30:58+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\"},\"wordCount\":466,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png\",\"keywords\":[\"Inspirez-vous\"],\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\",\"url\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\",\"name\":\"Inspiration : 15 effets de scroll originaux - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png\",\"datePublished\":\"2018-03-16T09:30:58+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"description\":\"Le scroll est aujourd'hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c'est d'ailleurs une fonction vitale pour faciliter la lecture\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png\",\"width\":800,\"height\":400,\"caption\":\"15 effets de scroll originaux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Inspiration&nbsp;: 15 effets de scroll originaux\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/totolazza.com\",\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inspiration : 15 effets de scroll originaux - Graphiste Blog","description":"Le scroll est aujourd'hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c'est d'ailleurs une fonction vitale pour faciliter la lecture","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:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/","og_locale":"fr_FR","og_type":"article","og_title":"Inspiration : 15 effets de scroll originaux - Graphiste Blog","og_description":"Le scroll est aujourd'hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c'est d'ailleurs une fonction vitale pour faciliter la lecture","og_url":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-03-16T09:30:58+00:00","article_modified_time":"2025-08-20T15:17:20+00:00","og_image":[{"width":800,"height":400,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png","type":"image\/png"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Inspiration&nbsp;: 15 effets de scroll originaux","datePublished":"2018-03-16T09:30:58+00:00","dateModified":"2025-08-20T15:17:20+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/"},"wordCount":466,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png","keywords":["Inspirez-vous"],"articleSection":["Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/","url":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/","name":"Inspiration : 15 effets de scroll originaux - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png","datePublished":"2018-03-16T09:30:58+00:00","dateModified":"2025-08-20T15:17:20+00:00","description":"Le scroll est aujourd'hui une des fonctionnalit\u00e9s les plus utilis\u00e9es dans le webdesign, et c'est d'ailleurs une fonction vitale pour faciliter la lecture","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/site-scroll-originaux-1.png","width":800,"height":400,"caption":"15 effets de scroll originaux"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/effets-de-scroll-originaux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Inspiration&nbsp;: 15 effets de scroll originaux"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/totolazza.com","https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/5664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=5664"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/5664\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/5727"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=5664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=5664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=5664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}