Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
前提・実現したいこと
こちらのサイトのスクロールしてから右から左にコンテンツが表示されるアニメーションのことで
お聞きしたいのですが
同じようなアニメーションのサイトを作っていますが上にあるコンテンツは同じようにアニメーションになるのですが下にある同じようなコンテンツもスクロールしたら同じようなアニメーションに設定したいのですが同時にアニメーションが実行されます。
同時に実行されないアニメーションを設定するにはjQueryのコードをどうすればいいのでしょうか？
下にスクロールしたら同じ速度にならないアニメーションにしたいです。
どのようなコードが正しいのでしょうか？
スクロールして特定の位置まで来たら右から左にスライドしてのイベントを実行はできるんですが
そのあと下にスクロールしたら別のコンテンツも同じ速度でアニメーションで実行されるようにしたいです。
該当のソースコード
私が作ったコードになります。
javascript
1 var thisOffset; 2 $(window).on('load',function(){ 3 thisOffset = $('.message-wrap,.clerical-wrap,.person-wrap').offset().top + $('.message-wrap,.clerical-wrap,.person-wrap').outerHeight(); 4 }); 5 6 $(window).scroll(function(){ 7 $('.message-wrap,.clerical-wrap,.person-wrap').addClass('open'); 8 var top = $(this).offset().top; 9 if(scrollTop() > 800 + $(window).height() > thisOffset) { 10 console.log('once'); 11 used = true; 12 } 13 })
試したこと
ネットで特定の位置まで来たらイベントを実行のサイトを見つけ
同じように設定しましたがうまくいきませんでした。
タイトルには要件を書いて下さい。 https://teratail.com/help/question-tips#questionTips3-1 タイトルから質問内容が想像できないもの、タイトルと質問内容が食い違っているものはスムーズな回答を得られなくなります。
質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください
色々と教えていただきありがとうございます。 タイトルを修正して文章を分かりやすく追加したんですが これでよろしいでしょうか？
コード部分、他の質問や回答はどうなっていますか？
ここに言語を入力
=>の下にソースコードを入れました。
質問ですが
=>http://www.pointedge.work/ こちらのサイトのスクロールしてから右から左にコンテンツが表示されるアニメーションのことで お聞きしたいのですが 同じようなアニメーションのサイトを作っていますが上にあるコンテンツは同じようにアニメーションになるのですが下にある同じようなコンテンツもスクロールしたら同じようなアニメーションに設定したいのですが同時にアニメーションが実行されます。 同時に実行されないアニメーションを設定するにはjQueryのコードをどうすればいいのでしょうか？
いえ、ですから、コード部分が他のちゃんとできている質問や回答と比べてどうなってますか？と聞いています。きちんとコードブロックになっていないと本当に組まれたコードそのままではなくなるし、コピペもできないから、正しく再現確認が行えない＝的確なアドバイスが難しくなるということなんですよ。
何度も教えていただきありがとうございます。こちらでよろしいでしょうか？
プレビュー見てから投稿してますよね？最初に私が提示した手順通りにすればこうはならないはずですけど(同文でほとんどの方が対応してくれています)。本当に他の質問や回答のコード提示部分確認しました？この質問に提示されたものと同じになってますか？
```javascript
// ソースコードをコピペ
```
で投稿。
そういえばわたしは手順が逆で、コピペしてからソースコードを選択→<code>ボタン押す→言語名入力ですね。しやすいほうで
お聞きしたいのですが 私は初心者なんですが、 ↓こちらのソースコードは表示されていないのでしょうか？？ var thisOffset; $(window).on('load',function(){ thisOffset = $('.message-wrap,.clerical-wrap,.person-wrap').offset().top + $('.message-wrap,.clerical-wrap,.person-wrap').outerHeight(); }); $(window).scroll(function(){ $('.message-wrap,.clerical-wrap,.person-wrap').addClass('open'); var top = $(this).offset().top; if(scrollTop() > 800 + $(window).height() > thisOffset) { console.log('once'); used = true; } })
表示されています。しかし、べた書きのままだとわかりづらいです。囲うことによって、ソースコードがハイライトされて読みやすくなります。
かしこまりました。 発生している問題・エラーメッセージの項目にソースコードをコピペすればいいのでしょうか？
マークダウンのコード部分を閉じる```がありません。
それと、ここに言語を入力をjavascriptに置き換えてください。
例えばこの質問・回答 https://teratail.com/questions/142724 のコード部分 のようになるのが正しい形です。他の質問や回答を見てくれと言ったのですが、なかなか見てくれないので例としてあげました。
改行されずにこのように表示されているのですね！！<br> 読みにくくて申し訳ありませんでした。<br> 改行とかは文字の最後に<br>で改行すればいいのでしょうか？
質問テンプレートの文言も多く残っているので調整してくださいね。このままだとノイズだらけ質問内容の読み取りが困難です。
うんだから質問編集画面でプレビュー見て調整しようねって書いてるじゃない…。コメントはそもそも改行使えませんし、タグをユーザーが任意に投稿できたら悪さし放題ですよね。「マークダウンとは何か」というところから勉強してきてください。
まとめて設定してるからまとめて動くのが当たり前なんだけども、そこすらわからないのならもう少しJavaScriptについて勉強してから作業したほうがよかですよ？今のまま進めても「なんかよくわからないけど言われたとおりにやったらできた」となり、技術の向上は望めないです。また、進んだところで「じゃあこの先はどうすればいいのだろう」と先に進めずに結果全てここで質問⇒回答ということになってしまいます。
それよりも自分でもう少し勉強してみるなどした方が今後の役に立つと思います。
javascriptのスキルを短期間で高めるにはどうすればいいのでしょうか？
本読む。オンラインのなんかやる。動画見る。私は独学（一円もお金をかけずに）ですけどね。
簡単なコードを動かすことから始めて色々なコードを読み書きする。そしてJavaScriptに限らず、アルゴリズムをキチンと組み立てる。僕も基本独学ですが、日本語できちんと流れを組み立てられないとプログラミングは難しいです。日本語でできないのにプログラミング言語で書くことはできないですよね。そして、コピペするなら全く同じにする。同じ設定をしたと書いていますが、カッコ内にはセレクタ単体で記述されているのに複数入れても大丈夫と思った根拠はなんでしょうか？そういった思い込みですっ飛ばすことが初学者がよくはまる原因です。
質問の方向性が変わってきているような気がしないでもないですが、「短期間で」とショートカットしようとしないこと。一定の技量を身につけるにはどのように素質があったとしても、勤勉であったとしてもそれなりの時間がかかるものです。それなりの時間がかかるものと覚悟をして着実に進んでいくことです。
スクーの授業を1年間勉強しました。 Webサイトを制作してから①から⑨まで手書きで使えるようになりました。 ①スムーススクロールの実装 ②ドロワーメニューの実装 ③アコーディオンの実装 ④モーダルウインドウの実装 ⑤お問い合わせフォーム入力チェックの実装 ⑥ハンバーガードロワーメニューの実装 ⑦スライダーslickの実装 ⑧パララックスの実装 ⑨切り替えタブの実装
ですが、今回の同じコンテンツをスクロールイベントで同じアニメーションで繰り返し行う実装のプログラミングは正直わかりませんでした。
今回の質問内容で詳しくお聞きしたいのですが 短いコードでjQuery＋CSSだけでは実装できないのでしょうか？
「手書きで」の意味がわかりませんが、「コピペしてダメだったら次へ」ってやり方してませんか？それだとたぶんいつまでたってもやりたいことはできませんよ。teratailのテーマである「思考するエンジニアの」の部分に掛かってきますが、問題や要件をできるだけ細分化していくこと、そこは他の誰でもなくあなたしかできません。そして細分化したものを部品として作り、組み立てていく。家を作るときと同じです。家を作るとしたらあなたは今、どこまで出来ていて何が足らないのでしょうか？コードだけもらってもスクーとやらで勉強した１年とそれから今までと同じ「わかったつもり」のまま成長にはつながりません。
勉強した件に関して コピペは一切していません。 自分で試行錯誤して考えてテストしてプログラミングしました。
とりあえず、今回作ったコード（コピペ改変）については先ほども指摘しましたが”セレクタ単体”で指定していくものです。なら、単純明快に3個作らなきゃいけないな、となるはず・・・というのはわかるでしょうか？まず、一つ作って動くか確かめ、もうひとつ設定を変えて作ってみてのようにしないとうまくいかないですよ。二度目になりますが「思い込みで必要な手順をすっ飛ばす」のはよろしくないです。まずは動くものをそのまま動かし、改変を加えるのはそのコードについて理解してからです。
yukihisaさんのコメント読まれましたか？それと合わせて読まれると私が何を指摘しているかわかるはずです。
そして勉強した件ではなく、「コピペしてだめだったら次へ」は現状の話をしているのは理解できますか？その現状に対して、勉強したと言われる1年はじゃあなんだったの？という意味です。自分で試行錯誤して考えてテストしてプログラミングするのはいいですが、その際に元があるならまずは元を大事にしようよ、ということです。自分の技術レベルより上のものを作ろうとするときにコピペをするものです（楽したいときもありますが）その際に技術レベルの足りない自分の考えをいきなり詰め込んでもうまくいかないのは自明でしょ？
コードブロックにするだけで多大な時間を浪費していますね。あまり人の話を最後まできちんと聞かれないところにも問題があります。非常にもったいないです。いずれにしても提示されたコードだけでは再現確認がとれないので回答はのぞめないかと。JavaScriptだけで実行されてるんですか？それともhtmlは自分で考えて組んだものではないから出せないとかじゃないですよね。責めているわけではなく、問題解決のために必要な情報がすっぽり抜けているのできちんと提供していただきたいのです。
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答1件
0
ベストアンサー
HTMLが提示されていないので想像ですが。
jQuery
1$('.message-wrap,.clerical-wrap,.person-wrap').offset()
と書かれていますが、.offset()は仕様により最初にマッチした要素の座標を取得します(.outerHeight()も同じ)。
https://api.jquery.com/offset/
https://api.jquery.com/outerHeight/
thisOffsetと、単一の値ではどうにもならないので配列なり別変数を用意するなりしないといけません。
投稿2018/08/28 02:29
総合スコア13749
配列とはarrayを使って変数を作らないといけないのでしょうか？
その点に関しては複数セレクタ使えないよ、必要な分だけ変数作りなさいと修正依頼の中で散々指摘していますが。。。
自分で考えて試行錯誤していると大見得を切ったのですから、せめてやってみてから質問しましょうよ？
まあ、HTMLがない以上、実際に3つあるかどうかもよくわかりません
x_xさん制作したサイトを見ていただけませんでしょうか？
いやです
仕事を投げたいのなら、質問サイトよりもマッチングサイトのほうがいいのでは？
r.baagio10 殿
自分のサイトをそのままブラッシュアップしてほしいならCloudWorksなりなんなりで仕事として依頼しましょう。
ここは「思考するエンジニアのためのQAサイト」です。
指摘は無視、回答されると回答者に対してさらに次のステップについてやり方をクレクレする。。。
あなたの態度からは「自分で思考」している姿勢が微塵も見受けられません。
x_x 様
前の質問から同じ姿勢だったため、回答を控えていましたが、繰り返すようなのでコメントさせていただきました。
横槍申し訳ない。
できました。
// スクロールしたら左から右にスライドする実装
$(function(){
var top = $('.message-wrap').offset().top;
$(window).scroll(function(){
if($(this).scrollTop() > 800){
$('.message-wrap').addClass('open');
}else{
$('.message-wrap').removeClass('open');
}
if($(this).scrollTop() > 2000){
$('.clerical-wrap').addClass('open');
}else{
$('.clerical-wrap').removeClass('open');
}
if($(this).scrollTop() > 5000){
$('.person-wrap').addClass('open');
}else{
$('.person-wrap').removeClass('open');
}
});
});
あなたの回答
tips
プレビュー
