Two sides

Two sides templat documentation

  1. Home
  2. Templates
  3. Two sides

Examples

Image Slider Video

Installation

<link rel="stylesheet" href='../HTWF/css/fullpage.twoside.css'>        
<script src='../HTWF/scripts/fullpage.twoside.js'></script>

Usage

<body>
    <header>
        ...
    </header>
    <div class="background-page" style="background-image:url('image-1.jpg')"></div>
    <div class="sec-twoside white">
        <div class="row">
            <div class="half-side left">
                <div class="content">
                    <!-- MAIN LEFT CONTENT -->
                    ...
                </div>
            </div>
            <div class="half-side right">
                <div class="content">
                    <!-- MAIN RIGHT CONTENT -->
                    <div id="twosides-menu">
                        <div class="twoside-open"><hr />About us</div>
                        <div class="twoside-open"><hr />Gallery</div>
                    </div>
                </div>
            </div>
            <div id="twosides-main">
                <div class="section center-box">
                    <div class="content">
                        ...
                    </div>
                </div>
                <div class="section center-box">
                    <div class="content">
                        ...
                    </div>
                </div>
            </div>
            <div class="center-bg"></div>
            <div class="close-button"></div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body>

<div id="twosides-main">
    <div class="section center-box">
        <div class="content">
            <div class="scroll-content gradient-bottom " data-height="350">
                ...
            </div>
        </div>
    </div>
</div>

<body>
    <header>
        ...
    </header>
    <div class="background-page">
        <div class="flexslider slider" data-options="directionNav:false,animation:fade,slideshowSpeed:5000">
            <ul class="slides">
                <li>
                    <div class="bg-cover" style="background-image:url('image-1.jpg')"></div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url('image-2.jpg')"></div>
                </li>
                <li>
                    <div class="bg-cover" style="background-image:url('image-3.jpg')"></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="sec-twoside white">
        ...
    </div>
    <footer>
    ...
    </footer>
</body>

<body>
    <header>
        ...
    </header>
    <div class="background-page">
        <video autoplay="autoplay" loop="loop" poster="video-poster.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="sec-twoside white">
        ...
    </div>
    <footer>
    ...
    </footer>
</body>

Main settings

Name Type Description
Javascript section open HTML You can open a section with function openSection(section-index), replace section-index with index of section you want open, starting from 0.
Javascript section close HTML You can close a section with function closeSection().
Scroll box HTML You can add a scroll box like usual.Example: 
<div class="scroll-content" data-height="250">
    ...
</div>
Plugin dependency

This feature require Slim Scroll Plugin (../HTWF/scripts/jquery.slimscroll.min.js)

Slim Scroll documentation here
Slider background HTML Insert slider code of examples. Code must be inserted just belove header block. Slider must use setting animation:fade.
Plugin dependency

This feature require Flex Slider Plugin (../../HTWF/scripts/flexslider/flexslider.css and ../../HTWF/scripts/flexslider/jquery.flexslider-min.js)

Slider documentation here
Video background HTML Insert video code of examples above. Code must be inserted just belove header block. You can use also Youtube videos with this cose:

<div class="background-page">
    <div data-video-youtube="NA6fPQTd22M" video-quality="hd"></div>
</div>
Video documentation

Video Youtube feature is part of background video section. Complete documentation here
Overlay pattern HTML You can add a overlay to every background, like images, videos and sliders. Insert it into <div class="background-page"> ... </div> object, in first row.
Example:

<div class="background-page">
    <div class="bg-overlay line-45"></div>
    <div data-video-youtube="NA6fPQTd22M" video-quality="hd"></div>
</div>
Overlay pattern documentation

Overlay pattern is a feature of CSS and Javascript. Complete documentation here

Center adjustment HTML If the contents are not perfectly centered to the screen you can adjust it by add attirbute data-offset="123" to two side container. Ex. <div class="sec-twoside" data-offset="60"> ... <div>.