cssかジェイクエリーを使い画像をうごかしたい

https://kokodake-otokujo-hou.com/313198_09/
このランディングページのように
画像を可視範囲で出したいです。

また、画像のアニメーションを
無限ループさせる方法と、スクロールした際一度だけ動かす設定も知りたいです。

簡単なこともできないわたしですが、どうか宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLにこのようなコードを入れるとします。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
3<figure><img src="画像のURL" alt="" class="class1"></figure>

<Script>は<head>内に書くといいでしょう ```css .class1 { opacity : 0; transform: translateY(20px); transition: all 1s; } ``` cssではopacityを0に設定することによって要素を透明にして、transformをtranslateY(20px)にして20px下にズラしています。 jQueryは以下の通りです。 ```jQuery $(function(){ $(window).scroll(function (){ $('.class1').each(function(){ var targetElement = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > targetElement - windowHeight + 200){ $(this).css('opacity','1'); $(this).css('transform','translateY(0)'); } }); }); }); ``` 説明 ``` $(window).height();は、ウィンドウの高さ $(this).offset().topは、ターゲット要素の高さ $(window).scrollTop();は、スクロール位置（ページの一番上からディスプレイ上端） ``` ``` if (scroll > targetElement – windowHeight + 200){} ``` で、要素をふわっと表示させたい位置を計算して条件で分岐。trueであれば、 ``` $(this).css(‘opacity’,’1′); ```と ``` (this).css(‘transform’,’translateY(0)’); ``` を実行させています。もし難しければScrollReveal.jsを利用するのもありかと思います。まずheadタグ内に以下のCDNを記述します ```ここに言語を入力 <script src="https://unpkg.com/scrollreveal"></script>

これにより、ScrollReveal関数が使えます
```js
ScrollReveal().reveal('.box');

例えばこんな感じです

html
1<div class="container">
2  <div class="row">
3    <div class="box"></div>
4    <div class="box"></div>
5    <div class="box"></div>
6  </div>
7  <div class="row">
8    <div class="box"></div>
9    <div class="box"></div>
10    <div class="box"></div>
11  </div>
12  <div class="row">
13    <div class="box"></div>
14    <div class="box"></div>
15    <div class="box"></div>
16  </div>
17  <div class="row">
18    <div class="box"></div>
19    <div class="box"></div>
20    <div class="box"></div>
21  </div>
22   <div class="row">
23    <div class="box"></div>
24    <div class="box"></div>
25    <div class="box"></div>
26  </div>
27   <div class="row">
28    <div class="box"></div>
29    <div class="box"></div>
30    <div class="box"></div>
31  </div>
32   <div class="row">
33    <div class="box"></div>
34    <div class="box"></div>
35    <div class="box"></div>
36  </div>
37  <div class="row">
38    <div class="box"></div>
39    <div class="box"></div>
40    <div class="box"></div>
41  </div>
42  <div class="row">
43    <div class="box"></div>
44    <div class="box"></div>
45    <div class="box"></div>
46  </div>
47<div class="row">
48    <div class="box"></div>
49    <div class="box"></div>
50    <div class="box"></div>
51  </div>
52</div>

css
1
2body {
3  background-color: #757575;
4}
5
6.container {
7  max-width: 400px;
8  margin: auto;
9}
10
11.row {
12  display: flex; 
13}
14
15.box {
16  margin: 10px;
17  width: 100px;
18  height: 90vh;
19  background-color: #79BD9A;
20}

これで横三列、縦10列の箱たちができました
ここにjsで

js
1
2ScrollReveal().reveal('.box');

と記述するだけで下からうっすらと現れるようになります

他にもオプションがあり、


delay：ミリ秒単位の時間	アニメーションが実行されるまでの時間
distance：px/em/%：表示された時に要素が移動する距離
duration：ミリ秒単位の時間：アニメーションの完了にかかる時間
duration：CSS timing function（ease,ease-inなど）：アニメーションがどのように遷移するか
delay：ミリ秒単位の時間：アニメーションが実行されるまでの時間
interval：ミリ秒単位の時間：各公開間の時間
opacity	0~1：表示される前の不透明度
origin：top/right/bottom/left：素がどの方向から来るか
scale：数字：表示される前の要素のサイズ
desktop：true/false：デスクトップブラウザでアニメーションを有効/無効にする
mobile：true/false：モバイルブラウザでアニメーションを有効/無効にする
reset：true/false：viewportを離れる時に初期化された位置に戻る要素を有効/無効にする

などもあります。

投稿2020/12/12 12:50