Contact

mail@gemini-theme.com
+ 001 0231 123 32

Follow

Info

All demo content is for sample purposes only, intended to represent a live site. Please use the RocketLauncher to install an equivalent of the demo, all images will be replaced with sample images.

Parallax Effect

Simple Parallax Effect

Example Site: TwinSprings https://twinsprings.solutiosoftware.com/


HTML for any article or module

<div class="parallax" style="background-image: url('/images/stories/template/farm.jpg'); min-height: 25vw; "> </div>

Simple Parallax Effect #2

Outline CSS Classes

Place this class on each outline block that you want the effect to take place
The second line adds a transparent overlay over the image

simpleparallax

CSS for override.css

#g-bottom { background: url(/images/template/beloit-flat.jpg) 50% 0 no-repeat; background-size: cover; }
#g-bottom .g-container { width: 100%; background: rgba(250,246,241,.8); padding: 1rem 8%;}
OR
#g-bottom .g-grid { width: 100%; background: rgba(250,246,241,.8); padding: 1rem 8%;}

 

Fancy Parallax Effect

Example Site: St.Greg Shaw

Outline CSS Classes

Place in Outline (Page Settings => Javascript)

//solutiosoftware.com/content/shared/parallax/parallax.js

In Outline for those sections

CSS Classes

parallax-window

Tag Attributes

data-parallax => scroll
data-image-src => /images/template/paralax1.jpg

Example for Parallax

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus, eu euismod urna. Quisque mauris nunc, pretium nec sagittis et, faucibus eu nulla. Pellentesque scelerisque lobortis ante, non ultricies enim dictum sit amet. Fusce cursus est vel cursus bibendum. Nunc consequat, nisl a pulvinar fermentum, urna est elementum tellus, vitae consectetur purus risus a quam. Donec id velit nec diam porta sagittis sed ut nibh. Suspendisse sagittis ante eleifend turpis ultricies porttitor in ut ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec placerat ante in libero ultricies elementum. Donec ac urna tellus. Aliquam ante nisi, suscipit sed facilisis non, mollis quis nisi. In bibendum aliquet dui at scelerisque. Nunc tempor urna sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus, eu euismod urna. Quisque mauris nunc, pretium nec sagittis et, faucibus eu nulla. Pellentesque scelerisque lobortis ante, non ultricies enim dictum sit amet. Fusce cursus est vel cursus bibendum. Nunc consequat, nisl a pulvinar fermentum, urna est elementum tellus, vitae consectetur purus risus a quam. Donec id velit nec diam porta sagittis sed ut nibh. Suspendisse sagittis ante eleifend turpis ultricies porttitor in ut ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec placerat ante in libero ultricies elementum. Donec ac urna tellus. Aliquam ante nisi, suscipit sed facilisis non, mollis quis nisi. In bibendum aliquet dui at scelerisque. Nunc tempor urna sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac nisi lectus. Aliquam non faucibus lorem, vel sagittis metus. Nullam sed pretium lacus, eu euismod urna. Quisque mauris nunc, pretium nec sagittis et, faucibus eu nulla. Pellentesque scelerisque lobortis ante, non ultricies enim dictum sit amet. Fusce cursus est vel cursus bibendum. Nunc consequat, nisl a pulvinar fermentum, urna est elementum tellus, vitae consectetur purus risus a quam. Donec id velit nec diam porta sagittis sed ut nibh. Suspendisse sagittis ante eleifend turpis ultricies porttitor in ut ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec placerat ante in libero ultricies elementum. Donec ac urna tellus. Aliquam ante nisi, suscipit sed facilisis non, mollis quis nisi. In bibendum aliquet dui at scelerisque. Nunc tempor urna sapien.