动态星空Sky粒子特效背景
[Blogroot]\_config.butterfly.yml
找到index_img
设置为空:# The banner image of home page
index_img:[Blogroot]\_config.butterfly.yml
找到background
设置渐变色:# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
background: 'linear-gradient(to right top, #009fff, #ec2f4b)'[Blogroot]\themes\butterfly\source\css\_global\index.styl
找到#web_bg
设置渐变动画:#web_bg {
position: fixed;
z-index: -999;
width: 100%;
height: 100%;
background: $web-bg;
background-attachment: local;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: bganimation 10s infinite;
background-size: 800%;
}新建
[Blogroot]\themes\butterfly\source\css\[_username]\index.styl
,添加渐变动画CSS
和 粒子元素的样式:/* 樱花特效样式 */
.canvas-container {
position: fixed;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
left: 0;
top: 0;
z-index: -1;
}
// 阅读模式下隐藏背景
.read-mode .canvas-container {
display: none;
}
// 首页背景渐变动画
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}记得在
[Blogroot]\themes\butterfly\source\css\index.styl
引入,以后所有的css
都可以写在这个里面if (hexo-config('css_prefix')) {
@import 'nib';
}
@import '_third-party/normalize.min.css';
// project
@import 'var';
@import '_global/*';
@import '_highlight/highlight';
@import '_page/*';
@import '_layout/*';
@import '_tags/*';
@import '_mode/*';
+ @import '_TsingYi/*';
// search
if (hexo-config('algolia_search.enable')) {
@import '_search/index';
@import '_search/algolia';
}
if (hexo-config('local_search') && hexo-config('local_search.enable')) {
@import '_search/index';
@import '_search/local-search';
}[Blogroot]\themes\butterfly\layout\includes\layout.pug
添加元素:if page.type !== '404'
+ #canvas.canvas-container
#body-wrap(class=pageType)
include ./header/index.pug
main#content-inner.layout(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
include widget/index.pug新建
[Blogroot]\themes\butterfly\source\js\sky.js
var scene,
camera,
renderer,
container,
aspect,
fov,
plane,
far,
mouseX,
mouseY,
windowHalfX,
windowHalfY,
geometry,
starStuff,
materialOptions,
stars;
init();
animate();
function init() {
container = document.getElementById(`canvas`);
mouseX = 0;
mouseY = 0;
aspect = window.innerWidth / window.innerHeight;
fov = 40;
plane = 1;
far = 800;
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera = new THREE.PerspectiveCamera(
fov,
aspect,
plane,
far
);
camera.position.z = far / 2;
scene = new THREE.Scene({ antialias: true });
scene.fog = new THREE.FogExp2(0x1b1b1b, 0.0001);
starForge();
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onMouseMove, false);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * 0.005;
camera.position.y += (-mouseY - camera.position.y) * 0.005;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function starForge() {
var amount = 45000;
geometry = new THREE.SphereGeometry(1000, 100, 50);
materialOptions = {
color: new THREE.Color(0xffffff),
size: 1.1,
transparency: true,
opacity: 0.8
};
starStuff = new THREE.PointsMaterial(materialOptions);
for (var i = 0; i < amount; i++) {
var item = new THREE.Vector3();
item.x = Math.random() * 2000 - 1000;
item.y = Math.random() * 2000 - 1000;
item.z = Math.random() * 2000 - 1000;
geometry.vertices.push(item);
}
stars = new THREE.PointCloud(geometry, starStuff);
scene.add(stars);
}
function onMouseMove(e) {
mouseX = e.clientX - windowHalfX;
mouseY = e.clientY - windowHalfY;
}[Blogroot]\_config.butterfly.yml
找到inject
,引入js
,由于星空动画是基于three.js
,所以一定要先引入three.js
:inject:
head: <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.146.0/three.min.js"></script>
bottom: <script async data-pjax src="/js/sky.js"></script>最后执行
hexo cl,hexo g,hexo s
三连即可看到效果。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 青衣墨客!
评论