今回は英単語がランダムに上から降ってくるサイトを作ろうとおもいます。
というのも、何年か前に日本語の単語か熟語が降ってくるサイトが眺めているだけで楽しいということで、バズっていたので今になって英語で作れるか試してみたかったのです。
今回は、windows10のvscodeを利用して作りました。
とても短くて簡単なコードとなっているので、ご自身で参考にしてカスタマイズしてみてください！
home.html
<!DOCTYPE html>
<html>
<head>
<title>drop english</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="word-container"></div>
<script src="script.js"></script>
</body>
</html>
背景画像はご自身で用意するか、bodyごと消して白背景にしてください
style.css
/* style.css */
/* CSSコード */
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');/* フォントのurl */
#word-container {
position: relative;
height: 100vh;
overflow: hidden;
}
body {
background-image: url('background.png'); /* 画像のパスを指定 */
background-size: cover; /* 画像がコンテナにフィットするようにサイズを調整 */
background-position: center; /* 画像をコンテナの中央に配置 */
background-repeat: no-repeat; /* 画像を繰り返さない */
background-attachment: fixed; /* 画像をスクロールに合わせて動かないように固定 */
}
.word {
position: absolute;
cursor: pointer;
font-family: 'Itim', cursive;
font-size: 24px;
color: blue;
}
@keyframes fall {
0% { top: -50px; }
100% { top: 100vh; }
}
javascriptでは、降ってくる単語をクリックするとGoogle検索でしらべてくれるようにしました。
google検索
wordDiv.addEventListener('click', function() {
window.open('https://www.google.com/search?q=' + word);
});
また、Random Word APIを使って、英単語を取得しました。
API
function fetchRandomWord() {
fetch('https://random-word-api.herokuapp.com/word')
.then(response => response.json())
.then(data => {
createWord(data[0]);
})
.catch(error => console.error('Error:', error));
}
上二つをまとめた最終的なjavascriptのコードは以下になります！
script.js
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('word-container');
function createWord(word) {
const wordDiv = document.createElement('div');
wordDiv.classList.add('word');
wordDiv.textContent = word;
wordDiv.style.left = Math.random() * 100 + '%';
wordDiv.style.animation = 'fall ' + (Math.random() * 5 + 5) + 's linear';
wordDiv.addEventListener('click', function() {
window.open('https://www.google.com/search?q=' + word);
});
container.appendChild(wordDiv);
setTimeout(() => container.removeChild(wordDiv), 5000);
}
function fetchRandomWord() {
fetch('https://random-word-api.herokuapp.com/word')
.then(response => response.json())
.then(data => {
createWord(data[0]);
})
.catch(error => console.error('Error:', error));
}
setInterval(fetchRandomWord, 1000);
});
