Un modèle de page a été proposé vers 2011 qui a eu beaucoup de succès : une page en navigation verticale, avec des images en pleine largeur qui ponctuent la lecture. Elles suivent la page ou restent fixe, ou encore, créent un effet de parallaxe.  Ce type de navigation en "OnePage" convient si vous avez un contenu de type récit linéaire. Le visiteur est contraint à prendre connaissance des éléments du site dans un ordre donné.

Le OnePage est assez risqué. L'outil est très présent, et le contenu a du mal à prendre le dessus. Le scroll est inconfortable pour le visiteur, aussi certains webmasters ajoutent une navigation par ancre ou autres interactions. Mais cela ajoute encore au sentiment de contrainte.

Un bel outil délicat à utiliser.

C'est un point de départ utile à réaliser un site en One Page.

L'idée est de modifier la solution proposée par l'aide Jimdo, afin que l'image d'arrière-plan du site change lorsque le lecteur atteint une information précise, en faisant défiler la page. 

-1) Pour commencer, un design à fond de texte blanc opaque est nécessaire. Miami se prête bien à l'exercice. Mais pour le présent site en Malaga, je dois apporter des modifications locales :

#page-2450488522 .jtpl-content {background-color: #FFF;}#page-2450488522 .jtpl-section-main {max-width: 100%;}#page-2450488522 #content_area{max-width: 1000px; margin: 0px auto;} #page-2450488522{background-image: none !important}

-2) J'héberge quelques images de fond sur une page cachée je récupère leur liens html (remplacez dans l'adresse, les chiffres après "dimension=" par "orig", vous aurez le lien vers l'image HD

-3) Inconvénient : le fond en mode "cover" change de taille en fonction des dimensions de l'écran, ce qui n'offre aucun contrôle prévisible de l'aspect de la page. Cela peut ne pas poser de problème, si l'image le permet. Mais je préfère fabriquer une image plus stable quelques soient les proportions hauteur/largeur de l'écran.

Je vais rajouter aussi quelques détails de style.

Le fond se "balade" encore un peu en fonction de la largeur de fenêtre, mais c'est mieux ainsi.

Rajoutons un peu de piment avec un titre associé à cette div, de façon à ce que ça serve de tête de chapitre.

A ce stade, l'effet de parallaxe est succinct, puisque seulement deux plans sont modélisés.

Le fond se reproduit verticalement, Ce genre de mise en page avec des bandeaux fonctionne mieux avec des images verticales occupant une grande partie de la hauteur de page.

En rajoutant un troisième plan de profondeur - défilant à une autre vitesse - on peut augmenter l'illusion de parallaxe.

Un exemple particulièrement réussit : http://www.ok-studios.de/home/ Vous constaterez que le design a une importance capitale dans la réussite de l'effet de parallaxe. Les bandeaux sont hauts afin de ménager un grand espace de vision, ce qui met l'effet en valeur. Les scènes incluent beaucoup d'espace libre, des objets en apesanteur. L'effet d'optique est augmenté par l'ajout d'images floues figurant divers plan de focales. Une agence de création peut prendre le risque de donner autant d'importance à l'effet de parallaxe pour sa vitrine.

Le pari est risqué : le site ne fonctionne pas sur Chrome ! (fonctionne sur Firefox)

L'effet de parallaxe est obtenu à l'aide du script jQuery-Parallax  - Explication en français ici. (préférez les dernières Màj  du créateur)

L'une des techniques basée exclusivement sur les CSS est décrite par Keith Clark. Celle-ci utilise la propriété expérimentale "perspective", qui ne fonctionne pas sur tous les navigateurs, mais qui promet toutefois d'être mieux supportée par les mobiles.

Des contenants sont à la fois éloignés visuellement, par rapport à un point de référence, (ce qui réduit les effets du scroll sur eux) et augmentés en taille afin de rattraper leur dimension d'origine.

Les différences de perspective et les imbrications ou juxtaposition des contenants produit l'effet.