Float Panel

基礎引入方案（通用）

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)`;
	});
}           

複制

1. 修改

   [Blogroot]\_config.butterfly.yml

   , 添加引入項：

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

複制

1. 給你想要添加特效的元素添加

   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)`;
  });
}           

複制

1. 拓展内容：事實上，如果你已經完成過 wowjs 的插件化配置教程，直接将

   wowpanels

   視為一種動畫樣式，在完成了本帖教程的 1、2 兩個步驟以後，使用那邊的配置方案來添加

   wowpanels

   樣式即可。例如給友鍊卡片添加浮動動畫：

wowjs:
  enable: true #控制動畫開關。true是打開，false是關閉
  animateitem:
    - class: site-card
      style: wowpanels           

複制