ページ上の要素を文字通りぼかす効果がある jQuery プラグインがあるかどうかを調べようとしているので、ユーザーはそれらを読むことができません。それは私が構築しているフラッシュカードアプリケーション用であり、カードの回答セクションを非表示にして、ぼやけたウィンドウを通して見ているかのように、焦点が合っていないように見せたいと考えています。jQueryには非常に多くのプラグインとエフェクトがあり、このようなものが存在するに違いありませんが、「jQueryぼかしエフェクト」などをグーグルで検索すると、探しているものではなく、スライドエフェクトに関連する結果が予想通り表示されました。このようなことができるプラグインについて聞いたことがありますか?
4 に答える
これに似たものを実装する必要がありました。私は透明なPNGを使用しました(まあ、明らかにほとんどのPNGは透明ではありませんでした)。ユーザーがテキストのヒントを得るには十分ですが、実際には表示されません。実際にはぼやけているわけではありません - カードを赤いデコーダーの後ろに置く前に、ボードゲームのアウトバーストが行うことのようです。オーバーレイ div の背景画像を PNG に設定し、それに応じてサイズを変更します。
引き戸のテクニックを使ってみませんか?ぼやけたテキストのスライスを「シミュレート」する小さな垂直スライスpngを作成し、2つの丸みを帯びたエッジブラーピースを使用して両側をキャップすることができます。次に、単語の文字数と同じ幅のこのぼやけた画像セットを使用してオーバーレイ/トグルdivを作成し、単語を非表示にすることができます。
CSS3 でこれを行うことができます。
#hidden {
color: transparent;
text-shadow: #6374AB 0px 0px 20px;
}
詳細情報を編集: 現在、WebKit ベースのブラウザーでのみ動作します。クロス ブラウザーのテキスト シャドウ情報: クロス ブラウザー互換の CSS テキスト シャドウの作成
ここにcss3を使用してこれを行ういくつかの例があります:http://css-tricks.com/9053-fun-with-blurred-text/