1、hanzi-writer生成的svg外有一层div，修改div宽高影响的是画布大小，字体在不同视口下完全不相同。我想要让字体跟画布同比例大小该怎么实现？
2、LocomotiveScroll怎么在vue3全网页（最大的父容器）中进行顺滑滚动？不知道加在哪里。
问题一代码
<template>
<div class="header">
<div v-for="item of 200" :key="item" class="snowflake"></div>
<div class="title">
<div class="title__parent">
<Transition
name="fade"
enter-active-class="animate__animated animate__slideInUp"
>
<p v-if="show" class="title__top">驶出孤岛</p>
</Transition>
</div>
<div class="title__row">
<div class="title__parent">
<Transition
name="fade"
enter-active-class="animate__animated animate__slideInUp animate__fast delay"
>
<p v-if="show" class="title__row__left">的</p>
</Transition>
</div>
<div class="title__row__right">
<div id="character-target-div1"></div>
<div id="character-target-div2"></div>
<div id="character-target-div3"></div>
</div>
</div>
</div>
</div>
</template>
import { onMounted, ref } from "vue";
import HanziWriter from "hanzi-writer";
export default {
name: "Header",
setup() {
const show = ref(false);
const chainAnimations = () => {
//创建笔法“淘”字实例
var writeOne = HanziWriter.create("character-target-div1", "淘", {
padding: 5, //内边距
showCharacter: false, //不显示汉字
showOutline: false, //开启动画时不显示汉字
strokeColor: "#000000", //字体颜色
strokeAnimationSpeed: 5, //动画速度
delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
});
//创建笔法“金”字实例
var writeTwo = HanziWriter.create("character-target-div2", "金", {
padding: 5, //内边距
showCharacter: false, //不显示汉字
showOutline: false, //开启动画时不显示汉字
strokeColor: "#000000", //字体颜色
strokeAnimationSpeed: 5, //动画速度
delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
drawingWidth: 10,
});
//创建笔法“者”字实例
var writeThree = HanziWriter.create("character-target-div3", "者", {
padding: 5, //内边距
showCharacter: false, //不显示汉字
showOutline: false, //开启动画时不显示汉字
strokeColor: "#000000", //字体颜色
strokeAnimationSpeed: 5, //动画速度
delayBetweenStrokes: 10, //动画每笔间隔时间，默认1000
});
setTimeout(function () {
writeOne.animateCharacter({
onComplete: function () {
setTimeout(function () {
writeTwo.animateCharacter({
onComplete: function () {
setTimeout(function () {
writeThree.animateCharacter();
}, 0);
},
});
}, 0);
},
});
}, 980);
};
//挂载执行
onMounted(() => {
show.value = true;
chainAnimations();
});
return { show };
},
};
* {
margin: 0;
box-sizing: border-box;
}
.header {
width: 100%;
height: 150vh;
display: flex;
justify-content: center;
background: linear-gradient(
to top,
#fffbf7 40%,
#fff1da 70%,
rgb(252, 221, 180) 99%
) !important;
.title {
width: 90%;
height: 3.56rem;
margin: 2.8rem 0 0 0;
letter-spacing: 0.5rem;
&__parent {
display: block;
overflow: hidden;
}
&__top {
display: block;
font-size: 1.496rem;
font-family: 宋体;
font-weight: bold;
margin-left: 1rem;
}
&__row {
display: flex;
justify-content: flex-end;
margin-right: 1.2rem;
&__left {
color: #000000;
font-size: 1.496rem;
font-family: 宋体;
margin-right: 0.2rem;
}
&__right {
display: flex;
color: #000;
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
}
}
}
}
#character-target-div1,
#character-target-div2,
#character-target-div3 {
width: 1.5rem;
height: 1.5rem;
}
.snowflake {
--size: 1vw;
width: var(--size);
height: var(--size);
background: url(../../images/falling.gif) no-repeat; //金色叶子
background-size: 100% 100%;
position: fixed;
top: -10vh; //出事高度在屏幕外 效果更真实
z-index: 1; //背景图层不遮挡上面元素
}
@keyframes fall {
100% {
transform: translate3d(var(--end), 100vh, 0);
}
}
@for $i from 0 through 200 {
.snowflake:nth-child(#{$i}) {
//每个雪花的大小
--size: #{random(6) * 0.1}vw;
//雪花移动目标点
--end: #{random(20) - 40}vw;
//雪花初始位置
left: #{random(150)}vw;
//雪花从顶到底移动的动画 动画时间可以调整雪花速度
animation: fall #{5 + random(8)}s linear infinite;
animation-delay: -#{random(10)}s;
}
}
.animate__slideInUp {
animation-duration: 0.9s;
}
.delay {
animation-duration: 0.98s;
animation-delay: 350ms;
}
问题一图
问题2代码
import LocomotiveScroll from 'locomotive-scroll';
const lscroll = new LocomotiveScroll({
el: document.querySelector('#js-scroll'),
smooth: true,
// reloadOnContextChange: true,
lerp: 0.06,
// smoothMobile: true
});
export { lscroll };
