163 lines
9.1 KiB
Plaintext
163 lines
9.1 KiB
Plaintext
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
- var tilt = true;
|
|
- var page_tilt = true;
|
|
- var height_equal = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Tilt Animation
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Animation
|
|
li.breadcrumb-item.active Tilt Animation
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row.tilt-showcase
|
|
.col-sm-12
|
|
.card.text-center
|
|
.card-header.pb-0
|
|
h5 Parallax hover tilt effect
|
|
.card-body
|
|
.row
|
|
.col-md-6.offset-md-3
|
|
div
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/02.jpg', data-tilt-perspective='300', data-tilt-speed='400', data-tilt-max='5', alt='')
|
|
div
|
|
h6.sub-title.mt-4.mb-0 The most basic usage:
|
|
ul
|
|
li
|
|
.line
|
|
code
|
|
span <script src="tilt.jquery.js"></script>
|
|
li
|
|
.line
|
|
| Mark your elements with
|
|
code
|
|
span <span data-tilt"></span>
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Parallax hover tilt effect
|
|
.card-body
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/03.jpg', data-tilt-perspective='300', data-tilt-speed='400', data-tilt-max='5', alt='')
|
|
div
|
|
h6.sub-title.mt-4 How to Use:
|
|
ol.mb-0
|
|
li.m-b-20
|
|
| A tiny requestAnimationFrame powered 60+fps
|
|
| lightweight parallax hover tilt effect for jQuery.
|
|
li.m-b-20
|
|
.line
|
|
| Add
|
|
code transform-style: preserve-3d
|
|
| to your tilt element.
|
|
li
|
|
.line
|
|
| Add
|
|
code transform: translateZ(20px)
|
|
| to your inner elements that have to pop out.
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card.height-equal
|
|
.card-header.pb-0
|
|
h5 Glare effect:
|
|
.card-body
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/04.jpg', data-tilt-glare='true', data-tilt-maxglare='.5', data-tilt-perspective='200', data-tilt-speed='300', data-tilt-max='10', alt='')
|
|
div
|
|
h6.sub-title.mt-4 How to Use:
|
|
.line
|
|
span
|
|
| Setting this option will enable a glare effect. You can tweak the glare value with
|
|
code {'maxGlare': .5}
|
|
pre.mb-0.pre-mt
|
|
code.language-javascript
|
|
| $('.js-tilt').tilt({
|
|
| glare: true,maxGlare: .5
|
|
| })
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Keep floating:
|
|
.card-body
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/05.jpg', data-tilt-reset='false', data-tilt-speed='200', data-tilt-max='5', data-tilt-perspective='150', alt='')
|
|
div
|
|
h6.sub-title.mt-4 How to Use:
|
|
.line
|
|
span
|
|
| Setting this option will not reset the tilt element when the user mouse leaves the element.
|
|
pre.mb-0
|
|
code.language-javascript
|
|
| $('.js-tilt').tilt({
|
|
| reset: false
|
|
| })
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Scale on hover
|
|
.card-body.o-hidden
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/06.jpg', data-tilt-speed='1000', data-tilt-max='20', data-tilt-scale='1.01', data-tilt-perspective='250', alt='')
|
|
div
|
|
h6.sub-title.mt-4 How to Use:
|
|
span Setting this option will scale tilt element on hover.
|
|
pre.mb-0
|
|
code.language-javascript
|
|
| $('.js-tilt').tilt({
|
|
| scale: 1.2
|
|
| })
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Disable Y axis
|
|
.card-body
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/07.jpg', data-tilt-speed='100', data-tilt-max='10', data-tilt-axis='x', data-tilt-perspective='250', alt='')
|
|
div
|
|
h6.sub-title.mt-4 The most basic usage:
|
|
span Setting this option will disable the Y-Axis on the tilt element.
|
|
pre.mb-0
|
|
code.language-javascript
|
|
| $('.js-tilt').tilt({
|
|
| axis: x
|
|
| })
|
|
.col-xxl-4.box-col-6.col-sm-6
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Disable X axis
|
|
.card-body
|
|
.tilt-image
|
|
img.img-fluid.img-thumbnail.js-tilt(src='assets/images/lightgallry/08.jpg', data-tilt-speed='250', data-tilt-max='10', data-tilt-axis='y', data-tilt-perspective='250', alt='')
|
|
div
|
|
h6.sub-title.mt-4 The most basic usage:
|
|
span Setting this option will disable the X-Axis on the tilt element.
|
|
pre.mb-0
|
|
code.language-javascript
|
|
| $('.js-tilt').tilt({
|
|
| axis: Y
|
|
| })
|
|
// Container-fluid ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|