点击查看更新记录

更新记录

2021-01-10:正式版v1.0

  1. 参考原项目进行修改。简化样式添加流程。
  2. 配合配置项批量添加特效类。
点击查看参考教程
参考方向教程原贴
参考动画添加原理codepen-floatavatar
源项目，在此基础上改动了批量添加方式，移除需要父元素的设定codepen-wowpanels

写在最前

洪哥推荐的一个小玩具项目，捣鼓了一下，发现和wowjs的配置方式差不多，就直接沿用那篇教程的写法来添加特效了。本文内容很简短。如果想要更高级的玩法，例如使用配置项来添加，可以仿照站内教程使用wowjs给博客添加动画效果。

move
your
cursor
over

基础引入方案（通用）

  1. 新建[Blogroot]\themes\butterfly\source\js\floatpanel.js,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var ANGLE = 45; //控制浮动角度，数值越大，浮动幅度越大。

    var panel= document.getElementsByClassName('wowpanels');
    for(var i = 0;i<panel.length;i++){
    	floatable(panel[i]);
      }
    function floatable (content) {
    	content.addEventListener('mouseout', e => {
    		content.style.transform = `perspective(300px)
    								   rotateX(0deg)
    								   rotateY(0deg)
    								   rotateZ(0deg)`;
    	});
    	content.addEventListener('mousemove', e => {
    		var w = content.clientWidth;
    		var h = content.clientHeight;
    		var y = (e.offsetX - w * 0.5) / w * ANGLE;
    		var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

    		content.style.transform = `perspective(300px)
    								   rotateX(${x}deg)
    								   rotateY(${y}deg)`;
    	});
    }

  2. 修改[Blogroot]\_config.butterfly.yml,添加引入项：

    1
    2
    3
    4
      inject:
        head:
        bottom:
    +     - <script async data-pjax src="/js/custom/floatpanel.js"></script>

  3. 给你想要添加特效的元素添加wowpanels类。在步骤1的floatpanel.js上方添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 新增的内容
    var arr = document.getElementsByClassName('element-class');
    //把element-class替换成你想要添加特效的元素的类名
    for(var i = 0;i<arr.length;i++){
        arr[i].classList.add('wowpanels');
      }
    // 原来的内容
    var ANGLE = 45; //控制浮动角度，数值越大，浮动幅度越大。
    var panel= document.getElementsByClassName('wowpanels');
    for(var i = 0;i<panel.length;i++){
      floatable(panel[i]);
      }
    function floatable (content) {
      content.addEventListener('mouseout', e => {
        content.style.transform = `perspective(300px)
                       rotateX(0deg)
                       rotateY(0deg)
                       rotateZ(0deg)`;
      });
      content.addEventListener('mousemove', e => {
        var w = content.clientWidth;
        var h = content.clientHeight;
        var y = (e.offsetX - w * 0.5) / w * ANGLE;
        var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

        content.style.transform = `perspective(300px)
                       rotateX(${x}deg)
                       rotateY(${y}deg)`;
      });
    }

  4. 拓展内容：事实上，如果你已经完成过wowjs的插件化配置教程，直接将wowpanels视为一种动画样式，在完成了本帖教程的1、2两个步骤以后，使用那边的配置方案来添加wowpanels样式即可。例如给友链卡片添加浮动动画：

    1
    2
    3
    4
    5
    wowjs:
      enable: true #控制动画开关。true是打开，false是关闭
      animateitem:
        - class: site-card
          style: wowpanels