![見出し画像](https://assets.st-note.com/production/uploads/images/117292166/rectangle_large_type_2_f8f10b4c7d737c1ddd8011ebce2b2f94.png?width=1200)
テキストをhoverしたら一文字ずつ入れ替わりに出現!
こんにちは!
台湾でフリーランスをしているゆーたです。
今回はこんな感じのアニメーションが面白かったのでまとめてみました!
HTML
<body>
<h1 class="t-title"><a href="#">textwave</a></h1>
</body>
SCSS
@charset "utf-8";
body{
position: relative;
width: 100%;
height: 100vh;
background-color: #333;
}
.t-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 64px;
letter-spacing: 0.075em;
overflow: hidden;
line-height: 1;
a{
color: #fff;
span{
position: relative;
transition: 0.5s;
}
.out{
transform: translateY(0%);
display: inline-block;
}
.in{
position: absolute;
left: 0;
color: blue;
transform: translateY(100%);
}
&:hover .out{
transform: translateY(-100%);
}
&:hover .in{
transform: translateY(0);
}
}
}
JS
let text = document.querySelectorAll(".t-title a");
text.forEach(link => {
let letters = link.textContent.split("");
link.textContent= "";
letters.forEach((letter,i) =>{
i += 1;
let span =document.createElement("span");
let delay =i/30;
let letterOut = document.createElement("span");
letterOut.textContent = letter;
letterOut.style.transitionDelay = `${delay}s`;
letterOut.classList.add("out");
span.append(letterOut);
let letterIn = document.createElement("span");
letterIn.textContent = letter;
letterIn.style.transitionDelay = `${delay}s`;
letterIn.classList.add("in");
span.append(letterIn);
link.append(span);
})
})
JSについての説明
let text = document.querySelectorAll(".t-title a");
class名の.t-title aの情報を取得し変数textに格納する。
text.forEach(link => {
それぞれのリンクに対して動作を指定する。
以下各リンクに対して以下の動作を行います。
let letters = link.textContent.split("");
link.textContent= "";
リンクの文字を1文字ずつに分割し、
元のリンクの文字を消去します。
letters.forEach((letter,i) =>{
それぞれの文字に対して動作を指定。
let span =document.createElement("span");
i += 1;
let delay =i/30;
spanを作成し、文字の位置(i)に基づいて、
アニメーションの遅延時間を計算します。
1/30,2/30みたいな感じですね。
let letterOut = document.createElement("span");
letterOut.textContent = letter;
letterOut.style.transitionDelay = `${delay}s`; letterOut.classList.add("out"); span.append(letterOut);
新しいspan要素を作成し、現在の文字をその中に設定します。
アニメーションの遅延をスタイルとして追加し、outクラスを追加します。
そして、この新しいspanを最初に作成したspan要素の中に追加します。
let letterIn = document.createElement("span");
letterIn.textContent = letter;
letterIn.style.transitionDelay = `${delay}s`;
letterIn.classList.add("in"); span.append(letterIn);
上記と同じような感じです。
link.append(span);
最初に作成したspan要素を、リンク要素の中に追加します。
TwitterやInstagramやってます!
仕事はフリーで主にweb制作をしております。
台湾好きや興味がある人とお友達になりたいです。
またweb制作の仕事も随時募集中なので、
ポートフォリオを見ていただけると嬉しいです!
DMお待ちしております!
Twitter:@trizolyuta
Instagram:@yuta208817
portoforio:https://nakamayuuta.sakura.ne.jp/
いいなと思ったら応援しよう!
![ゆーた 台湾移住🇯🇵🇹🇼](https://assets.st-note.com/production/uploads/images/16515495/profile_c98d225f60ac9a10bc80887e2bcecea0.png?width=600&crop=1:1,smart)