0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

スムーススクロールとフェードインで動きがおかしくなった時

Last updated at Posted at 2020-03-18

#両方使ったら、飛ぶ位置がおかしくなった
ナビバーのメニュークリックで各コンテンツに飛ぶようにしてたのに、各コンテンツをフェードインさせるアニメーションつけたら、違う位置で止まるようになった。
ezgif-2-2565a44d6d2f.gif
myskillをクリックしているが、一回目では位置がずれてる。

#各コンテンツをdivにいれて修正
修正前

                <section id="profile" class="animated">
                <h2>Profile</h2>
                    <div class="prof">
                        <div class="profile-img">
                            <img src="../img/profile.jpg" alt="プロフィール画像">
                        </div>
                        <h3>Name</h3>
                        <p>松江 渚</p>
                        <h3>Birthday</h3>
                        <p>1998/5/14</p>
                        <h3>Summary</h3>
                        <p>
                            2017年 関西大学に入学、2021年卒業予定。<br>
                            2020年2月からTechAcademyでフロントエンドについて学び始める。<br>
                            現在も勉強中!
                        </p>
                        <h3>Hobby</h3>
                        <p>
                            絵を描くことや、ゲームをすること。<br>
                            雑貨集めなどなど。
                        </p>
                    </div>
                    <!--プロフィールの下にあるSNSなどの画像リンク-->
                    <div class="SNS">
                        <p>SNSもやってます。</p>
                        <a href="https://twitter.com/mnagisa2" class="twitter" target="_blank"><i class="fab fa-twitter fa-3x twitter-ico"></i></a>
                    </div>
            </section>

修正後

<div id="profile">
                <section class="animated">
                <h2>Profile</h2>
                    <div class="prof">
                        <div class="profile-img">
                            <img src="../img/profile.jpg" alt="プロフィール画像">
                        </div>
                        <h3>Name</h3>
                        <p>松江 渚</p>
                        <h3>Birthday</h3>
                        <p>1998/5/14</p>
                        <h3>Summary</h3>
                        <p>
                            2017年 関西大学に入学、2021年卒業予定。<br>
                            2020年2月からTechAcademyでフロントエンドについて学び始める。<br>
                            現在も勉強中!
                        </p>
                        <h3>Hobby</h3>
                        <p>
                            絵を描くことや、ゲームをすること。<br>
                            雑貨集めなどなど。
                        </p>
                    </div>
                    <!--プロフィールの下にあるSNSなどの画像リンク-->
                    <div class="SNS">
                        <p>SNSもやってます。</p>
                        <a href="https://twitter.com/mnagisa2" class="twitter" target="_blank"><i class="fab fa-twitter fa-3x twitter-ico"></i></a>
                    </div>
            </section>
            </div>

アンカーポイント位置がフェードインする前は確定していないのでずれていた?
位置を確定させるためにdivにアンカーポイントをつけた。
ezgif-2-00f4e752a312.gif

これで解決!
説明が下手すぎるけど自分用だからいいかな:thinking:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?