html5鼠標(biāo)懸停圖片文字3D視差動(dòng)畫特效
元素的HTML結(jié)構(gòu)
- <a href="#" class="tilter tilter--2">
- <figure class="tilter__figure">
- <img class="tilter__image" src="img/3.jpg" alt="img03" />
- <div class="tilter__deco tilter__deco--shine"><div></div></div>
- <div class="tilter__deco tilter__deco--overlay"></div>
- <figcaption class="tilter__caption">
- <h3 class="tilter__title">Helen Portland</h3>
- <p class="tilter__description">Seattle</p>
- </figcaption>
- <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
- <path d="M20.5,20.5h260v375h-260V20.5z" />
- </svg>
- </figure>
- </a>
- .tilter {
- position: relative;
- display: block;
- flex: none;
- width: 300px;
- height: 415px;
- margin: 1.5em 2.5em;
- color: #fff;
- perspective: 1000px;
- }
- .tilter * {
- pointer-events: none;
- }
- .tilter:hover,
- .tilter:focus {
- color: #fff;
- outline: none;
- }
- .tilter__figure,
- .tilter__image {
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- }
- .tilter__figure > * {
- transform: translateZ(0px); /* Force correct stacking order */
- }
- .tilter__figure {
- position: relative;
- }
- .tilter__figure::before {
- content: '';
- position: absolute;
- top: 5%;
- left: 5%;
- width: 90%;
- height: 90%;
- box-shadow: 0 30px 20px rgba(35,32,39,0.5);
- }
- .tilter__deco {
- position: absolute;
- top: 0;
- left: 0;
- overflow: hidden;
- width: 100%;
- height: 100%;
- }
- .tilter__deco--overlay {
- background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));
- }
- .tilter__deco--shine div {
- position: absolute;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
- background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
- }
- .tilter__deco--lines {
- fill: none;
- stroke: #fff;
- stroke-width: 1.5px;
- }
- .tilter__caption {
- position: absolute;
- bottom: 0;
- width: 100%;
- padding: 4em;
- }
- .tilter__title {
- font-family: 'Abril Fatface', serif;
- font-size: 2.5em;
- font-weight: normal;
- line-height: 1;
- margin: 0;
- }
- .tilter__description {
- font-size: 0.85em;
- margin: 1em 0 0 0;
- letter-spacing: 0.15em;
- }
在選項(xiàng)中，我們可以定義每個(gè)動(dòng)畫元素將具有的動(dòng)作：
我們可以傳遞以下內(nèi)容：所有軸和動(dòng)畫的平移和旋轉(zhuǎn)（持續(xù)時(shí)間，緩動(dòng)和彈性 - 與anime.js選項(xiàng)相同的方式）以恢復(fù)為默認(rèn)樣式。
對(duì)于平移和旋轉(zhuǎn)，我們可以通過以下方式定義每個(gè)軸的值：
number ：例如翻譯：{X：10，Y：-10}意味著該元件將沿x軸從-10px從10px的移動(dòng)為10px（我們著手從左至右的小鼠）和在y軸到-10px（當(dāng)我們將鼠標(biāo)從上到下移動(dòng)時(shí)）。
array ：如翻譯：{Z：[10,100]}這意味著該元件將沿z軸從10px的移動(dòng)到100像素（如我們從頂端移動(dòng)鼠標(biāo)到下）
- Initialize:
- new TiltFx(el, [options]);
- The options:
- var options = {
- movement: {
- // The main wrapper.
- imgWrapper : {
- translation : {x: 10, y: 10, z: 30},
- rotation : {x: 0, y: -10, z: 0},
- reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
- },
- // The SVG lines element.
- lines : {
- translation : {x: 10, y: 10, z: [0,70]},
- rotation : {x: 0, y: 0, z: -2},
- reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
- },
- // The caption/text element.
- caption : {
- rotation : {x: 0, y: 0, z: 2},
- reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
- },
- // The overlay element.
- overlay : {
- translation : {x: 10, y: -10, z: 0},
- rotation : {x: 0, y: 0, z: 2},
- reverseAnimation : {duration : 2000, easing : 'easeOutExpo'}
- },
- // The shine element.
- shine : {
- translation : {x: 100, y: 100, z: 0},
- reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
- }
- }
- }
|
收藏
點(diǎn)贊
反對(duì)
