クリックで配置画像が垂直・水平方向に指定値で移動し、再度クリックで戻るお作って見ました。
ルート階層の中に・・・
picフォルダー（image.png）
linksフォルダー（rule.css, script.js）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像の垂直移動</title>
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<div class="container">
<img id="moveImage" src="pic/image.png" alt="Baby Alien">
</div>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* rule.css */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: yellowgreen;
}
.container {
text-align: center;
position: relative;
}
#moveImage {
width: 300px; /* 画像のサイズを調整 */
transition: transform 1s ease;
/* 移動時間の設定 */
cursor: pointer;
}
/* rule.css */
/* script.js */
document.getElementById('moveImage')
.addEventListener('click', function() {
this.style.transform = this.style.transform ===
'translateY(300px)' ? 'translateY(0)' : 'translateY(300px)';
/* translateYをtranslateXとすれば水平移動
px値が移動距離です */
});
/* script.js */
表示直後の状態。ここで画像をクリックすると・・・
'translateY(300px)' ? 'translateY(0)' : 'translateY(300px)';
なら垂直に下がり、再度クリックで元に戻ります。
'translateX(300px)' ? 'translateX(0)' : 'translateX(300px)';
なら水平に右へ、再度クリックで元に戻ります。
