You can arrange your content with the following Media sections types:
HTML markup – for parallax
|
1 2 3 4 5 |
<section class="ct-mediaSection" data-type="parallax" data-height="600" data-background="../path/to/image/image-name" data-background-mobile="../path/to/image/image-name"> <div class="ct-mediaSection-inner"> [ -- ] </div> </section> |
HTML markup – for kenburns
|
1 2 3 4 5 6 7 8 9 10 |
<section class="ct-mediaSection" data-type="kenburns" data-height="600" data-background-mobile="../path/to/image/image-name"> <div class="ct-mediaSection-kenburns"> <img src="../path/to/image/image-name" alt="Image" class="singlefx"> <img src="../path/to/image/image-name" alt="Image" class="singlefx"> <img src="../path/to/image/image-name" alt="Image" class="singlefx"> </div> <div class="ct-mediaSection-inner"> [ -- ] </div> </section> |
HTML markup – for video
|
1 2 3 4 5 6 7 8 |
<section class="ct-mediaSection" data-type="video" data-height="600" data-background-mobile="../path/to/image/image-name"> <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"> <iframe src="../path/to/video"></iframe> </div> <div class="ct-mediaSection-inner"> [ -- ] </div> </section> |
Description
data-type – determines the type of media section
data-height – determines the height of media section
data-background – this attribute allows you to insert image for desktop devices
data-background-mobile – this attribute allows you to insert image for mobile devices
JavaScript
<script src=”../assets/js/ct-mediaSection/js/smoothScroll.js”></script>
<script src=”../assets/js/ct-mediaSection/js/jquery.stellar.min.js”></script>
<script src=”../assets/js/ct-mediaSection/js/media-section.js”></script>