- data-color – custom text color
- data-font-size – custom font size
- data-height – custom height
- data-background – custom background
- data-show – show hidden content
- data-parallax – set parallax value
Check the markup example with the use of data attributes:
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<header data-parallax="30" class="ct-page-header ct-page-header--big"> <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="ct-page-header__svg"> <path d="M0,100 L 100,100 100,0 Z"></path> </svg> <div class="ct-page-header__inner"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Parties & Events With <b>Personalized Fun!</b></h1> <p>We set up, organize, and supervise all of the festivities with fun, engaging, and age appropriate games & activities. Mom & Dad never have to worry about boredom or safety!</p><a href="packages.html" class="btn btn-default-o">See Parties</a> </div> </div> </div> </div> </header> |
Screenshot
Slider example with data attributes