Test OnePage avec CG Parallax

1 1 1 1 1 Vote 5.00 (4 Votes)

Vote utilisateur: 5 / 5

 

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

CG Parallax

Bienvenue à la démo du module CG Parallax

Bienvenue

 

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

 

38

Modules/Extensions

17000 +

Téléchargés

9

Modules sur le JED

3600 msg

forum.joomla.fr

370 msg

forum.joomla.org

5 présentations

JoomlaDays Paris

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! 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,....



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

Explications

Explanation of this page's behaviour.

This page uses CG Parallax module to display one page which contains multiple articles, each of them having a distinct background image.

Image+article) one section une section.

Each section may be easily customized through CSS code.

To create this page, I used 3 different images and I customized CG Parallax module using the following CSS code:

  • Menu on rightside, fixed
  • Images have been lightened using following values: sections 2 and 4 => image lighten : 5, section 3 => image lighten 4

module's CSS:

#cg_navbar, .cg_sticky{top:30%!important;width:10em;right:0;position:fixed;z-index: 9999;}
#cg_navbar ul, .cg_sticky ul {width:95%}
.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 : module's menu on rightside of the website, when scrolling page.
.cg_parallax h2 : section title with white characters on a grey background.

 

Explanation sections CSS: 

.cg_bg_img_3 p{font-size:1.1em;background-color: inherit}

.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_3 p and
.cg_bg_img_4 p
: no background in this section
.cg_bg_img_4 h3 : title with big character
.cg_bg_img_4 .phpcode : CSS code with bigger characters.

You may now proceed to our CG Parallax module page...
or our CG Parallax Component