トップへもどるわぷー 上からふわっと出てくる。スクロールするとゆっくりついてくる。下までいったら位置固定でふわふわする感じ(jQuery実装) #21

Closed
mignonstyle opened this Issue Dec 19, 2015 · 26 comments

Projects

None yet

2 participants

@mignonstyle
Contributor

No description provided.

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

下まで行ったときにふわふわは結構難しい + わぷーが下まで降りきっていないときにスクロールをやめたときに、わぷーがふわふわしたほうが良い、と思ったので、つねにふわふわするように実装しました。おかしくないか確認お願いします。

@mignonstyle
Contributor

ずっとふわふわ可愛いです!ありがとうございます。

@mignonstyle
Contributor

「上からふわっと」と「スクロールするとゆっくりついてくる」もjQuery実装なのですがお願いできますでしょうか?イメージは以下のようになります。

・上からふわっと出てくる
「ふわっと」はこんな感じです → http://www.webopixel.net/lab/sample/12/0308scrollshow/pagetop-fade.html

「出てくる」はこんな感じです → http://www.webopixel.net/lab/sample/12/0308scrollshow/pagetop-move.html
サンプルページでは下から出てきますが、これが上から出る感じ

・スクロールするとゆっくりついてくる
こんな感じです(サイドバーがついてくる) → http://memocarilog.info/memocarilog-demo/froat-menu/index.html

スクロールしてもついてくるサイドメニューをjQueryとCSSで作るチュートリアル
http://memocarilog.info/jquery/3100

スクロールより少し遅れてついてきて、ブラウザの下まで行ってから位置固定になる感じです(今は下まで行く前に固定位置についてしまう)

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

今はスクロールに連動して動くようにしているのでスクロールをやめたら上下移動は止まってしまいますが、それを常に遅れて下まで移動するようにする、ということですかね?

スクロールより少し遅れてついてきて、ブラウザの下まで行ってから位置固定になる感じです(今は下まで行く前に固定位置についてしまう)

僕のブラウザ(chrome)だと下まで(正確にはbottom: 10px)いくと固定されるようにしていますが、もっと上で止まってしまっているということでしょうか?

@mignonstyle
Contributor

常に遅れて下まで移動するようにする、ということですかね?

動くのは「スクロールに連動して動く」で良いと思います。
今はスクロールしていくと、途中でスクロールバーのノブのところを追い越して、ノブより先にブラウザ画面の下にたどり着いてしまうので、ノブを追い越さないように(スクロールバーより後で追いかけてくる感じ)なると良いかと思います。下記の件とも関連あるかと思われます。

僕のブラウザ(chrome)だと下まで(正確にはbottom: 10px)いくと固定されるようにしていますが、もっと上で止まってしまっているということでしょうか?

私のブラウザ(FireFox)ではタイムラインのアイコンの所で、わぷーがブラウザ画面の下までたどり着いて固定位置になってしまっています。こちらは環境によるものでしょうか?

@mignonstyle
Contributor

今はこのようになってますー(スクロールバーのノブより先にわぷーが画面下にたどりつく)

memo_wapu-

@inc2734 inc2734 added a commit that referenced this issue Dec 20, 2015
@inc2734 inc2734 pagetop 修正 #21 0a716d0
@inc2734
Collaborator
inc2734 commented Dec 20, 2015

今修正していたのですが、この修正も間違ってますね(**; 0a716d0
つまり、スクロールの動作が開始してコンマ数秒後にわぷーもスクロールを開始し、常にスクロールバーと同じ位置で固定される、ということでしょうか…?

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

ページを表示した段階(スクロール位置が0)のときはわぷーが画面外にいますが、スクロールすると入ってきますよね。で、一旦下にスクロールしてから、また最上部までスクロールさせたとき(スクロール位置が0になったとき)だけは、またわぷーも画面外にでていくのが正しいです?

@mignonstyle
Contributor

お手数おかけしてすみません。

スクロールの動作が開始してコンマ数秒後にわぷーもスクロールを開始し

はい。そのようにお願いします :)

常にスクロールバーと同じ位置で固定される

常にスクロールバーと同じ位置というわけではないかと思いますが、「スクロールバーのノブは追い越さない」事になるかと思います。

こちらのデモページでは、ノブの横あたりだったり、ノブより少し上だったりします。
http://memocarilog.info/memocarilog-demo/froat-menu/index.html

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

提示いただいたでもページだと、スクロールバーの位置はあまり関係なく、スクロールが0のときはブラウザ上辺から100px、それ以外のときはブラウザ上辺から70px の位置まで遅れてスクロールしてきて固定される、ではないですか?なので、例えば少しだけスクロールして「Floating Box」の文字がブラウザ上辺にくるくらいの場合はスクロールバーの上辺よりSidemenuの位置が下になっています。

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

今回のpagetopの場合はページ最下部にいったときは最下部に固定、ページ最上部にいったときはわぷーが画面外に外れる位置まで動いて固定、というふうにブラウザ上辺から◯px・ブラウザ下辺から◯pxというわけではないので、もう少し動きを細かく検討しないといけないような気がします。(僕が難しく考えすぎているだけの可能性も高いので、スクロール位置を何箇所が区切ってその場合のわぷーの位置を示した仕様書などがあるとすごく助かります)

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

5829cab
スクロールバーの位置と連動させたサンプルです。ページ最下部までスクロールしたときの位置決め処理がまだ甘いですが…

@mignonstyle
Contributor

サンプルありがとうございます。
すみません、ちょっと動きを整理してまとめますので一旦お待ち頂けますか?

@inc2734
Collaborator
inc2734 commented Dec 20, 2015

はい、よろしくお願いします!

@mignonstyle
Contributor

お待たせしました。
「スクロールに連動して動く」という認識が少し違うのかなと思ったので、ちょっと整理しました。
こちらで確認してみていただけますか?不明点などございましたらご質問ください。

default

@mignonstyle
Contributor

わぷーの表示位置が仕様書と違っていて、ページを表示したときにわぷーが表示されないのですが、まだ作業中でしょうか?

@inc2734
Collaborator
inc2734 commented Dec 21, 2015

すみません、まだ手つけられてないです(@@;

@mignonstyle
Contributor

了解です!ありがとうございます。
作業が一旦済んでこちらで確認したほうがよい時は担当者を変更しておいてください。

@inc2734 inc2734 added a commit that referenced this issue Dec 21, 2015
@inc2734 inc2734 わぷーの動きを修正 #21 b0bf9c1
@inc2734
Collaborator
inc2734 commented Dec 21, 2015

@mignonstyle 変更してみました、確認お願いします!つ https://github.com/WordBash/kyoto-vol1/tree/issues/%2321

@mignonstyle
Contributor

ありがとうございます!動きはこれで完璧です!!可愛い!

すみません、2点だけ気になったのですが(仕様書に書いてなくてすみません)

・「Topへ」の吹き出しはスクロールUpしたら「About WordBash」のアイコンあたりでフェードアウトさせてください。(「About WordBash」のアイコンのあたりを起点としてスクロールdown、スクロールupでフェードイン、フェードアウト)

・ページが表示されたときのわぷーの位置が上から200pxのあたりですが、(吹き出しが表示されたら120pxになるようになってる)、吹き出しがないときも上から120pxになるように調整は可能でしょうか?

動き自体はとても良いので、マージしちゃっても大丈夫だと思います!
上記2点だけよろしくお願いしますー。

@mignonstyle
Contributor

わぷーの位置はこんな感じになるといいと思います。

wapuu-iti

@inc2734
Collaborator
inc2734 commented Dec 22, 2015

反映してみました。確認お願いします! @mignonstyle

@mignonstyle
Contributor

ありがとうございます!完璧です!わぷー可愛い!さすがキタジマさん!!
こちらでOKですのでよろしくお願いしますー :)

@mignonstyle
Contributor

すみません、質問なんですが、
わぷーがブラウザの下の固定表示のときに、ウインドウ幅を変えると、
わぷーが一瞬ウインドウから消えて、下から飛び出してくるのはそういう仕様ですよね。
(↑直してほしいとかではなくて、どうしてそうなるのかな?という疑問です。)

ウインドウ幅を変えてスクロールの位置が変わるから、位置を再計算してるのでしょうか…?

@inc2734
Collaborator
inc2734 commented Dec 22, 2015

ウインドウ幅を変えてスクロールの位置が変わるから、位置を再計算してるのでしょうか…?

僕もはっきりはわからないのですが、通常上から 120px で、スクロールバーが最下部のときだけ条件判定して下から 90px(実際には上から◯pxの指定ですが)としているので、スクロールバーの位置がかわることで再計算が発生しているのかなと思います。

@mignonstyle
Contributor

なるほどです。ありがとうございます。こちらはFixでお願いします!

@inc2734 inc2734 closed this Dec 22, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment