枠から描画されるテキスト
概要
テキストの枠から描画されていき、色がじわっと塗られるアニメーションです。
洗練された印象を与えられるかなと思います。
SVGでテキストを作成し、SVG属性にパスの長さをpathLength=1を指定し正規化することで、仮想的にパスの長さを全て1にしています。
そうすることでCSSでアニメーションが動かしやすくなり、stroke-dashoffset: 1;をstroke-dashoffset: 0;にすることで、枠線の描画アニメーションを実現しています。
最後に塗りをアニメーションしていますが、塗らなくても洗練された良い雰囲気が出ると思います。
コードサンプル
HTML
<p class="text-wrap js-scroll-anim">
<svg
class="draw"
width="200"
height="35"
viewBox="0 0 200 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M184.288 5.66394V14.8869H195.926V19.6479H184.288V29.0549H199.054V33.9999H178.078V0.741943H199.054V5.66394H184.288Z"
pathLength="1"
/>
<path
d="M169.061 28.8939V33.9999H149.58V0.741943H155.767V28.8939H169.061Z"
pathLength="1"
/>
<path
d="M127.309 17.4629C128.444 17.4629 129.433 17.3249 130.276 17.0489C131.119 16.7576 131.817 16.3513 132.369 15.8299C132.936 15.2933 133.358 14.6493 133.634 13.8979C133.91 13.1313 134.048 12.2803 134.048 11.3449C134.048 10.4556 133.91 9.65061 133.634 8.92994C133.358 8.20928 132.944 7.59594 132.392 7.08994C131.84 6.58394 131.142 6.20061 130.299 5.93994C129.456 5.66394 128.459 5.52594 127.309 5.52594H122.686V17.4629H127.309ZM127.309 0.741943C129.532 0.741943 131.457 1.00261 133.082 1.52394C134.707 2.04528 136.049 2.77361 137.107 3.70895C138.165 4.64428 138.947 5.76361 139.453 7.06695C139.974 8.37028 140.235 9.79628 140.235 11.3449C140.235 12.9549 139.967 14.4346 139.43 15.7839C138.893 17.1179 138.088 18.2679 137.015 19.2339C135.942 20.1999 134.592 20.9513 132.967 21.4879C131.357 22.0246 129.471 22.2929 127.309 22.2929H122.686V33.9999H116.499V0.741943H127.309Z"
pathLength="1"
/>
<path
d="M104.479 0.741943V33.9999H99.0277V12.5179C99.0277 11.6593 99.0737 10.7316 99.1657 9.73494L89.1147 28.6179C88.6394 29.5226 87.9111 29.9749 86.9297 29.9749H86.0557C85.0744 29.9749 84.3461 29.5226 83.8707 28.6179L73.7047 9.66594C73.7507 10.1719 73.7891 10.6703 73.8197 11.1609C73.8504 11.6516 73.8657 12.1039 73.8657 12.5179V33.9999H68.4147V0.741943H73.0837C73.3597 0.741943 73.5974 0.74961 73.7967 0.764944C73.9961 0.780276 74.1724 0.81861 74.3257 0.879945C74.4944 0.941277 74.6401 1.04094 74.7627 1.17894C74.9007 1.31694 75.0311 1.50094 75.1537 1.73094L85.1127 20.1999C85.3734 20.6906 85.6111 21.1966 85.8257 21.7179C86.0557 22.2393 86.2781 22.7759 86.4927 23.3279C86.7074 22.7606 86.9297 22.2163 87.1597 21.6949C87.3897 21.1583 87.6351 20.6446 87.8957 20.1539L97.7167 1.73094C97.8394 1.50094 97.9697 1.31694 98.1077 1.17894C98.2457 1.04094 98.3914 0.941277 98.5447 0.879945C98.7134 0.81861 98.8974 0.780276 99.0967 0.764944C99.2961 0.74961 99.5337 0.741943 99.8097 0.741943H104.479Z"
pathLength="1"
/>
<path
d="M49.4473 21.4419L45.3993 10.3789C45.1999 9.88828 44.9929 9.30561 44.7783 8.63094C44.5636 7.95628 44.3489 7.22794 44.1343 6.44594C43.9349 7.22794 43.7279 7.96394 43.5133 8.65394C43.2986 9.32861 43.0916 9.91894 42.8923 10.4249L38.8673 21.4419H49.4473ZM60.3723 33.9999H55.5883C55.0516 33.9999 54.6146 33.8696 54.2773 33.6089C53.9399 33.3329 53.6869 32.9956 53.5182 32.5969L51.0343 25.8119H37.2573L34.7733 32.5969C34.6506 32.9496 34.4129 33.2716 34.0602 33.5629C33.7076 33.8543 33.2706 33.9999 32.7493 33.9999H27.9193L41.0063 0.741943H47.3083L60.3723 33.9999Z"
pathLength="1"
/>
<path
d="M20.413 6.79102C20.229 7.11302 20.0297 7.35069 19.815 7.50402C19.6157 7.64202 19.3627 7.71102 19.056 7.71102C18.734 7.71102 18.3813 7.59602 17.998 7.36602C17.63 7.12069 17.1853 6.85236 16.664 6.56102C16.1427 6.26969 15.5293 6.00902 14.824 5.77902C14.134 5.53369 13.3137 5.41102 12.363 5.41102C11.5043 5.41102 10.753 5.51836 10.109 5.73302C9.46501 5.93236 8.92068 6.21602 8.47602 6.58402C8.04668 6.95202 7.72468 7.39669 7.51001 7.91802C7.29535 8.42402 7.18801 8.98369 7.18801 9.59702C7.18801 10.379 7.40268 11.0307 7.83201 11.552C8.27668 12.0734 8.85935 12.518 9.58001 12.886C10.3007 13.254 11.121 13.5837 12.041 13.875C12.961 14.1664 13.904 14.4807 14.87 14.818C15.836 15.14 16.779 15.5234 17.699 15.968C18.619 16.3974 19.4393 16.9494 20.16 17.624C20.8807 18.2834 21.4557 19.096 21.885 20.062C22.3297 21.028 22.552 22.201 22.552 23.581C22.552 25.0837 22.2913 26.4944 21.77 27.813C21.264 29.1164 20.5127 30.2587 19.516 31.24C18.5347 32.206 17.331 32.9727 15.905 33.54C14.479 34.092 12.846 34.368 11.006 34.368C9.94801 34.368 8.90535 34.2607 7.87801 34.046C6.85068 33.8467 5.86168 33.5554 4.91101 33.172C3.97568 32.7887 3.09401 32.3287 2.26601 31.792C1.43801 31.2554 0.702014 30.6574 0.0580139 29.998L1.87501 27.031C2.02835 26.8164 2.22768 26.64 2.47301 26.502C2.71835 26.3487 2.97901 26.272 3.25501 26.272C3.63835 26.272 4.05235 26.433 4.49701 26.755C4.94168 27.0617 5.47068 27.4067 6.08401 27.79C6.69735 28.1734 7.41035 28.526 8.22301 28.848C9.05101 29.1547 10.04 29.308 11.19 29.308C12.9533 29.308 14.318 28.894 15.284 28.066C16.25 27.2227 16.733 26.019 16.733 24.455C16.733 23.581 16.5107 22.868 16.066 22.316C15.6367 21.764 15.0617 21.304 14.341 20.936C13.6203 20.5527 12.8 20.2307 11.88 19.97C10.96 19.7094 10.0247 19.4257 9.07401 19.119C8.12335 18.8124 7.18801 18.4444 6.26801 18.015C5.34801 17.5857 4.52768 17.026 3.80701 16.336C3.08635 15.646 2.50368 14.7874 2.05901 13.76C1.62968 12.7174 1.41501 11.437 1.41501 9.91902C1.41501 8.70769 1.65268 7.52702 2.12801 6.37702C2.61868 5.22702 3.32401 4.20736 4.24401 3.31802C5.16401 2.42869 6.29868 1.71569 7.64801 1.17902C8.99735 0.642357 10.546 0.374023 12.294 0.374023C14.2567 0.374023 16.066 0.68069 17.722 1.29402C19.378 1.90736 20.7887 2.76602 21.954 3.87002L20.413 6.79102Z"
pathLength="1"
/>
</svg>
</p>CSS
.draw path {
fill: #333333;
fill-opacity: 0;
stroke: #333333;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
:is(.is-active) .draw path {
animation: draw 2.2s ease forwards;
}
@keyframes draw{
0% {
stroke-dashoffset: 1;
fill-opacity: 0;
}
70% {
stroke-dashoffset: 0;
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}JavaScript
document.addEventListener("DOMContentLoaded", function () {
const scrollTriggers = document.querySelectorAll(".js-scroll-anim");
const revealObserver = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("is-active");
revealObserver.unobserve(entry.target);
}
});
},
{
threshold: 0.1,
}
);
scrollTriggers.forEach(el => {
revealObserver.observe(el);
});
});