2016年9月26日のブックマーク (2件)

  • 【jQuery】要素を全画面表示してからスクロール|合同会社チームサンタ

    jQueryはもうweb制作にはなくてはならないものになりましたね。 web上にも情報がたくさん載っているので、グーグル先生に聞けば大抵のことはすぐに分かります。 そのなかで個人的に結構使うんだけど、あまり紹介している記事とかないよなと思ったものをご紹介出来ればと思います。 チームサンタの三浦です。 フルスクリーンからのスクロール デモページ ちょっと上手く動きの説明が出来ないのでまずはデモページで確認して下さい。 背景画像などを画面サイズいっぱいに広げてから、セクションを切り替えてスクロールさせたい!もちろんリサイズしても大丈夫! ってこと結構あると思うのですけど、意外に情報が少ないと感じたので、紹介出来ればと思い、今回の記事を書かせてもらいます。 HTML <body> <section id="s01"> <h1>全画面表示させたいセクション</h1> </section> <sec

  • ファーストビューをフルスクリーン対応デザインにしてみた

    もうひとつの運営サイト「大切な記録」のキービジュアルをフルスクリーン対応にしてみました。フルスクリーンに耐えさせる画像のチョイスは ボカしていてもビジュアルとして成り立つ フルスクリーンに耐えられる大きさ 被写体が引いてある といったところでしょうか?キャッチコピーなどの文字周り系は完全に別画像にしたほうが良いでしょう。今回僕は「ボカしていてもビジュアルとして成り立つ」画像を用意しました。シングルページにする想定ではありませんでしたが、そこそこ大きな画像ができたのでもしかするとそのうちシングルページになっているかもしれませんが今回はキービジュアルのみで、スクロール等の仕掛けも無しです。あくまでファーストビューのみフルスクリーンになるていです。 .height()で高さを取得する 実装したサイトはレスポンシブです。PCとタブレットはフルスクリーンでもいいですが、スマホのポートレートがフルスク