Q&A
html、CSS、JavaScriptであればブラウザの「ソースを表示」や開発ツールから作りや動きを追うことができます。そこから確認してみては？「調べてみて一度は試してみる」というのが質問前にやることとteratailのヘルプでは明記されているのでこの質問内容だけだと「丸投げ」となり回答がつかない可能性が高いです。
上記サイトのようにスクロールした際に画面中央に縦線を引くようなアニメーションを作りたいです。（スマホでも動くようにしたい。）ラインはcssで引こうと考えております。当方 js jquery 初心者です。わかる方いらっしゃいましたらご教授願います。よろしくお願いいたします。
調べましたがjsが読めないのでこちらにヘルプを求めました。cssのバックグラウンドを使ってラインを書いているところまでは理解しましたが、スクロールで表示がわかりません。
jsまったく読めないのであればこちらで回答したとしてjsが読めるかわからないので回答しづらいですね・・・。いずれにしても参考先サイトのjsを解析して焼き直すだけになると思いますし。イベントの発火タイミングは「スクロールである位置にきたら」だろうなとは思いますけど、実際にそうかはその参考サイトを見てみないと分からないのが実際です。理解されないコードを積極的に回答したいという回答者は少ないと思います。
そうですか、私はわからないのでこちらにヘルプを求めましたがそれがダメと言うことがわかりました。初心者には厳しいサイトですね。自分で知識をつけて頑張ってみます。ありがとうございます。
初心者に・・・というより問題や課題が具体的になっていないことですね。「全部教えて」では特にお金もらってやっているわけではない、善意のみで成り立っているQAサイトでは負荷が高すぎて難しいですし（その辺りはヘルプを一読してください）もう少し頑張ってみて、「ここがこうだと思うけど、ここがわからない」と問題・課題・疑問点を具体的にしてみてください。
「読めなくても動けばいい」というのでしたらひとまず全部コピペして関係なさそうなところをあたりつけて削るとかでも良いですけど（私も最初はそうしてました）、もしそれでうまくいかなくても誰もフォローできないのが実際です。
ありがとうございます。今後気をつけます。
こういうの作ってください、みたいな依頼はお金を払えばやってくれるフリーランサーはたくさんいます。ご自分でまったく読めない、書けない状態なら、フリーランサーに仕事を依頼するサイトを探して依頼してみるのがいいと思います。
回答1件
0
ベストアンサー
ぱっと思いつきこんな程度でもそれっぽくいけます
css
1body{ 2 height:3000px; 3 background-Color:yellow; 4} 5div#line{ 6 width:10px; 7 height:50%; 8 background-Color:red; 9 position:absolute; 10 top:0px; 11} 12#d1,#d2,#d3{height:800px;}
javascript
1$( function() { 2 $('<div>').attr('id','line').css({ 3 "left":$('body').width()/2, 4 }).appendTo('body'); 5 $(window).on('scroll wheel mousewheel touchmove',function(e){ 6 $('#line').css('top',$(document).scrollTop()); 7 }); 8});
HTML
1<body> 2<div id="d1">d1</div> 3<div id="d2">d2</div> 4<div id="d3">d3</div> 5</body>
投稿2018/09/21 14:06
総合スコア117682
あなたの回答
tips
プレビュー
