You can arrange your content with the following Media sections types
Parallax
HTML markup
1 |
<section data-height="795" data-type="parallax" data-background="../assets/images/demo-content/pizza/slide1.jpg" data-background-mobile="../assets/images/demo-content/pizza/slide1.jpg" class="ct-mediaTable ct-mediaSection" data-stellar-background-ratio="0.3" style="min-height: 795px; background-image: url(http://localhost:63342/delimondo/HTML/assets/images/demo-content/pizza/slide1.jpg); background-position: 0% 0px;"></section> |
Ken Burn
HTML markup
1 2 3 |
<div data-type="kenburns" data-height="750" data-background-mobile="../assets/images/demo-content/delimondo/slide1.jpg" class="ct-mediaSection" style="min-height: 750px; background-image: url(http://localhost:63342/delimondo/HTML/pizza/index-kenburn.html);"> <div class="ct-mediaSection-kenburns"><img src="../assets/images/demo-content/pizza/slide1.jpg" alt="Image" class="singlefx"></div> </div> |
Video
HTML markup
1 2 3 4 5 6 7 8 |
<div data-type="video" data-height="750" data-background-mobile="../assets/images/demo-content/delimondo/slide1.jpg" class="ct-mediaSection" style="min-height: 750px; background-image: url(http://localhost:63342/delimondo/HTML/pizza/index-video.html);"> <div class="ct-mediaSection-video"> <video muted="" loop="" autoplay="autoplay" preload="auto"> <source src="../assets/video/video-restaurant.mp4" type="video/mp4"> <source src="../assets/video/video-restaurant.webm" type="video/webm"> </video> </div> </div> |
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/smoothScroll.js”></script>
<script src=”../assets/js/jquery.stellar.min.js”></script>
<script src=”../assets/js/media-section.js”></script>