Test OnePage avec le composant CG Parallax

Le but de cette page est de montrer une utilisation du composant CG Parallax.

Le terme "Parallax" est généralement utilisé pour définir le déplacement de plusieurs éléments sur plusieurs couches. Sur certains templates, on utilise aussi le terme "OnePage".

Bienvenue

Bienvenue sur la démonstration
du Composant CG Parallax

Des questions ? un devis ?

Qui suis-je ?

couteau

De formation DUT informatique en 1980, après 12 années, dont 3 ans aux Etats-Unis, chez le constructeur informatique Unisys (anciennement Burroughs) en tant que développeur, puis chef de projet, ingénieur avant-vente sur les traitements bancaires, j'ai le statut de conseil en informatique indépendant depuis 1994.

Je réalise des prestations de service en développement sur tout type de plate-forme, allant des gros systèmes aux PC, utilisant la plupart des langages/outils du marché: du cobol à l'assembleur vers les outils actuels (VB/SQL/PHP/Joomla/autres langages "web"/...). 

Au niveau web, j'ai  réalisé une quinzaine de sites internet professionnels bancaires en ASP. Ces sites ont pour objectif un suivi des prestations en temps réel.

J'assure les tâches d'analyse, développement, formation, support technique, gestion de projet, avant-vente.

Vous pouvez me retrouver sur le forum français Joomla! et sur le forum Joomla! américain sous le pseudo pmleconte, où j'essaie d'aider les personnes ayant des problèmes, de donner des conseils,....

pmleconte

De plus, j'ai été président du foyer rural de Gouzangrez pendant 4 ans de 2008 à fin 2012, membre du conseil municipal (commission communications), formateur bureautique auprès d'autres foyers ruraux.

Lire la suite

Explication

Explication de cette page.

Cette page utilise le composant CG_Parallax qui permet d'avoir, dans une page, plusieurs articles ayant chacun une ou plusieurs images de fond différente. Chaque couple image-article forme une section.

Chaque section peut avoir un comportement différent grâce au paramétrage de son CSS.

Pour obtenir cette page, nous utilisons 4 images et nous avons le paramétrage suivant:

Au niveau des images, les images des sections 2 et 4 ont été éclaircies à 5, celle de la section 3 à 4.

CSS du composant:

.cg_sticky{top:5%!important;}
.cg_parallax h2 {color:white;background-color:lightslategray}
.cg_parallax p{font-size:1.2em;background-color:lightgrey}
.cg_parallax li {background-color: aliceblue}

 

.cg_sticky : le menu du composant s'affichera sous le menu principal.

.cg_parallax h2 : l'entête de la section s'affiche en blanc sur fond gris.

CSS de la section "Explication": 

.cg_bg_img_3 p{background-color:inherit;}
.cg_bg_img_4 p{background-color:inherit;}
.cg_bg_img_4 h3 {text-align:center;font-size:1.5em}
.cg_bg_img_4 .phpcode {font-size:1em;line-height:1.1em}

 

.cg_bg_img_3 p
.cg_bg_img_4 p 
: pas de couleur d'arrière-plan sur ces sections
.cg_bg_img_4 h3 : titre en plus gros caractère et centré
.cg_bg_img_4 .phpcode : affichage du CSS avec taille des caractères plus grosse

C'est maintenant le moment de télécharger le Composant CG Parallax....

CG Parallax version 2.2.0