You can arrange your content with the following Media sections types:
HTML MARKUP for parallax
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="inner"> //content </div> </div> |
HTML MARKUP for kenburns
1 2 3 4 5 6 7 8 |
<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> |
HTML MARKUP for video
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> |
JavaScript
1 2 |
<script src="../assets/plugins/ct-mediaSection/js/jquery.stellar.min.js"></script> <script src="../assets/plugins/ct-mediaSection/js/init.js"></script> |