タグ

ブックマーク / imasashi.net (2)

  • 海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net

    最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section

    海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net
  • レスポンシブのサイト制作でjsを読み込み分けるためのjsファイル管理方法 | imasashi.net

    久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。 あと、俺がめんどくさがりというのも大きいです。 jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。 で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。 たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。 更新. documen

    レスポンシブのサイト制作でjsを読み込み分けるためのjsファイル管理方法 | imasashi.net
  • 1