chocolate

こんにちは、デザイナーの奥田です。最近フロントエンドでは「脱jQuery」なんて言われていますね。まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。さて、今回は「もう最...

「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。

人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCS […]

最近サイトをコーディングしていて必ず使うといっても過言ではない「スライダー」！ その中でも、最近のお気に入りである「swiper」をご紹介します。 なぜお気に入りかというと、 – 動作が軽い！ – jQueryに依存しない – レスポンシブに対応 – オプションがとにかく豊富 ッて感じですかね。 この中でもjQueryを使わなくてもいいというところと…

CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せた…

今後も使う機会がありそうなので備忘録。手軽にコンテンツスライダーを実装することができるjQueryプラグイン「「bxSlider」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示さ

jQueryを使って画像や要素などをランダムに並べ替えたり表示させたりする方法の備忘録です。jQueryと言っても乱数を作るのに必要なわけではないですし、特に前半の方などは簡易的なもので尚更JavaS

個人や商用で無料利用できる、日本語のフリーフォント260種類を紹介します（公開時より、2つ追加）。 ビジネスからプライベートまで、幅広く利用できるフォントが満載です！ 毎年まとめていますが、去年は21

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のア

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。どれも特別派

暮らしの中のさまざまなことの“はじめかた”だけを研究する「はじめかた研究所」。手土産スイーツ、お弁当づくり、オーガニックコスメ、ねことの生活…。さあ、あたらしい暮らしの一歩を踏み出そう。