图片/图形

视觉倾斜效果的鼠标悬停卡片动画jQuery特效

也想出现在这里?联系我们
面包多

视觉倾斜效果的鼠标悬停卡片动画jQuery特效-创客云
这是一款带视觉倾斜效果的鼠标悬停卡片动画特效。该特效通过 js 和 css3 代码,使鼠标悬停在一张图片卡片上面时,卡片会根据鼠标的方向进行 3d 倾斜。
HTML 结构

  1. <section class="main">
  2.   <div class="wrap wrap--1">
  3.     <div class="container container--1">
  4.       <p>01. Normal</p>
  5.     </div>
  6.   </div>
  7.  
  8.   <div class="wrap wrap--2">
  9.     <div class="container container--2">
  10.       <p>02. Reverse</p>
  11.     </div>
  12.   </div>
  13.  
  14.   <div class="wrap wrap--3">
  15.     <div class="container container--3">
  16.       <p>03. Normal</p>
  17.     </div>
  18.   </div>
  19. </section>
也想出现在这里?联系我们
创客主机

CSS 样式

也想出现在这里?联系我们
创客主机

  1. *,
  2. *::after,
  3. *::before {
  4.   margin: 0;
  5.   padding: 0;
  6.   box-sizing: border-box;
  7. }
  8.  
  9. html {
  10.   font-size: 62.5%;
  11. }
  12.  
  13. body {
  14.   --background-color: hsl(180, 20%, 90%);
  15.  
  16.   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  17.  
  18.   min-height: 100vh;
  19.   padding: 2rem;
  20.  
  21.   color: hsla(0, 0%, 0%, .6);
  22.   background: var(--background-color);
  23.   text-align: center;
  24. }
  25.  
  26. h1 {
  27.   font-size: 3.2rem;
  28.   padding-top: 2rem;
  29. }
  30.  
  31. h1+p {
  32.   font-size: 1.8rem;
  33.   padding: 2rem 0 3rem;
  34. }
  35.  
  36. .main {
  37.   display: flex;
  38.   flex-wrap: wrap;
  39.   justify-content: center;
  40.   align-items: center;
  41. }
  42.  
  43. .wrap {
  44.   margin: 2rem;
  45.  
  46.   -webkit-transform-style: preserve-3d;
  47.  
  48.           transform-style: preserve-3d;
  49.   -webkit-transform: perspective(100rem);
  50.           transform: perspective(100rem);
  51.  
  52.   cursor: pointer;
  53. }
  54.  
  55. .container {
  56.   --rX: 0;
  57.   --rY: 0;
  58.   --bX: 50%;
  59.   --bY: 80%;
  60.  
  61.   width: 30rem;
  62.   height: 36rem;
  63.   border: 1px solid var(--background-color);
  64.   border-radius: 1.6rem;
  65.   padding: 4rem;
  66.  
  67.   display: flex;
  68.   align-items: flex-end;
  69.  
  70.   position: relative;
  71.   -webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  72.           transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  73.  
  74.   /*background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");*/
  75.   background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("../img/photo-1559113513-d5e09c78b9dd.jpg");
  76.   background-position: var(--bX) var(--bY);
  77.   background-size: 40rem auto;
  78.   box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
  79.  
  80.   transition: -webkit-transform .6s 1s;
  81.  
  82.   transition: transform .6s 1s;
  83.  
  84.   transition: transform .6s 1s, -webkit-transform .6s 1s;
  85. }
  86.  
  87. .container::before,
  88. .container::after {
  89.   content: "";
  90.  
  91.   width: 2rem;
  92.   height: 2rem;
  93.   border: 1px solid #fff;
  94.  
  95.   position: absolute;
  96.   z-index: 2;
  97.  
  98.   opacity: .3;
  99.   transition: .3s;
  100. }
  101.  
  102. .container::before {
  103.   top: 2rem;
  104.   right: 2rem;
  105.  
  106.   border-bottom-width: 0;
  107.   border-left-width: 0;
  108. }
  109.  
  110. .container::after {
  111.   bottom: 2rem;
  112.   left: 2rem;
  113.  
  114.   border-top-width: 0;
  115.   border-right-width: 0;
  116. }
  117.  
  118. .container--active {
  119.   transition: none;
  120. }
  121.  
  122. .container--2 {
  123.   -webkit-filter: hue-rotate(80deg) saturate(140%);
  124.           filter: hue-rotate(80deg) saturate(140%);
  125. }
  126.  
  127. .container--3 {
  128.   -webkit-filter: hue-rotate(160deg) saturate(140%);
  129.           filter: hue-rotate(160deg) saturate(140%);
  130. }
  131.  
  132. .container p {
  133.   color: hsla(0, 0%, 100%, .6);
  134.   font-size: 2.2rem;
  135. }
  136.  
  137. .wrap:hover .container::before,
  138. .wrap:hover .container::after {
  139.   width: calc(100% - 4rem);
  140.   height: calc(100% - 4rem);
  141. }

JavaScript

  1. class parallaxTiltEffect {
  2.  
  3.   constructor({element, tiltEffect}) {
  4.  
  5.     this.element = element;
  6.     this.container = this.element.querySelector(".container");
  7.     this.size = [300, 360];
  8.     [this.w, this.h] = this.size;
  9.  
  10.     this.tiltEffect = tiltEffect;
  11.  
  12.     this.mouseOnComponent = false;
  13.  
  14.     this.handleMouseMove = this.handleMouseMove.bind(this);
  15.     this.handleMouseEnter = this.handleMouseEnter.bind(this);
  16.     this.handleMouseLeave = this.handleMouseLeave.bind(this);
  17.     this.defaultStates = this.defaultStates.bind(this);
  18.     this.setProperty = this.setProperty.bind(this);
  19.     this.init = this.init.bind(this);
  20.  
  21.     this.init();
  22.   }
  23.  
  24.   handleMouseMove(event) {
  25.     const {offsetX, offsetY} = event;
  26.  
  27.     let X;
  28.     let Y;
  29.  
  30.     if (this.tiltEffect === "reverse") {
  31.       X = ((offsetX - (this.w/2)) / 3) / 3;
  32.       Y = (-(offsetY - (this.h/2)) / 3) / 3;
  33.     }
  34.  
  35.     else if (this.tiltEffect === "normal") {
  36.       X = (-(offsetX - (this.w/2)) / 3) / 3;
  37.       Y = ((offsetY - (this.h/2)) / 3) / 3;
  38.     }
  39.  
  40.     this.setProperty('--rY', X.toFixed(2));
  41.     this.setProperty('--rX', Y.toFixed(2));
  42.  
  43.     this.setProperty('--bY', (80 - (X/4).toFixed(2)) + '%');
  44.     this.setProperty('--bX', (50 - (Y/4).toFixed(2)) + '%');
  45.   }
  46.  
  47.   handleMouseEnter() {
  48.     this.mouseOnComponent = true;
  49.     this.container.classList.add("container--active");
  50.   }
  51.  
  52.   handleMouseLeave() {
  53.     this.mouseOnComponent = false;
  54.     this.defaultStates();
  55.   }
  56.  
  57.   defaultStates() {
  58.     this.container.classList.remove("container--active");
  59.     this.setProperty('--rY', 0);
  60.     this.setProperty('--rX', 0);
  61.     this.setProperty('--bY', '80%');
  62.     this.setProperty('--bX', '50%');
  63.   }
  64.  
  65.   setProperty(p, v) {
  66.     return this.container.style.setProperty(p, v);
  67.   }
  68.  
  69.   init() {
  70.     this.element.addEventListener('mousemove', this.handleMouseMove);
  71.     this.element.addEventListener('mouseenter', this.handleMouseEnter);
  72.     this.element.addEventListener('mouseleave', this.handleMouseLeave);
  73.   }
  74.  
  75. }
  76.  
  77. const $ = e => document.querySelector(e);
  78.  
  79. const wrap1 = new parallaxTiltEffect({
  80.   element: $('.wrap--1'),
  81.   tiltEffect: 'reverse'
  82. });
  83.  
  84. const wrap2 = new parallaxTiltEffect({
  85.   element: $('.wrap--2'),
  86.   tiltEffect: 'normal'
  87. });
  88.  
  89. const wrap3 = new parallaxTiltEffect({
  90.   element: $('.wrap--3'),
  91.   tiltEffect: 'reverse'
  92. });

Codepen 网址:https://codepen.io/AbubakerSaeed/pen/rNNdvqz

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!