{Theme} supports media sections with Parallax, KenBurns effect and videos.
Parallax Section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<section class="ct-mediaSection ct-u-paddingBoth70" data-stellar-background-ratio="0.3" data-height="650" data-type="parallax" data-bg-image="./assets/images/demo-content/bigImage1.jpg" data-bg-image-mobile="./assets/images/demo-content/bigImage1-mobile.jpg" style="min-height: 650px; height: 650px; background-image: url(http://orlando.html.themeforest.createit.pl/light/assets/images/demo-content/bigImage1.jpg); background-position: 50% 50%;"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <header class="ct-pageSectionHeader"> <h3 class="text-lowercase ct-fw-600"> Parallax <small class="ct-fw-700 text-uppercase">Yes, we are the absolute best in the business </small> </h3> </header> </div> <div class="col-sm-8"> <p> Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus. </p> <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a> <a href="features-p-tables.html" class="btn ct-btn--black ct-btn--rounded text-uppercase">Pricing Options</a> </div> </div> </div> </div> </section> |
We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/
Our custom data-attributes for the parallax section are:
- data-height: Define the minimun height for the sections
- data-type: Type of Media Section (parallax/kenburns/video)
- data-image: Background image for the section.
- data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂
Ken Burns Sections
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="650" data-type="kenburns" data-bg-image-mobile="./assets/images/demo-content/bigImage5-mobile.jpg" style="min-height: 650px; height: 650px;"> <div class="ct-mediaSection-kenburnsImageContainer"> <img src="./assets/images/demo-content/bigImage5.jpg" alt="demo image" class="fx"> <img src="./assets/images/demo-content/bigImage4.jpg" alt="demo image" class=""> <img src="./assets/images/demo-content/bigImage5.jpg" alt="demo image" class="fx"> </div> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <header class="ct-pageSectionHeader"> <h3 class="text-lowercase ct-fw-600 ct-u-colorWhite"> Ken Burns <small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in the business </small> </h3> </header> </div> <div class="col-sm-8"> <p> Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus. </p> <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a> <a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing Options</a> </div> </div> </div> </div> </section> |
KenBurns section supports one or more images that you should add inside .media-section-image-container
Our custom data-attributes for the kenburns section are:
- data-height: Define the minimun height for the sections
- data-type: Type of Media Section (parallax/kenburns/video)
- data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂
Video Sections
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<section class="ct-mediaSection ct-u-paddingBoth70 ct-u-colorWhite" data-height="700" data-type="video" data-bg-image-mobile="./assets/images/demo-content/bigImage3-mobile.jpg" style="min-height: 700px; height: 700px;"> <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"> <!-- in order for video to be muted you must add &api=1&player_id=vimeoplayer1 to the end of the video src If you have more than one video, make sure that player_id and id have dif names on each video --> <video id="video1" muted="" loop="" autoplay="autoplay" preload="auto"> <source src="http://orlando.html.themeforest.createit.pl/light/assets/videos/loopbookeh.mp4" type="video/mp4"> <source src="http://orlando.html.themeforest.createit.pl/light/assets/videos/loopbookeh.webm" type="video/webm"> </video> </div> <div class="ct-u-displayTable" style="height: 700px;"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-sm-4"> <header class="ct-pageSectionHeader"> <h3 class="text-lowercase ct-fw-600 ct-u-colorWhite"> Video <small class="ct-fw-700 text-uppercase ct-u-colorWhite">Yes, we are the absolute best in the business </small> </h3> </header> </div> <div class="col-sm-8"> <p> Donec justo mauris, sagittis sed vulputate ut, commodo dapibus massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut mi lacus. Morbi accumsan mauris ac posuere vehicula. Donec bibendum tellus rutrum turpis varius dictum. Maecenas tristique arcu sed rhoncus laoreet. Praesent eget fermentum nisi. Donec ac velit aliquet, bibendum sem in, convallis est. Phasellus sodales ultricies cursus. Vivamus leo nunc, pretium vitae dictum a, mollis ut sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec porttitor tristique sem, dictum vehicula nisi accumsan eget. Pellentesque habitant morbi tristique senectus et netus. </p> <a href="contact.html" class="btn btn-primary ct-btn--rounded text-uppercase">Contact Us</a> <a href="features-p-tables.html" class="btn btn-default ct-btn--rounded text-uppercase">Pricing Options</a> </div> </div> </div> </div> </div> </section> |
We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.
Our custom data-attributes for the video section are:
- data-height: Define the minimun height for the sections
- data-type: Type of Media Section (parallax/kenburns/video)
- data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image