Test OnePage avec CG Parallax

1 1 1 1 1 Vote 5.00 (3 Votes)

Vote utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

Le but de cette page est de montrer une utilisation du module 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".

Le module CG Parallax utilise 2 couches : l'image de fond (qui est fixe) 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.

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

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'essaies 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.

Explication

Explication de cette page.

Cette page utilise le module CG_Parallax qui permet d'avoir, dans une page, plusieurs articles ayant chacun une image 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 module :

.cg_bg_section{height:60em}
.cg_sticky{top:3em!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_navbar a:hover{background-color:aliceblue}

 

.cg_bg_section : toutes les sections ont la même hauteur
.cg_sticky : le menu du module s'affichera sous le menu principal
.cg_parallax h2 : l'entête de la section s'affiche en blanc sur fond gris
#cg_navbar a:hover : affichage en bleu clair lorsque l'on pointe sur un élément du menu.

 

CSS de la section "Explication": 

.cg_bg_img_4 p{background-color:rgba(0, 0, 0, 0);}
.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_4 p : pas de couleur d'arrière-plan sur cette section
.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 module CG Parallax....