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

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

ただいまの
回答率

89.72%

jquery  スクロール量に応じて要素を拡大、縮小させる

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,172

hiroshi3324

score 12

現在Webの勉強でスクロール量に応じて要素を拡大、縮小をしたいと考えて、調べるとこのサイトがヒットしたのでこれを参考に見ながらですが実装をしていき、スクロール量を取得する方法はわかりましたが、このサイトではboxの要素を3つ使用して実装していたので、試しに要素を一つにして実装してみるとうまく行きませんでした。
やりたいことは、要素一つだけをスクロール量に応じて拡大、縮小するということです。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>サンプルサイト</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">

                <!-- Link -->
                <link rel="stylesheet" href="../css/jquery-ui.min.css">
                <link rel="stylesheet" href="../css/simple.css">

                <!-- Favicon -->
                <link rel="shortcut icon" href="http://example.com/imgs/favicon.ico">

                <!-- script -->   
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                <script src="../js/contents.js"></script>
                <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5b0ba9a48558452fbd3351a4ac1e02ec" charset="utf-8"></script>
        </head>
<body>





<div class="container ">
  <div class="box1"></div>
</div>
<div class="container ">
  <div class="box2"></div>
</div>
<div class="container ">
  <div class="box3"></div>
</div>



</body>
</html>
  .container {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    font-size: 28px;
    color: #444;
    background: #fff;
    margin-bottom: 20px;
    box-sizing: border-box;
  }
  .container .box1 {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    text-align: left;
    padding: 10px;
  }
  .container .box2 {
    position: absolute;
    height: 5px;
    background: #9fb7d4;
    width: 100%;
  }
  .container .box3 {
    position: relative;
    height: 5px;
    background: #9fb7d4;
    width: 100%;
  }
$(function () {
    $('.container .box2').css({'right':'0','width':'0'});
    $('.container .box3').css({'left':'0','width':'0'});
    $('.container .box2,.container .box3').each(function () {
    var winH = $(window).height();
    var obj = $(this);
    var offset = obj.offset().top;
    pos = 0,
    $(window).scroll(function () {
    scroll = $(window).scrollTop();
    pos = (1 - (offset - scroll) / winH) * 2 * 100;
    if (scroll > offset - winH) {
    obj.width(pos + '%');
    }
    });
    });
    });


これはboxが3つあるので、このbox要素を一つにして、スクロール量に応じて拡大、縮小する機能を実装したいです。
やりたいことは単純なのですが、理解できない自分がいるのでご教授お願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • spookybird

    2018/08/25 16:18

    提示されているコードはサンプルをコピペしたものでしょうか?正しく動いているように見えます。ご自分で試してみたコードを提示して、どこがわからないのか具体的に質問してみてください。でないと、どこをどう回答すればいいのかわかりません。

    キャンセル

  • spookybird

    2018/08/25 16:23

    それから、サンプルコードのせいなのかわかりませんが、コードリーディングをするときはインデントを適切に設定して構造を理解しながら読むことをお勧めします。中身を理解するにはまずしっかり中身を読んでください。その後、まったく同じものを自分で書いてみてください。少し書いて動かして、少し書いて動かしての繰り返しで書いていけば、どの記述がどういう役割を担っているのかが理解しやすいと思います。

    キャンセル

  • hiroshi3324

    2018/09/04 05:18

    そうですね、おっしゃる通りです。現在コピペには頼らずに自分でコードを書いています。なんとかスクロール量に応じて要素を動かすことができましたがまだ思うような動作になっておらずもがいています。もう少し自分でやってみてそれでもわからないときはもう少し具体的な質問で頼りますので、その時は何卒よろしくお願い致します

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 89.72%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる