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

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

新規登録して質問してみよう
ただいま回答率
87.20%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

jQuery、ふわっと表示させたいが、うまく機能しない。

reirei0727x
reirei0727x

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0評価

0クリップ

395閲覧

投稿2021/12/13 07:38

編集2021/12/13 08:20

現在jQueryを勉強しているものです。
ポートフォリオ作成にあたりふわっと表示するイベントを登録したいのですが、なかなかうまくいきません。
新しい白紙のサイトで導入するとうまくいき、ポートフォリオサイトへクラスやjsファイルなどをコピー&ペーストでうまくいきませんでした。

どなたか原因がわかる方はいらっしゃいますでしょうか?

<行いたいプログラム>
ページをロードした際.load-upクラスをだんだん表示させるようなjQueryのコードを書きたいです。

<現在の状況>
.load-upが表示されず、真っ白な状態です。

https://reirei0727x.lolitapunk.jp/02_Blog/
上記のサイトの.load-upクラスになります。

参考にしたサイトはこちらです。
https://illbenet.jp/view/js-scroll_fade

HTMLファイルです

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="./css/script.css"> <link rel="stylesheet" href="./css/style.css"> <title>REI_BLOG</title> </head> <body> <header> <p>REI × BLOG</p> <nav> <ul> <li class="HOME"><a href="#">HOME</a></li> <li class="PROGRAM"><a href="#"> PROGRAM</a></li> <li class="BUSINESS"><a href="#">BUSINESS</a></li> <li class="SNS"><a href="#">SNS</a></li> <li class="MIND"><a href="#">MIND</a></li> <li class="CAMERA"><a href="#">CAMERA</a></li> <li class="BOOK"><a href="#">BOOK</a></li> <li class="OTHER"><a href="#">OTHER</a></li> </ul> </nav> </header> <div class="wrapper"> <div class="main"> <div class="content load-up"> <p class="date">2020/04/01</p> <h1>記事のタイトル</h1> <p class="category">PROGRAM</p> <div class="img"></div> <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p> <p class="redemore">READ MORE</p> </div> <!--content--> <div class="content load-up"> <p class="date">2020/04/01</p> <h1>記事のタイトル</h1> <p class="category">PROGRAM</p> <div class="img"></div> <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p> <p class="redemore">READ MORE</p> </div> <!--content--> <div class="content load-up"> <p class="date">2020/04/01</p> <h1>記事のタイトル</h1> <p class="category">PROGRAM</p> <div class="img"></div> <p class="text">記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。記事のディスクリプションが入ります。</p> <p class="redemore">READ MORE</p> </div> <!--content--> </div> <div class="side"> <div class="profile"> <h1>このブログの著者</h1> <div><img src="./img/pic.jpg"></div> <h2>rei</h2> <p> 1997年7月27日生まれ。 1日15時間活動できる大のプログラミング好き。通常3ヶ月かかるスキルを3日で習得。持ち前の行動力で1週間でワードプレスの制作まで行い毎日スキルアップ中。迅速に丁寧に。をモットーに心を込めてweb制作いたします。 </p> </div> <!--profile --> <div class="article"> <h1>よく読まれている記事</h1> <ul> <li> <p></p> <h2>人気記事1</h2> </li> <li> <p></p> <h2>人気記事2</h2> </li> <li> <p></p> <h2>人気記事3</h2> </li> </ul> </div><!--article--> <div class="archive"> <h1>Archive</h1> <ul> <li>2020年6月()</li> <li>2020年6月()</li> <li>2020年4月()</li> </ul> </div> </div> </div> <footer> <p>Copyright - Rei, 2021 All Rights Reserved.</p> </footer> <script src="./js/script.js"></script> </body> </html>

sassファイルです

*{ list-style-type:none; margin: 0; padding: 0; } body{ background-color: #B4C3D1; } header{ p{ text-align: center; font-size: 24px; font-weight: 700; color: #333; padding: 35px 0; background-color: #FFF; } @mixin a_before { content: ""; width: 0.8em; height: 0.8em; background-size: contain; display: inline-block; position: absolute; left: -20px; top: 1px; } nav{ padding: 10px; background-color: #333; color: #FFF; height: 80px; align-items: center; display: flex; ul{ padding: 10px; display: flex; align-items: center; display: flex; width: 100%; li{ width: calc(100% / 8); padding: 20px 20px 20px 2rem; border-right: 1px #FFF solid; font-size: 0.8rem; color: #FFF; text-align: center; a{ color: #FFF; text-decoration: none; position: relative; } } li.HOME{ margin-top: 10px; border-left: 1px #FFF solid; a::before{ background-image: url(../img/home.png); @include a_before; } }//home li.PROGRAM{ margin-top: 10px; a::before{ background-image: url(../img/program.png); @include a_before; } } li.BUSINESS{ margin-top: 10px; a::before{ background-image: url(../img/business.png); @include a_before; } } li.SNS{ margin-top: 10px; a::before{ background-image: url(../img/sns.png); @include a_before; } } li.MIND{ margin-top: 10px; a::before{ background-image: url(../img/mind.png); @include a_before; } } li.CAMERA{ margin-top: 10px; a::before{ background-image: url(../img/camera.png); @include a_before; } } li.BOOK{ margin-top: 10px; a::before{ background-image: url(../img/book.png); @include a_before; } } li.OTHER{ margin-top: 10px; a::before{ background-image: url(../img/other.png); @include a_before; } } } } /* nav{ background-color: #333; height: 100px; display: flex; align-items: center; ul{ display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px; flex-wrap: wrap; li{ color: #FFF; border-right: #FFF solid 1px; height: 60px; img{ width: 18px; padding-right: 12px; } } } } */ } //header @mixin border { font-size: 20px; position: relative; margin-bottom: 30px; } @mixin border_after{ content: ""; background-color: #004270; width: 3rem; height: 2px; position: absolute; left:40%; bottom: -5%; } @mixin side { background-color: #FFF; margin-bottom: 30px; text-align: center; padding: 30px; } .wrapper{ display: flex; padding: 60px; .main{ width: calc(70%); margin-right: 30px; .content{ margin-bottom: 30px; background-color: #FFF; p.date{ text-align: center; padding-top: 50px; } h1{ margin: 30px 0; text-align: center; text-decoration: underline; } .category{ margin-bottom: 30px; text-align: center; } .img{ margin: 0 50px; background-color: #004270; height: 200px; } .text{ margin: 35px 50px; text-align: center; } .redemore{ text-align: center; padding-bottom: 50px; font-weight: 600; } } } .side{ width: calc(30%); .profile { @include side; h1{ @include border; } h1::after{ @include border_after; } img{ width: 80%; } h2{ font-size: 18px; } p{ margin-top: 10px; font-size: 14px; } } //profile .article{ @include side; h1{ @include border; } h1::after{ @include border_after; } p{ width: 100%; height: 200px; background-color: #004270; margin-bottom: 20px; } h2{ font-size: 16px; text-decoration: underline; margin-bottom: 30px; } } .archive{ @include side; h1{ @include border; } h1::after{ @include border_after; } } } } footer{ background: #333; height: 100px; color: #FFF; align-items: center; display: flex; justify-content: center; }
$(function(){ var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px) var effect_move = 50; // どのぐらい要素を動かすか(px) var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000 // フェードする前のcssを定義 $('.scroll-fade').css({ opacity: 0, transform: 'translateY('+ effect_move +'px)', transition: effect_time + 'ms' }); // スクロールまたはロードするたびに実行 $(window).on('scroll load', function(){ var scroll_top = $(this).scrollTop(); var scroll_btm = scroll_top + $(this).height(); effect_pos = scroll_btm - effect_pos; // effect_posがthis_posを超えたとき、エフェクトが発動 $('.scroll-fade').each( function() { var this_pos = $(this).offset().top; if ( effect_pos > this_pos ) { $(this).css({ opacity: 1, transform: 'translateY(0)' }); } }); }); });

以上どなたかなぜjQueryがうまく動かないのかご教授いただければ幸いです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

yambejp

2021/12/13 07:41 編集

どこのなにをどうしたときにどんな感じでふわっと表示させるのでしょうか?
reirei0727x

2021/12/13 08:17

質問いただきありがとうございます。 また、わかりにくい文章になっておりすみません。 .load-upクラスをロードした際にだんだん表示させるようなjQueryのコードを書きたいです。

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。