WordPressのカスタムHTMLでJavaScriptを使用して画像を9枚並べて、クリックして、2秒かけて450度回転してから新しい9枚の画像がランダムに差し替わり、1080度回転して止まる書き方。クリックできるのは1回だけです。リロードボタンも
<style>
.image {
cursor: pointer;
width: 200px;
height: 200px;
transition: transform 2s;
}
</style>
<div>
<img class="image" src="初期の画像1.jpg" alt="初期の画像1">
<img class="image" src="初期の画像2.jpg" alt="初期の画像2">
<img class="image" src="初期の画像3.jpg" alt="初期の画像3">
<img class="image" src="初期の画像4.jpg" alt="初期の画像4">
<img class="image" src="初期の画像5.jpg" alt="初期の画像5">
<img class="image" src="初期の画像6.jpg" alt="初期の画像6">
<img class="image" src="初期の画像7.jpg" alt="初期の画像7">
<img class="image" src="初期の画像8.jpg" alt="初期の画像8">
<img class="image" src="初期の画像9.jpg" alt="初期の画像9">
</div>
<script>
var images = document.getElementsByClassName("image");
var clicked = false;
function handleClick(event) {
if (!clicked) {
clicked = true;
var self = event.target;
self.style.transform = "rotate(450deg)";
setTimeout(function() {
var newImages = [
"新しい画像1.jpg",
"新しい画像2.jpg",
"新しい画像3.jpg",
"新しい画像4.jpg",
"新しい画像5.jpg",
"新しい画像6.jpg",
"新しい画像7.jpg",
"新しい画像8.jpg",
"新しい画像9.jpg"
];
for (var i = 0; i < images.length; i++) {
var randomIndex = Math.floor(Math.random() * newImages.length);
images[i].src = newImages[randomIndex];
newImages.splice(randomIndex, 1);
}
self.style.transform = "rotate(1080deg)";
}, 2000);
}
}
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", handleClick);
}
</script>
- WordPressの管理画面にログインします。
- 「投稿」または「ページ」を選択し、新規作成または編集します。カスタムHTMLを追加する投稿またはページを選択してください。
- クラシックエディタを使用している場合:
- テキストエディタに切り替えるために、「テキスト」タブをクリックします。
- カスタムHTMLを追加したい位置にカーソルを置きます。
- ブロックエディタ内の適切なブロック(例:「カスタムHTML」ブロック)を選択します。
- ブロック内にカーソルを置きます。
- カスタムHTML内に、以下のコードを追加します。
- 変更を保存します。投稿またはページを公開または更新することで、カスタムHTMLが反映されます。
上記のコードでは、9枚の画像要素を作成し、クリック後にアニメーションと画像の差し替えを行います。
JavaScriptコードでは、クリックイベントの処理を定義し、クリックされた画像に対してアニメーションと画像の差し替えを実行しています。変数clicked
はクリックの制限を管理するために使用され、初期値はfalse
です。クリックイベントが発生した場合、clicked
の値がfalse
の場合にのみアニメーションと画像の差し替えが行われます。
アニメーションにはCSSのtransition
プロパティとtransform
プロパティを使用しており、2秒かけて回転します。また、ランダムな画像の選択には、新しい画像のパスを含むnewImages
配列を使用しています。各画像要素は、ランダムに選択した画像を設定し、rotate(1080deg)
で最終的な回転位置を指定します。
このカスタムHTMLを使用すると、9枚の画像が表示され、クリックするとアニメーションが実行され、2秒後にランダムな新しい画像に差し替えられます。また、クリックは1回のみ有効で、2回目以降のクリックではアニメーションや画像の差し替えは行われません。
ディスカッション
コメント一覧
まだ、コメントがありません