Parallax Effect

1 1 1 1 1
Rating 5.00 (3 Votes)

This page shows what  CG Parallax module can do.

"Parallax effect" is used to call different layers moving at different speeds.You'll find templates calling this "OnePage effect".

CG Parallax module has 2 layers: (almost) fixed background image and scrolling articles. Background image + article = one section.

Every section may be directly accessed through module's menu. In this example, your menu is on the rightside of the screen, due to some CSS tricks : #cg_navbar, .cg_sticky{top:30%!important;width:10em;right:0;position:fixed;z-index: 9999;}

On the french demo page (showing component CG Parallax), our menu is under the main menu.

Please note:  this page has been created just for testing purpose, so I took 2 existing articles and added a small explanation.

 

CG Parallax

Welcome to CG Parallax demo

Welcome

  • 5pages

    Introduce yourself, your company, organisation through a 5-pages website.

  • 5pages

    Introduce yourself, your company, organisation through a complete website.

Read more...

Who am I ?

couteau

 

1980 : computer science specialist, 12 years, including 3 years at Altanta, GA, USA, working with Unisys (former Burroughs) as computer software developer, project leader, pre-sale engineer, on bank softwares, I've been working as Computer Engineer Freelance since 1994

 

I develop programs on all kind of plate-forms, from mainframes to PC, with all kind of tools: from Cobol to Assembly language, with current tools (VB/SQL/PHP/Joomla/other web tools/...). 

I developped about fifteen professional websites in ASP language. These where realtime websites which kept track of parcels.

I develop software, train users, do technical support, manage projects, do pre-sale missions.

viking 002You'll find me on the french Joomla! forum or US Joomla! forum as pmleconte.

As volunteer, I've been Foyer Rural of Gouzangrez President for 4 years, member of town council (communication), computer/web tutor.

Read more...

Explanation

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