読者です 読者をやめる 読者になる 読者になる

jQueryでスクロールアニメーションを実装してみたよ

こんばんは。

結構利用できそうなかっこいいアニメーションを実装したよ。
これが採用されるかどうかはまだ分からないけど、
結構少ないコードでおしゃれな動きが作れたのでいいかなと。

全体はちょっと覚えてないから一部使った物とかを抜粋して。

メインで使ったのはjQueryだよ。 今回はこちらのサイトを参考にさせてもらいました。(ちょっとねw)
参考サイト
ちなみに開発者ツールスマホサイトにして確認。

結局、やりたい事としては
* よくあるハンバーガーメニューをクリックするとスライドメニューが出現
* メニューの中にページ内リンクを仕込んでおいて
* ページ内リンクをクリックで、そこにアニメーションでゆっくりスクロール+メニューは閉じる
こちらです。

そして、使ったjQueryメソッド
* setTimeout こちら
* animate こちら
* offset こちら ほんと、これだけで実装できちゃうんです。

アニメーション時に、scrollTopで、id持ってる要素のTOPに持ってくるのがちょっと思いつかなかったくらい。
animate({scrollTop: 'this.offset().top'},1000);
thisがそのid指定した要素の事ね
位置の取得に今後も使えそうだよねー。

色んな書き方があるものだなあ、、、

これが最良って訳ではないのは分かって入るけど、自分のレベルでなんとか動くところまで持って来れたから、よし。

css のautoとか中央寄せとか

最近疑問に思ってた事を。。

何かさ、よく

width: 500px;
margin: 0 auto;

これって、使ってると思ってて。

中央寄せにする時なんだけど。

でも、まあ、全体のコンテンツをこうしちゃうとレイアウトが、
ぐちゃーってなる時もあるから、まあ全体はこれでいい。

ただ、中のコンテンツで、可変でもあってほしい!みたいなとき。

max-width: 500px;
margin: 0 auto;

これが何とも便利
今更知っちゃったよ。。。

という事で、これからは多様していこうと思う。

See the Pen aOpKVp by megumin (@megumin23) on CodePen.

画面幅とかかえたり、テキストをかえてみると分かります!

そして、そういや今回の案件で(今更悩んでんのかよってはなしだけどw)
auto使うか、100%使うかみたいなとこ悩んだ。

画像表示枠を可変にしたくて。
まあ、結局調べて書いてたやつをコピペしたんだけど。
ちょっと自分なりに調べてみたのでこちらも備忘録的に。

まずこのサイトを参考にさせていただいた
いや、むしろこのサイトさんがドンピシャだったので。

結局、その要素に別のプロパティが指定されてなかったらまあ何とかなるけど、
ほかのプロパティが指定されてある時は要注意ってことだね。

今回の例で言えば、paddingとかborderとか。
padding: 20px;とかはいってたらwidth: auto;の場合ははみ出ない(親要素があればそこから)、 でもwidth: 100%;にすると横幅が100%+20pxではみ出ちゃう。

これ、重要だよね。

JSONに関して調べて、考えてみた。

今の業務で初めてJSON(JavaScript Object Notation)使用!

基本的に、
"test": "テスト例です" こんな感じで文字列として書く。
true,false,[1,true],1,の用に書く。
いわゆる文字列、真偽値、配列、数値が右っかわにかける。

左は絶対""でかこむ。

Sublime使ってたら、Pretty JSONこれは入れた方がいいかなあと、いれてみた。
command+ctr+jらしい。ちょっと覚えにく笑
でも使える。今更ながら。。

一応備忘録で公式サイト的なやつも。JSON

スマホの画面を作ってみて 可変対応とかハンバーガーメニューとか

こんばんは。

今関わってるサービスがスマホとPC両方なので必然的に両方の、
かつ、IE7,8対応まで迫られるという感じで。
Androidも確か結構変なのに対応が必要w
結構めちゃくちゃだと思いつつもなんとか6末にはリニューアルを。。

そんなこんなで、始めてスマホサイト(まあ、ネイティブアプリではないけど)に関わって、学んだ事をちょこちょこと。

PCの古いブラウザ対応もしつつだから、自分の中での許容範囲は結構広くなったんじゃないかと思うよ。

PCの横並びはfloat使うけど、スマホじゃあdisplay: box;とか。
ちょっと後でboxに関してもまとめておこう。

後はアニメーション部分。
スマホの場合はcss3使えるから結構綺麗に動く。
jsだとどうしてもカクッってなってしまう。。。

スマホは画面サイズがまちまちだから、基本的には固定幅NGだとおもう。

デザインがRetina対応というか、スマホは画質が良いからその辺りも考えないとね。
実際実機で表示して確認しないと、Photoshop上とはまた違うから。
それでデザイナーさんから後で修正とかきたりしたし。
まだまだスマホ対応に特化した人ってすくないのかなー。。

書きたい事はたくさんあるけど、メインに! つぎね!

おまちかねの、ハンバーガーメニュー実装(スマホnotネイティブアプリ)

おなじみのハンバーガーメニュー(今もこの呼び方?w)

参考サイト

このサイトの方は本当すごいと思うなあ。よく見つけたなあと。

参考はこれなんだけど、今回元々ある程度他のエンジニアさんがくんでくれてて。それに組み込むのがなかなかこのタイミングでできないので、考え方を変えてみたよ。

私は私のレベルで。
正直綺麗な書き方じゃないとは思う。
結構無理矢理感が否めないので。。。

でも、こんなやり方もあるんだな程度に思っていただければ。
後は自分の備忘録と復習がてら。

まず、作りたかったのがfbのアプリ版の右上ボタンをクリックした時のようなやつ。

メニュー部分が右からニュルっと出るやつです。

で、今回私が悩んだのがそのニュルの部分ではなくて、
メニュー部分を立てスクロールした時にメインのコンテンツも一緒にスクロールしちゃう、、、ってやつ。

ちなみに、スライドのやり方も簡単に書くと、元々divかなんかでかこって作っておいて、hiddenで隠しておくと良いみたい。 で、right: -299px;みたいな感じでね。

これに関してはこちらとかが分かりやすいかな。

結局、どのサイトに書いてある事もやり方はこんな感じで。

話を戻すと、その両方スクロールしちゃう現象って普通に実装するとそうなってしまうモノで。プラスαの工夫をしなきゃだめみたい。

私がやったのは
* bodyとhtmlにheight: 100%;,overflow: hidden;
ちなみにこれで高さが画面いっぱいになるよ。

  • メインコンテンツの方にはJavaScriptのnoScrollを使って、スマホ特有のタッチイベントでスクロールできないようにしたよ。

// 禁止
$('#hoge').on('touchmove.noScroll', function(e) { e.preventDefault(); });

// 解除
$('#hoge').off('.noScroll');

結構有名みたいね。preventDefaultは特に。
今回の案件でも結構使ってる。

これで、見た目的にはfbさんと同じ。一応ね。

どうなのかは分からないけど、一応実装できました!

表示画像部分の、可変対応をしてみた。

こんにちは。
最初の仕様詰めが甘いと、色々やってくうちにあれ?あれあれ?
みたいな事がたくさん出てきて。

最近は、その対応に追われてる。
まあ、最初から全部考えつくとか無理だし、学んだ。

で、そこでやってる対応。

今回記事投稿がメインだから、投稿された画像が表示される部分があって。
もちろん全部がフロントの処理という訳ではないからまあ、参考程度に。
やりたい事としては、ユーザーさんがどんなサイズの画像を投稿してきても、 画像を当てはめたい場所にぴったり当てはめるってこと。

小さいサイズの時は、リサイズとかせずに表示場所の中心におく。
逆に大きすぎるときは横幅縮小して、縦幅は自動で。

そんなこんなで、ソースは下記です。 ちなみに、ダミー画像作成時はこちらを使用させていただきました。
今回始めて使った物なんだけど便利だよ。
ダミー画像作成参考サイト

See the Pen QbEbZg by megumin (@megumin23) on CodePen.

ちょー簡単だけど、本当可変は便利。

cssだけで三点リーダーを実装 スマホ用だよん

今回関わっているサービスはスマホ対応があって。
最近技術的な事あんまりかけてなかったから。

参考サイト様

結局、有名なtext-overflow: ellipsis;を使えばよくて。

ただ、今回学んだのは幅を固定しないでいけるってこと。
width: 100%;で端末によって幅が違っても、maxまで文字が入ってくれる。

See the Pen doMyQz by megumin (@megumin23) on CodePen.

ちょっっと例が雑なきもするけど、言いたかったのはこういう事。