画面をスクロールしていき、例えば画面の下から50pxの所に来たらアニメーションが開始する。

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ JavaScriptに関する質問

Q&A

解決済

1回答

1569閲覧

画面をスクロールしていき、例えば画面の下から50pxの所に来たらアニメーションが開始する。

総合スコア33

0グッド

0クリップ

投稿2019/02/16 05:40

0

0

以下のサイトanimistaで作成したアニメーションを使って、
※http://animista.net/

画面をスクロールしていき、例えば画面の下から50pxの所に来たら、
アニメーションが開始する。

そのようなjsを教えていただけると幸いです。

出来ればjQueryのプラグインを使用しないで作成したいです。
もし厳しいようでしたら、商用でも無料使えるjQueryを教えていただけますでしょうか。

色々調べたのですが、ピンときたものがなかったので、

css
1.fade-in-bottom {
2  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
3          animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
4}
5@-webkit-keyframes fade-in-bottom {
6  0% {
7    -webkit-transform: translateY(50px);
8            transform: translateY(50px);
9    opacity: 0;
10  }
11  100% {
12    -webkit-transform: translateY(0);
13            transform: translateY(0);
14    opacity: 1;
15  }
16}
17@keyframes fade-in-bottom {
18  0% {
19    -webkit-transform: translateY(50px);
20            transform: translateY(50px);
21    opacity: 0;
22  }
23  100% {
24    -webkit-transform: translateY(0);
25            transform: translateY(0);
26    opacity: 1;
27  }
28}

html
1<div>
2  <p></p>
3</div> 
4<div>
5  <p class="fade-in-bottom"></p>
6</div>
7<div>
8  <p class="fade-in-bottom"></p>
9</div>

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

回答1件

0

ベストアンサー

ググれば、やり方が色々出てきます。何のキーワードで調べたけどダメでした。とか、書かないと丸投げって思われて、回答が付きづらくなります。

HTML
1<!DOCTYPE html> 
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7  <title>scroll-bottom-offset</title>
8</head>
9<script>
10    // 下から何ピクセルで開始するかの値をここで決める。
11    var bottomMargin = 50;
12
13    window.document.addEventListener('scroll', function(e) { scrollBottomMain(e, bottomMargin); });
14
15    function scrollBottomMain(e, bottomMargin) {
16        var body = window.document.body;
17        var html = window.document.documentElement;
18
19        var scrollTop    = body.scrollTop || html.scrollTop;
20        var scrollBottom = html.scrollHeight - html.clientHeight - scrollTop;
21
22        if ( scrollBottom <= bottomMargin ) {
23            // 下までスクロールしたときの処理
24            const targetDiv = document.getElementById('targetMargin');
25            targetDiv.classList.add('fade-in-bottom');
26        } else {
27            const targetDiv = document.getElementById('targetMargin');
28            targetDiv.classList.remove('fade-in-bottom');
29        }
30    }
31</script>
32
33<style>
34.fade-in-bottom {
35  -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
36          animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
37}
38@-webkit-keyframes fade-in-bottom {
39  0% {
40    -webkit-transform: translateY(50px);
41            transform: translateY(50px);
42    opacity: 0;
43  }
44  100% {
45    -webkit-transform: translateY(0);
46            transform: translateY(0);
47    opacity: 1;
48  }
49}
50@keyframes fade-in-bottom {
51  0% {
52    -webkit-transform: translateY(50px);
53            transform: translateY(50px);
54    opacity: 0;
55  }
56  100% {
57    -webkit-transform: translateY(0);
58            transform: translateY(0);
59    opacity: 1;
60  }
61}
62</style>
63<body>
64    <div style="height: 1800px; background-color: brown;">
65    </div>
66    <div id="targetMargin" style="height: 50px; background-color: chartreuse;">
67    </div>
68</body>
69</html>

面倒だったので、HTMLとCSSとJavaScriptを一緒に書いてますが、別ファイルにしてもかまいません。
素早くスクロールさせると緑のDIVが下からせりあがってきます。

コード内の右上のボタンでコードを丸ごとコピーできるので、自分のファイルに張り付けて、お使いのブラウザーで確認してみてください。

投稿2021/01/31 04:58

総合スコア501

2021/01/31 05:00

うまくいったら、回答の横の数字をポイントすると回答の評価を増減できます。また、実現につながった回答はベストアンサーに選ぶことができます。この２つは別々にも一緒にも設定できます。

2021/01/31 06:37

よく見たら2019/02/16の投稿だったのか… じゃぁもう見てないかもしれないな、骨折り損のくたびれ儲け

2021/01/31 06:51

ご回答ありがとうございます。

2021/01/31 18:52

わあ、こんな亀レスに返信いただきありがとうございます。右側の、「あなたの回答を待っています」にサジェストされたから投稿日を気にせず回答してしまってました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ JavaScriptに関する質問

画面をスクロールしていき、例えば画面の下から50pxの所に来たらアニメーションが開始する。

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る