The header can be:
- static,
- parallax,
- kenburns
- video
The header title can be placed:
- – ct-pageHeader–bottomRight
- – ct-pageHeader–bottomLeft
- – ct-pageHeader–topRight
- – ct-pageHeader–topLeft
HTML MARKUP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<header class="ct-pageHeader"> <section class="ct-backgroundContent ct-u-displayTableVertical" data-type="pattern" data-height="283" data-bg-image="../assets/images/demo-content/header1.jpg" data-bg-image-mobile="../assets/images/demo-content/header1.jpg"> <div class="inner ct-u-displayTableCell ct-pageHeader--bottomRight"> <div class="container"> <div class="row"> <div class="col-md-12"> <h5 class="ct-pageHeader-title"> This is a STATIC header. </h5> </div> </div> </div> </div> </section> </header> |
You can use also extra header title animation “like typing”. You just need to adjust HTML markup for this – please see the example below. You can set also data-animation-speed. It’s usefull with short or long header’s title.
|
1 2 3 |
<h5 class="ct-pageHeader-title"> <span class="ct-js-typingAnimation" data-type="typingAnimation" data-animation-speed="3">Respect your body. Eat well. Dance forever.</span> </h5> |