JS+CSS3でクールなポップアップエフェクトを作成

高洛峰
リリース: 2016-12-07 13:50:48
オリジナル
1615 人が閲覧しました

昨日家でテレビを見ていたとき、背景全体がぼやけているポップアップ効果に気づきました。この効果は単色や透明よりもはるかに優れていると思い、いくつかのインターフェイスを続けて試しました。最終的に css で効果が得られると判断したので、今朝早く会社に来て急いで検索しましたが、互換性は非常に悪いですが、CSS 属性 1 つだけで実現できます。私はあまりにも知識が少ないと感じました~~

まず、ポップアップ ウィンドウの実装を思い出してください。通常、ポップアップ ウィンドウ レイヤー (popus) とマスク レイヤー (マスク) の 2 つのレイヤーに分かれています。私はこれら 2 つのレイヤーに慣れています。すべての要素が固定位置に設定されています。実際に試してみると、絶対値との具体的な違いがわかります。マスク レイヤーには多くの必要はありませんが、画面全体をカバーできるようにそのプロパティを次のように設定します。

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}
ログイン後にコピー

Popus レイヤーは少し面倒です。ここでは 2 つの実装方法があります

1. 次のような既知のサイズのポップアップ ウィンドウは、主に上、左、負のマージンを通じて実装されます。

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}
ログイン後にコピー

2. ポップアップウィンドウのサイズが不明な場合は、ポップアップウィンドウのレイヤーの幅と高さをjsで取得し、上記の設定を行いますが、ここでは説明しません。

3. css3 がサポートされている場合、ポップアップ ウィンドウの幅と高さを知る必要はありません。次のように設定できます

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
ログイン後にコピー

これは主に、translate 属性を通じて設定されます。 value のパーセントは幅と高さに対する相対値なので、原理的には最初の書き込み方法と同じですが、より便利に使用できます。 topicトピックに戻って、メイントピックに戻りましょう。これは、要素がPSでガウスぼかし効果を達成できるようにすることです。

ここに CSS 属性があります: filter ここでのフィルターは IE のフィルターではないことに注意してください。興味がある場合は、ここをクリックしてください。今日はぼかしの 1 つだけについて説明します。まず、以下のプレビューをご覧ください

PS: 現在、この属性は Webkit ブラウザーのみをサポートしているため、css3 属性を直接使用しており、効果も Webkit ブラウザーで表示する必要があります。

JS+CSS3でクールなポップアップエフェクトを作成 素晴らしいと思いませんか? この行は、webkit-filter:blur(8px) です。もちろん、日常のプロジェクトでは、ぼかしの度合いを表すピクセル値を追加することもできます。ページをより鮮明にするためのアニメーション。この場合の完全なコードは次のとおりです。

<div class=&#39;bg&#39;>
 <img  src=&#39;bg.jpg&#39; / alt="JS+CSS3でクールなポップアップエフェクトを作成" >
</div>
<div class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <div>
 <div class=&#39;left btn &#39;>确实不错</div>
 <div class=&#39;right btn&#39;>也就那样</div>
 </div>
</div>
ログイン後にコピー

css:

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}
ログイン後にコピー

js:

$(&#39;.bg&#39;).on(&#39;click&#39;,function(){
 console.log(98)
 $(this).addClass(&#39;blur&#39;);
 $(&#39;.popus&#39;).show();
})
$(&#39;.btn&#39;).on(&#39;click&#39;,function(){
 $(&#39;.bg&#39;).removeClass(&#39;blur&#39;);
 $(&#39;.popus&#39;).hide();
})
ログイン後にコピー

これで終わりですか?明らかにそうではありません。コンソールを見てください

JS+CSS3でクールなポップアップエフェクトを作成 ウィンドウをポップアップするとき、他のレイヤーのクリック イベントを無効にする必要がありますが、他のレイヤーをぼかしたにもかかわらず、対応するイベントを無効にしていないことがわかりました。もちろん、解決策も非常に簡単です。背景色なしでマスク レイヤーを追加し、それをページ上で覆うことで、マスク レイヤーをクリックするたびに、基になるイベントがトリガーされなくなります。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート