CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10 - コムテブログ
TL;DR ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。 透過処理で文字のくり抜き background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent; 指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。 .foo { -webkit-ba
jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
![[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシンプルなライブラリがなかったから作った！とのことです。
![[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/af9a10d85702c4d930b7cc9ea507b0a9293a16c1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111901.png)
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
ここまで動かせる！楽しいcss アニメーションのサンプル集 - コムテブログ
TL;DR 小気味よいアニメーションを用いた Web サイトを国内でも多く見かけるようになってきました。CSS3 により画像編集や Flash が減りメンテナンス性も向上しています。2015 年もアニメーションを取り入れるサイトは増えていくでしょう。 今回は CSS アニメーションを使って、面白い動きができるコードをご紹介します。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 エフェクトサンプル １．アニメのようにテキスト下の画像を移動させる アニメのタイトルのように、テキスト上に画像を載せて画像のみ移動させる方法。background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。 .type-mask h2 { -webkit-animation: scrollmask 10s ease 1.5s
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
