🔵Hexo fluid主题首页添加文章滑入动画

本文最后更新于:2022年4月30日 上午

添加js

source目录下新建js目录,新建scrollAnimation.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
const cards = document.querySelectorAll('.index-card')
if (cards.length) {
document.querySelector('.row').setAttribute('style', 'overflow: hidden;')
const coefficient = document.documentElement.clientWidth > 768 ? .5 : .3
const origin = document.documentElement.clientHeight - cards[0].getBoundingClientRect().height * coefficient

function throttle(fn, wait) {
let timer = null;
return function () {
const context = this;
const args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, wait)
}
}
}

function handle() {
cards.forEach(card => {
card.setAttribute('style', `--state: ${(card.getBoundingClientRect().top - origin) < 0 ? 1 : 0};`)
})
console.log(1)
}


document.addEventListener("scroll", throttle(handle, 100));
}

添加css

source目录下新建css文件夹,新建scrollAnimation.css

1
2
3
4
5
6
7
8
9
10
.index-card {
transition: all 0.5s;
transform: scale(calc(1.5 - 0.5 * var(--state)));
opacity: var(--state);
margin-bottom: 2rem;
}

.index-img img {
margin: 20px 0;
}

载入cssjs

_config.fluid.yml

1
2
3
4
5
6
7
8
9
# 指定自定义 .js 文件路径,支持列表;路径是相对 source 目录,如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:
- /js/scrollAnimation.js

# 指定自定义 .css 文件路径,用法和 custom_js 相同
# The usage is the same as custom_js
custom_css:
- /css/scrollAnimation.css

🔵Hexo fluid主题首页添加文章滑入动画
https://qingshaner.com/Hexo fluid主题首页添加文章滑入动画/
作者
清山
发布于
2022年4月29日
许可协议