点击查看更新记录

更新记录

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,

    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,添加引入项:

      inject:
    head:
    bottom:
    + - <script async data-pjax src="/js/custom/floatpanel.js"></script>
  3. 给你想要添加特效的元素添加wowpanels类。在步骤1的floatpanel.js上方添加:

    // 新增的内容
    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样式即可。例如给友链卡片添加浮动动画:

    wowjs:
    enable: true #控制动画开关。true是打开,false是关闭
    animateitem:
    - class: site-card
    style: wowpanels