{"id":1292,"date":"2019-03-28T13:17:28","date_gmt":"2019-03-28T12:17:28","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=1292"},"modified":"2022-04-03T18:22:12","modified_gmt":"2022-04-03T16:22:12","slug":"effet-parallaxe","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=1292","title":{"rendered":"Effet Parallaxe"},"content":{"rendered":"\n

On peut voir de nombreux sites one-page qui font d\u00e9filer verticalement au scroll des blocs de contenu successifs semblant se passer devant l’un l’autre. Ces \u00ab\u00a0\u00e9crans\u00a0\u00bb occupent tout le format du viewport avec souvent une image en alternance d’un bloc de texte.<\/p>\n\n\n\n

Scroll one-page<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

La structure du code HTML est assez simple. Il s’agit d’une succession de blocs (sections, articles ou div tout simplement). Dans l’exemple ci-dessous, j’ai utilis\u00e9 des sections contenant uniquement du texte. Une section sur deux recevra une image d’arri\u00e8re plan en CSS. Elles comportent toutes une classe \u00ab\u00a0ecran\u00a0\u00bb. Elles sont plac\u00e9es dans le conteneur principal <main<\/strong>> entre le header<\/strong> et et le footer<\/strong>, mais il pourrait en \u00eatre autrement, tout d\u00e9pend de la structure de votre code.<\/p>\n\n\n\n

<main id=\"content\">\n   <section class=\"ecran\">\n      <h1>Come To Iceland<\/h1>\n   <\/section>\n\n   <section class=\"ecran\">\n      <h2>The last settled part of Europe, much of Iceland remains pristine and untouched.<\/h2>\n   <\/section>\n\t\t\t\n   <section class=\"ecran\">\n      <h2>Population: 325,671<\/h2>\n      <h2>Area: 103,001km<sup>2<\/sup><\/h2>\n      <h2>= 3 people per square km<\/h2>\n   <\/section>\n\n   <section class=\"ecran\">\n      <h2>With abundant geothermal energy, Iceland is also one of the greenest places on earth.<\/h2>\n   <\/section>\n\n   <section class=\"ecran\">\n      <h2>Come to Iceland. You\u2019ll be amazed.<\/h2>\n   <\/section>\n<\/main><\/code><\/pre>\n\n\n\n
Et voici le code CSS.
On commence par supprimer les marges par d\u00e9faut de body<\/strong>
Puis le gros du travail se fait dans la classe ecran<\/strong>. On r\u00e8gle d’abord le positionnement du texte dans le bloc, par l’alignement du texte, les marges et le positionnement flex centr\u00e9. On indique ensuite la dimension du bloc afin qu’il occupe tout l’espace du viewport. Enfin, on applique des r\u00e9glages de comportement des images d’arri\u00e8re plan, fixe et plein format.<\/p>\n\n\n\n
Les autres r\u00e8gles s’appliquent alternativement \u00e0 chaque section pour des mises en forme du contenu et du fond. Le fond est blanc pour les blocs pairs (even) et avec une image d’arri\u00e8re plan pour les blocs impairs.
<\/p>\n\n\n\n
body { \n   margin: 0; \n}\n.ecran {\n   text-align: center;\n   padding: 2vw;\n   font-size: 6vw;\n\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   flex-direction: column;\n\n   box-sizing: border-box;\n   height: 100vh;\n\n   background-size: cover;\n   background-repeat: no-repeat;\n   background-attachment: fixed;\n}\n.ecran:first-of-type {\n   text-transform: uppercase;\n   color: #fff;\n   font-size: 8vw;\n   text-shadow: 0 0 5px rgba(0,0,0,0.4);\n}\n.ecran:nth-of-type(even) {\n   background: #fff;\n}\n.ecran:nth-of-type(1) {\n   background-image: url(..\/media\/fond1.jpg);\n}\n.ecran:nth-of-type(3) {\n   background-image: url(..\/media\/fond2.jpg);\n}\n.ecran:nth-of-type(5) {\n   background-image: url(..\/media\/fond3.jpg);\n}<\/code><\/pre>\n\n\n\n
Pour m\u00e9moire, \u00ab\u00a0even\u00a0\u00bb veut dire nombre pair.<\/p>\n","protected":false},"excerpt":{"rendered":"
On peut voir de nombreux sites one-page qui font d\u00e9filer verticalement au scroll des blocs de contenu successifs semblant se passer devant l’un l’autre. Ces \u00ab\u00a0\u00e9crans\u00a0\u00bb occupent tout le format du viewport avec souvent une image en alternance d’un bloc de texte. Scroll one-page La structure du code HTML est assez simple. Il s’agit d’une … Continuer la lecture de Effet Parallaxe<\/span>  →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":931,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1292"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1292"}],"version-history":[{"count":7,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1292\/revisions"}],"predecessor-version":[{"id":4199,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1292\/revisions\/4199"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/931"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}