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".

Comme le module CG Parallax, le composant CG Parallax utilise 2 couches : l'image de fond (qui est fixe ou presque) et les articles qui, eux, défilent. Le couple "image de fond-article" constitue une section.

Chaque section, naturellement paramétrable, est accessible par le menu associé au module. Sur cet exemple, le menu "parallax" est en haut. Sur l'exemple en anglais (qui utilise le module CG Parallax), le CSS a été adapté pour que le menu soit à droite de l'écran: #cg_navbar, .cg_sticky{top:30%!important;width:10em;right:0;position:fixed;z-index: 9999;}

 Attention: il s'agit uniquement d'une démonstration, donc, j'ai repris 2 articles déjà présents sur ce site, puis, j'ai ajouté une explication.

 

Bienvenue

Bienvenue sur la démonstration
du Composant CG Parallax

Présentation

 

Alerte sécurité Joomla : Juillet 2017 / Mai 2017Décembre 2016 

 

Besoin d'un nouveau site Internet? une mise en oeuvre rapide? vous souhaitez être indépendant après son démarrage? vous préférez louer les services d'un webmaster ? d'applications sur gros système ? de requêtes SQL ? besoin de mettre à jour votre site Joomla ?...

De 2014 à 2016, mes prestations ont été effectuées en échange de dons à l'Association Française des Syndromes de Costello et Cardio-Facio-Cutané (CFC). Cela a permis de financer des rencontres, des projets de recherche,...et c'était déductible de vos impôts. Vous pouvez naturellement continuer à faire des dons.

Lire la suite

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.

viking 002

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



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 1.0.5