New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
2 participants
@mignonstyle
Contributor

mignonstyle commented Dec 19, 2015

No description provided.

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

Contributor

mignonstyle commented Dec 20, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

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

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

Contributor

mignonstyle commented Dec 20, 2015

「上からふわっと」と「スクロールするとゆっくりついてくる」も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

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

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

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

Collaborator

inc2734 commented Dec 20, 2015

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

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

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

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

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

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

Contributor

mignonstyle commented Dec 20, 2015

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

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

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

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

memo_wapu-

Contributor

mignonstyle commented Dec 20, 2015

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

memo_wapu-

inc2734 added a commit that referenced this issue Dec 20, 2015

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

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

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

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

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

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

Contributor

mignonstyle commented Dec 20, 2015

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

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

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

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

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

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

Contributor

mignonstyle commented Dec 20, 2015

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 20, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 20, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 20, 2015

Contributor

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

default

Contributor

mignonstyle commented Dec 20, 2015

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

default

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 21, 2015

Contributor

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

Contributor

mignonstyle commented Dec 21, 2015

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 21, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 21, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 21, 2015

Contributor

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

Contributor

mignonstyle commented Dec 21, 2015

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

inc2734 added a commit that referenced this issue Dec 21, 2015

inc2734 added a commit that referenced this issue Dec 21, 2015

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 21, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 21, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 21, 2015

Contributor

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

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

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

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

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

Contributor

mignonstyle commented Dec 21, 2015

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

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

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

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

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 21, 2015

Contributor

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

wapuu-iti

Contributor

mignonstyle commented Dec 21, 2015

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

wapuu-iti

inc2734 added a commit that referenced this issue Dec 22, 2015

inc2734 added a commit that referenced this issue Dec 22, 2015

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 22, 2015

Collaborator

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

Collaborator

inc2734 commented Dec 22, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 22, 2015

Contributor

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

Contributor

mignonstyle commented Dec 22, 2015

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 22, 2015

Contributor

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

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

Contributor

mignonstyle commented Dec 22, 2015

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

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

@inc2734

This comment has been minimized.

Show comment
Hide comment
@inc2734

inc2734 Dec 22, 2015

Collaborator

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

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

Collaborator

inc2734 commented Dec 22, 2015

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

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

@mignonstyle

This comment has been minimized.

Show comment
Hide comment
@mignonstyle

mignonstyle Dec 22, 2015

Contributor

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

Contributor

mignonstyle commented Dec 22, 2015

なるほどです。ありがとうございます。こちらは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