Features

3.1. Media Sections

Orlando supports media sections with Slice effect, Push effect, Particles effect, slider effect, Parallax, KenBurns effect and videos.

3.1.1. Slice Effect:

<!--This is the slice effect-->
<header class="ct-intro-topImage">
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
        <div class="ct-intro-title">
            <h1 class="ct-u-colorWhite ct-fw-600">welcome.
                <small class="ct-u-colorMotive ct-fw-300">We have a passion for design and code</small>
            </h1>
        </div>
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
</header>
<button class="trigger" data-info="Continue"><span>Trigger</span></button>

<script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script>
<script type="text/javascript" src="{{asset "js/intro-effects/slice.js"}}"></script>

<h1 class="ct-u-colorWhite ct-fw-600">welcome.

<small class="ct-u-colorMotive ct-fw-300">We have a passion for design and code</small>

</h1>

</div>

</header>

<button class="trigger" data-info="Continue"><span>Trigger</span></button>

Slice Effect is in sliced_effect.hbs file. If you want to have this effect, just make available in home.hbs file.

3.1.2. Push Effect:

<!--This is the push effect-->
<header class="ct-intro-topImage">
        <div class="bg-img"><img src="{{@blog.cover}}" alt="Background Image"/></div>
        <div class="ct-intro-title">
            <h3 class="ct-u-colorMotive ct-fw-600 ct-u-hrMid">
                <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                <span class="ct-fw-300">User</span> Xperiences
            </h3>
            <p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,
                condimentum porttitor cursus duis neclim.</p>
        </div>
</header>
<button class="trigger" data-info="Continue"><span>Trigger</span></button>

<script type="text/javascript" src="{{asset "js/intro-effects/classie.js"}}"></script>
<script type="text/javascript" src="{{asset "js/intro-effects/push.js"}}"></script>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Xperiences

</h3>

<p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,

condimentum porttitor cursus duis neclim.</p>

</div>

</header>

<button class="trigger" data-info="Continue"><span>Trigger</span></button>

Push Effect is in sliced_effect.hbs file. If you want to have this effect, just make available in home.hbs file.

3.1.3. Particles Effect:

<!--this is particle effect-->
<section class="ct-mediaSection ct-u-borderMotiveBottom" data-height="100%">
    <div class="ct-mediaSection-inner">
        <div id="particles-js"></div>
        <div class="ct-u-displayTableVertical">
            <div class="ct-u-displayTableCell">
                <div class="container text-center"  data-stellar-ratio="0.5">
                    <h3 class="ct-u-colorMotive ct-fw-600 ct-u-hrMid">
                        <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                        <span class="ct-fw-300">User</span> Xperiences
                    </h3>
                    <p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,
                        condimentum porttitor cursus duis neclim.</p>
                </div>
            </div>
        </div>
    </div>
    <a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span
            class="ct-sectionButton-circle animated pulse activate infinite"><i
            class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>
</section>
<div id="section1"></div>

<script type="text/javascript" src="{{asset "js/jquery.min.js"}}"></script>

<script type="text/javascript" src="{{asset "js/ct-mediaSection/jquery.stellar.min.js"}}"></script>
<script type="text/javascript" src="{{asset "js/ct-mediaSection/init.js"}}"></script>

<script type="text/javascript" src="{{asset "js/particles/particles.js"}}"></script>
<script type="text/javascript" src="{{asset "js/particles/init.js"}}"></script>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Xperiences

</h3>

<p class="ct-u-colorWhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit dont<br>emet suspendisse,

condimentum porttitor cursus duis neclim.</p>

</div>

<a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span

class="ct-sectionButton-circle animated pulse activate infinite"><i

class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>

</section>

3.1.4. Flexslider:

<!--this is flexslider effect-->
<section class="ct-mediaSection ct-u-borderMotiveBottom" data-height="100%">
    <div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider"
         data-animations="true" data-height="100%">
        <ul class="slides">
            <li data-bg="{{asset "images/demo-content/bigImage4.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">01</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-2.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">02</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-3.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">03</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-bg="{{asset "images/demo-content/orlando-slider-image-4.jpg"}}">
                <div class="inner ct-u-paddingBoth100">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 col-md-5">
                                <span class="h2 ct-fw-300 ct-u-colorMotive animated" data-fx="zoomIn">04</span>

                                <h3 class="ct-u-colorWhite ct-u-hrLeft animated" data-fx="fadeInUp">
                                    <small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>
                                    <span class="ct-fw-300">User</span> Experiences
                                </h3>
                                <p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,
                                    consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis
                                    neclim.</p>
                                <a href="/services/" class="btn ct-btn--rounded btn-primary text-uppercase animated"
                                   data-fx="fadeInUp" data-time="800">Services</a>
                                <a href="/about-us/"
                                   class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"
                                   data-time="1250">About us</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span
            class="ct-sectionButton-circle animated pulse activate infinite"><i
            class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>
</section>
<div id="section1"></div>

100

101

102

103

104

105

106

107

108

<div class="flexslider ct-flexslider--controlsVertical ct-flexslider--controlsWhite ct-js-flexslider"

data-animations="true" data-height="100%">

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="../demo/buy.php" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Buy Orlando Ghost</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

<small class="text-uppercase ct-u-colorWhite">We create unique and inovative</small>

<span class="ct-fw-300">User</span> Experiences

</h3>

<p class="ct-u-colorWhite animated" data-fx="zoomInDown">Lorem ipsum dolor sit amet,

consectetur adipiscing elit dont emet suspendisse, condimentum porttitor cursus duis

neclim.</p>

<a href="/services/" class="btn ct-btn--rounded btn-primary text-uppercase animated"

data-fx="fadeInUp" data-time="800">Services</a>

<a href="/about-us/"

class="btn ct-btn--rounded btn-default text-uppercase animated" data-fx="fadeInUp"

data-time="1250">About us</a>

</div>

</li>

</ul>

</div>

<a class="ct-sectionButton ct-js-btnScroll" href="#section1"><span

class="ct-sectionButton-circle animated pulse activate infinite"><i

class="fa fa-angle-down animated activate bounce infinite"></i></span>Continue</a>

</section>

In main-header.hbs files we have a different types of header. This sections has parallax, ken burns,videos effect and other types of header.

3.1.5. Parallax Section:

<header class="ct-mediaSection" data-stellar-background-ratio="0.3" data-height="400" data-type="parallax"
         data-bg-image="{{asset "images/demo-content/bigImage3.jpg"}}"
         data-bg-image-mobile="{{asset "images/demo-content/bigImage3-mobile.jpg"}}">
    <div class="ct-mediaSection-inner">
        <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150" data-stellar-ratio="0.5">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="ct-fw-600 text-uppercase">
                                Blog
                        </h1>
                    </div>
                    <div class="col-md-4">
                    <span>
                        Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                    </span>
                    </div>
                </div>
            </div>
        </header>
    </div>
</header>

<header class="ct-mediaSection" data-stellar-background-ratio="0.3" data-height="400" data-type="parallax"

data-bg-image="{{asset "images/demo-content/bigImage3.jpg"}}"

data-bg-image-mobile="{{asset "images/demo-content/bigImage3-mobile.jpg"}}">

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</div>

</header>

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! 🙂

3.1.6. Ken Burns Section:

<section class="ct-mediaSection" data-height="400" data-type="kenburns"
         data-bg-image-mobile="{{asset "images/demo-content/bigImage4-mobile.jpg"}}">
    <div class="ct-mediaSection-kenburnsImageContainer">
        <img src="{{asset "images/demo-content/bigImage4.jpg"}}" alt="demo image">
        <img src="{{asset "images/demo-content/bigImage5.jpg"}}" alt="demo image">
        <img src="{{asset "images/demo-content/bigImage4.jpg"}}" alt="demo image">
    </div>
    <div class="ct-mediaSection-inner">
        <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150"  data-stellar-ratio="0.5">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="ct-fw-600 text-uppercase">
                           Blog
                        </h1>
                    </div>
                    <div class="col-md-4">
                        <span>
                            Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                        </span>
                    </div>
                </div>
            </div>
        </header>
    </div>
</section>

<section class="ct-mediaSection" data-height="400" data-type="kenburns"

data-bg-image-mobile="{{asset "images/demo-content/bigImage4-mobile.jpg"}}">

</div>

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</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 🙂

3.1.7. Video Section:

<header class="ct-mediaSection" data-height="400" data-type="video"
         data-bg-image-mobile="../assets/images/demo-content/bigImage3-mobile.jpg">
    <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9">

        <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">
        <div class="ct-mediaSection-inner">
            <header class="ct-pageHeader ct-pageHeader--type5 ct-pageHeader--hasDescription ct-u-paddingTop150" data-stellar-ratio="0.5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <h1 class="ct-fw-600 text-uppercase">
                                Blog
                            </h1>
                        </div>
                        <div class="col-md-4">
                        <span>
                            Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.
                        </span>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    </div>
</header>

<header class="ct-mediaSection" data-height="400" data-type="video"

data-bg-image-mobile="../assets/images/demo-content/bigImage3-mobile.jpg">

</video>

</div>

Blog

</h1>

</div>

<span>

Aliquam erat volutpat. in vitae gravida sem. praesent nec fermentum erat.

</span>

</div>

</header>

</div>

</header>

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

3.1.3. How to make available the effect (fragment of Home.hbs file)

{{!>simply-slider2}}       <!--This is simply slider, tis is the same slider like in page-office.hbs file-->
{{!> flexslider-effect}}      <!--This is the big slider on the main side of tha page, if you want to enable the effect just remove ! and change the wrapper class to " "-->
{{!> slice-effect}}           <!--this is slice effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--sliced and add this class ct-intro-content below -->
{{!> push-effect}}            <!--this is push effect, if you want to enable the effect just remove ! and change the wrapper class to ct-pageWrapper ct-intro--push and add this class ct-intro-content below-->
{{!>particles-effect}}         <!--This is the particles effect, if you want to enable the effect just remove ! and change the wrapper class to " "-->

    <!--If we use a effect like slice or push, all the content must be in this section-->
     <!--If you have to use a effect like above , you have add this class ct-intro-content-->

{{!>simply-slider2}}

{{!> flexslider-effect}}

{{!> slice-effect}}

{{!> push-effect}}

{{!>particles-effect}}

News

3.1. Media Sections

3.1.1. Slice Effect:

3.1.2. Push Effect:

3.1.3. Particles Effect:

3.1.4. Flexslider:

3.1.5. Parallax Section:

3.1.6. Ken Burns Section:

3.1.7. Video Section:

3.1.3. How to make available the effect (fragment of Home.hbs file)

Siver

Estato

Disrupt

We are elite