图片/图形

炫酷鼠标hover图片幻影跟随动画特效

创客主机


这是一款炫酷的鼠标hover图片幻影跟随动画特效。该特效在鼠标hover图片时,会产生多种颜色形成的堆叠卡片幻影,跟随图片移动,效果非常炫酷。

HTML结构

该图片hover效果的HMLT结构如下:

  1. <div class="grid grid--effect-vega">
  2.   <a href="#" class="grid__item grid__item--c1">
  3.     <div class="stack">
  4.       <div class="stack__deco"></div>
  5.       <div class="stack__deco"></div>
  6.       <div class="stack__deco"></div>
  7.       <div class="stack__deco"></div>
  8.       <div class="stack__figure">
  9.         <img class="stack__img" src="img/1.png" alt="Image"/>
  10.       </div>
  11.     </div>
  12.     <div class="grid__item-caption">
  13.       <h3 class="grid__item-title">anaerobic</h3>
  14.       <div class="column column--left">
  15.         <span class="column__text">Period</span>
  16.         <span class="column__text">Subjects</span>
  17.         <span class="column__text">Result</span>
  18.       </div>
  19.       <div class="column column--right">
  20.         <span class="column__text">2045</span>
  21.         <span class="column__text">133456</span>
  22.         <span class="column__text">Positive</span>
  23.       </div>
  24.     </div>
  25.   </a>
  26.   <a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
  27.   <a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
  28. </div><!-- /grid -->

CSS样式

在CSS布局中使用flexbox进行布局,其中,堆叠的幻影图片的css样式如下:

  1. .stack {
  2.   position: relative;
  3.   width: 100%;
  4.   height: 200px;
  5.   transform-style: preserve-3d;
  6. }
  7.  
  8. .stack__deco {
  9.   position: absolute;
  10.   top: 0;
  11.   left: 0;
  12.   width: 100%;
  13.   height: 100%;
  14.   background-color: currentColor;
  15.   transform-origin: 50% 100%;
  16. }
  17.  
  18. .stack__deco:first-child {
  19.   opacity: 0.2;
  20. }
  21.  
  22. .stack__deco:nth-child(2) {
  23.   opacity: 0.4;
  24. }
  25.  
  26. .stack__deco:nth-child(3) {
  27.   opacity: 0.6;
  28. }
  29.  
  30. .stack__deco:nth-child(4) {
  31.   opacity: 0.8;
  32. }
  33.  
  34. .stack__figure {
  35.   position: relative;
  36.   display: flex;
  37.   justify-content: center;
  38.   align-items: center;
  39.   overflow: hidden;
  40.   width: 100%;
  41.   height: 100%;
  42.   cursor: pointer;
  43.   transform-origin: 50% 100%;
  44. }
  45.  
  46. .stack__img {
  47.   position: relative;
  48.   display: block;
  49.   flex: none;
  50. }

JAVASCRIPT

特效中使用js来驱动动画效果,其中的一种效果的js代码如下:

  1. HamalFx.prototype._in = function() {
  2.   var self = this;
  3.  
  4.   this.DOM.stackItems.map(function(e, i) {
  5.     e.style.opacity = i !== self.totalItems - 1 ? 0.2*i+0.2 : 1
  6.   });
  7.  
  8.   anime({
  9.     targets: this.DOM.stackItems,
  10.     duration: 1000,
  11.     easing: 'easeOutExpo',
  12.     translateY: function(target, index) {
  13.       return -1*index*5;
  14.     },
  15.     rotate: function(target, index, cnt) {
  16.       if( index === cnt - 1 ) {
  17.         return 0;
  18.       }
  19.       else {
  20.         return index%2 ? (cnt-index)*1 : -1*(cnt-index)*1;
  21.       }
  22.     },
  23.     scale: function(target, index, cnt) {
  24.       if( index === cnt - 1 ) {
  25.         return 1;
  26.       }
  27.       else {
  28.         return 1.05;
  29.       }
  30.     },
  31.     delay: function(target, index, cnt) {
  32.       return (cnt-index-1)*30
  33.     }
  34.   });
  35.  
  36.   anime({
  37.     targets: this.DOM.img,
  38.     duration: 1000,
  39.     easing: 'easeOutExpo',
  40.     scale: 0.7
  41.   });
  42.  
  43.   anime({
  44.     targets: [this.DOM.columns.left, this.DOM.columns.right],
  45.     duration: 1000,
  46.     easing: 'easeOutExpo',
  47.     translateX: function(target, index) {
  48.       return index === 0 ? -30 : 30;
  49.     }
  50.   });
  51.  
  52. };
  53.  
  54. HamalFx.prototype._out = function() {
  55.   var self = this;
  56.  
  57.   anime({
  58.     targets: this.DOM.stackItems,
  59.     duration: 500,
  60.     easing: 'easeOutExpo',
  61.     translateY: 0,
  62.     rotate: 0,
  63.     scale: 1,
  64.     opacity: function(target, index, cnt) {
  65.       return index !== cnt - 1 ? 0 : 1
  66.     }
  67.   });
  68.  
  69.   anime({
  70.     targets: this.DOM.img,
  71.     duration: 1000,
  72.     easing: 'easeOutElastic',
  73.     scale: 1
  74.   });
  75.  
  76.   anime({
  77.     targets: [this.DOM.columns.left, this.DOM.columns.right],
  78.     duration: 500,
  79.     easing: 'easeOutExpo',
  80.     translateX: 0
  81.   });
  82. };

Github地址:https://github.com/codrops/StackMotionHoverEffects/

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!