Intro section
We created 3 types of intro to all main pages (fullscreen intro, top intro and no intro). Any section we shown in "pages".
Fullscreen intro
The fullscreen intro is a place where you can add a themed photo and a description of page. To use the fullscreen intro you need to add the class "intro-fullscreen" to the body and insert to markup "section-intro" (as shown below). Example of such a section, you can see by clicking the tabbed navigation "fullscreen intro" in "pages". When you scroll the page or click the arrow down, the intro automatically docks at the top of the page and reduces the height (top intro view). To return to the intro, click the arrow up. You can define an opacity at the start (data-opacity-start) and at the end intro position (data-opacity-end an).
// to good working, use our classes <body> class="intro-fullscreen fixed-footer yo-anim-enabled scrollable intro-end"</body> ... // choose an intro opacity, 0 - full opacity, 100 - no opacity ... <div class="section-intro section-intro-parallax" data-opacity-start="30" data-opacity-end="100"> <div class="bg-section opacity-50 reservation-fullscreen"></div> <div class="pre-content"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-sm-offset-1"> // fill information <h1 class="yo-anim yo-anim-fade" data-animation-delay="100">Fullscreen intro</h1> <p class="yo-anim yo-anim-fade" data-animation-delay="500">Scroll down to move into content section. <br/>Bottom part of this image will be your header.</p> </div> </div> </div> </div> // intro arrows <a class="arrow1 arrow-section hidden-xs" href="#"> <i class="fa fa-angle-down"></i> </a> <a class="arrow2 arrow-section hidden-xs" href="#" style=""> <i class="fa fa-angle-up"></i> </a> </div> ...
Top header
The top intro view is the same as fullscreen intro after scroll. The intro view, see by clicking the tabbed navigation "top header". To create it, add the class "top-intro" to the body and fill in markup "section-intro".
<body> class="intro-top fixed-footer yo-anim-enabled scrollable"</body> ... ... <div class="section-intro section-intro-parallax" data-opacity-start="30" data-opacity-end="100"> <div class="bg-section reservation-fullscreen"></div> <div class="pre-content"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-sm-offset-1"> <h1 class="yo-anim yo-anim-fade" data-animation-delay="100">An Italian dream</h1> <p class="yo-anim yo-anim-fade" data-animation-delay="500">In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum eleifend nulla quis bibendum. Sed tempus massa dolor, vel pharetra elit dictum in. </p> </div> </div> </div> </div> </div> ...
No header
If you need no header in your page, add class "no-intro" to the body.
<body> class="no-intro fixed-footer yo-anim-enabled scrollable show-nav"</body> ...