タグ: javascript

ここ数年でHTML、CSS、Javascriptだけで表現出来ることが非常に増えてきています。ほんの少し前まではFlashや動画に頼らないといけなかったことも、今やそんな必要が無くなってきました。 非常に複雑な動きをするテキストエフェクトもその一例です。今回はCSS、Javascriptのコピペだけで実装可能なちょっとユニークなテキストエフェクトを紹介します …

CODEPENを漁っていたら面白いものを見つけました。動作的にはページのトップへスクロールしながら戻るボタンなのですが、そのページをどのくらい読み進めたかがわかるようになっています。サイトやページにちょっとしたアクセントを付けたいときに良いのではないでしょうか。あくまでトップへ戻るボタンなので、デザインの邪魔にもなりにくいと思います。 サンプル 上の説明を読 …

javascriptで作られたユニークな動きをするイメージギャラリーを見つけたので備忘録代わりに。 クリック時の動きも非常に凝っていますが、それでいてクセも無いので、どのようなデザインにも合わせやすいのではないでしょうか。例えば、写真や印刷物のポートフォリオサイトと相性が良さそうです。いずれどこかで使ってみたいjavascriptです。 実装方法 html …

WordPressで記事を書いていて、ページが長くなってしまったとき。そのページの目次があると便利です。目的の内容も探しやすいですし、そのページにどんなことが書いてあるのかも一目でわかるので、ユーザビリティも高いといえるでしょう。また、見出しと文章がきちんと組み立てられているのであれば、内部リンクにもなるのでSEO効果も期待できるという考え方もあります。 今 …

ページをスクロールさせたときにヘッダーやナビゲーションを固定または変化させるjQueryのサンプルです。 縦に長いページ等でよく見かけますが、実装自体は簡単に出来ます。特にナビゲーションは常に表示させておくことで、ユーザビリティの向上にもつながりますし、離脱率の低下も期待出来るのではないでしょうか。既存のサイトやページにも導入しやすいので、一度試してみる価値 …

スマホサイト等でつかえそうなドロップダウンメニューの実装方法の紹介です。 ダラダラとメニューを並べたくない時、見た目をスッキリさせたい時によくつかうのがドロップダウンメニューです。実装時に気を付けているのが、「押せる」ことが分かるようにすることです。まあ、当然ですが。 今回紹介するドロップダウンメニューであれば、ボタンの右端にアイコンが付いていて、そのアイコ …

以前下記の記事で紹介したDrawer.jsですが、iPhoneでの不具合があるようです。不具合の内容は、ドロワー内のメニューをスクロールしようとすると、メニューが閉じてしまうというもの。 PCやAndroidでは確認できない不具合なのですが、どうやらiOSのアップグレードに伴って発生し始めた不具合みたいです。僕自身iPhoneはつかっていないのでよくわかりま …

今回は問い合わせや資料請求、申し込み等でつかうフォームの入力時にユニークな動きをつけるCSSを紹介します。 せっかくサイトやページのデザインにこだわったのなら、フォームにも少し気を利かせてこだわりたいところ。既存のフォームにも導入しやすいので、「問い合わせ画面が味気ない」「申し込み画面にオリジナリティを出したい」なんてときに試してみてはいかがでしょうか？ 実 …