There are three types if media sections:
- Parallax,
- Video,
- Kenburns
Inside each of them you can add your custom content.
Parralax
We recommend you to use at least 1900px widht image as background
HTML markup:
|
1 2 3 4 5 |
<div class="ct-mediaSection" data-stellar-background-ratio="0.3" data-type="parallax" data-bg-image="path/to/the/picture" data-bg-image-mobile="path/to/the/picture"> <div class="ct-mediaSection-inner"> //content </div> </div> |
Video
Consider having to 2 extended files: mp4 and webm.
HTML markup:
|
1 2 3 4 5 6 7 8 |
<div class="ct-mediaSection" id="header" data-type="video" data-height="650" data-bg-image-mobile="path/to/the/image"> <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"> <video id="video1" muted="" loop="loop" autoplay="autoplay" preload="auto"> <source src="path/to/the/video.mp4" type="video/mp4"> <source src="path/to/the/video.webm" type="video/webm"> </video> </div> </div> |
Kenburns
In kenburs we can add 3 images.
HTML markup:
|
1 2 3 4 5 6 7 8 9 |
<div class="ct-mediaSection" data-height="460" data-type="kenburns" data-bg-image-mobile="path/to/the/picture.jpg"> <div class="ct-mediaSection-kenburnsImageContainer"> <img src="path/to/the/picture.jpg" alt="Picture"> <img src="path/to/the/picture.jpg" alt="Picture"> <img src="path/to/the/picture.jpg" alt="Picture"> </div> //content </div |
Require scripts for Media sections:
|
1 2 |
<script src="../assets/plugins/ct-mediaSection/js/jquery.stellar.min.js"></script> <script src="../assets/plugins/ct-mediaSection/js/init.js"></script> |