WordPressで使えるJavaScript（使用テーマはCocoon）をGPTに提案してもろた

Follow me

なってへん・・・！

提案されたJavaScriptが、

const text = “こんにちは”;
let i = 0;

function typing() {

if(i < text.length){

document.getElementById(“type”).innerHTML += text.charAt(i);

i++;

setTimeout(typing,180);

}

}

typing();

うーん。

続きまして、ブルブル震える文字。

これに関してはJavaScript不要とのことでした、CSSでこうすることができるらしい。 提案されたCSSが、

.shake{
display:inline-block;
font-size:50px;
transition:0.2s;
}

.shake:hover{
animation:shake 0.2s infinite;
}

@keyframes shake{

0%{
transform:translate(1px,1px);
}

25%{
transform:translate(-2px,2px);
}

50%{
transform:translate(2px,-1px);
}

75%{
transform:translate(-1px,-2px);
}

100%{
transform:translate(1px,2px);
}

}

なぜか頼んでいないのに巨大文字のCSSにされました。。

クリックで大量落下

2000年初期のインターネット感でてきましたが、、

押して

グリッジ文字

なんやねんこれ。。 これもJavaScriptではなく、CSSです。

.glitch{
position:relative;
font-size:60px;
font-weight:bold;
color:#fff;
background:#000;
display:inline-block;
padding:20px;
}

.glitch::before,
.glitch::after{
content:attr(data-text);
position:absolute;
left:0;
top:0;
width:100%;
overflow:hidden;
}

.glitch::before{
color:red;
animation:glitch1 0.3s infinite;
}

.glitch::after{
color:cyan;
animation:glitch2 0.3s infinite;
}

@keyframes glitch1{

0%{
transform:translate(2px,0);
}

50%{
transform:translate(-2px,2px);
}

100%{
transform:translate(2px,-1px);
}

}

@keyframes glitch2{

0%{
transform:translate(-2px,0);
}

50%{
transform:translate(2px,-2px);
}

100%{
transform:translate(-2px,1px);
}

}

使うHTMLは、<div class=”glitch” data-text=”こんにちは”>こんにちは</div>