ホームページ > 記事 > ウェブフロントエンド > ページが読み込まれた後の関連情報のフェードイン効果_html/css_WEB-ITnose
ページが読み込まれた後の関連情報のフェードイン効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:491166ブラウズ
はじめに:
新年が近づき、会社の同僚の中には、新年には帰らないものの、なんだかウキウキしている人もいます。明日仕事が終わったら休みを取ろうと思って。仕事のことはどうでもいい、もう本を読む気分でもないし、今日は上司もいないし、ははは…自分の趣味に没頭しましょう！
Bootstrap の優れたサイトのセレクションを見ていたら、ページ (http://www.mikeinghamdesign.com/) が読み込まれるときにフェードイン効果が見られたので...
レンダリング :
実装アイデア:
ここでの実装では主に margin-top 属性と透明度の不透明度属性を使用します
1. フェードブロックの初期化で特定の上部マージンを設定すると、透明度は完全に透明になります。
2. ページがロードされた後、jquery のアニメーション関数を使用して特定の上部マージンを動的に減算すると、透明度は完全に不透明になります。ここでは、実行時間を 1 秒に設定します (最初に最初のフェードイン ブロックを実行します。表示が成功すると、コールバックは表示される 2 番目のブロックを実行します)。 🎜> 概要:
問題が発生しました: 子要素 div に margin-top を設定するときに、子要素 div には親要素 div からの上マージンがなく、親要素 div からの上部マージンがあることが判明しました。ページ全体の上マージンがあった;
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Mike_Index</title> <style> *{margin:0;padding:0;font-family:'Microsoft YaHei';} a{text-decoration:none;} li{list-style:none;} body {background-color: #1B244B;} .content {height:700px;} .content {overflow:hidden; background-image:url('../Images/mike/heroshot.jpg');background-repeat:no-repeat;background-size:cover;background-position:center center;} .content .opreation{width:500px;margin:260px auto 0 auto;color:#fff;letter-spacing:5px;text-align:center;} .content .opreation .title{letter-spacing:8px;font-size:42px;font-weight:normal;} .content .opreation .text-wrap,.content .opreation button{ margin-top:35px;opacity:0;} .content .opreation .text{letter-spacing:3px;margin-top:5px;} .content .opreation .line{display:block;margin:10px auto 70px auto; width:60px;height:2px;background-color:#0093cb;} .content .opreation button{height:65px;width:210px;line-height:65px;color:#fff;font-size:15px;letter-spacing:3px; background-color:transparent;border:1px solid #fff;border-radius:5px;cursor:pointer; transition:border-color 0.4s linear;} .content .opreation button:hover{border-color:#0093cb;} </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script> $(function () { txtBtnFadeIn(); }); var txtBtnFadeIn = function () { var $txt = $('.content .opreation .text-wrap'); var $btn = $('.content .opreation button'); setTimeout(function () { var animate_para = { 'margin-top': 0, 'opacity': 1 }; $txt.animate(animate_para, 1000, 'linear', function () { $btn.animate(animate_para, 1000); }); }, 500); } </script></head><body> <div class="content"> <div class="opreation"> <h1 class="title">MIKE INGHAM</h1> <div class="text-wrap"> <p class="text">WEB & GRAPHIC DESIGNER</p> <span class="line"></span> </div> <button>GET IN TOUCH</button> </div> </div></body></html> 問題の原因: オンライン Firefox で情報を検索して確認した結果、次の結論に達しました: 2 つのネストされた div の間に空でない要素がない場合親 div と子 div、親要素 div には上部のパディングがなく、親要素には上部の境界線がない場合、2 つの div は上部のマージンが共有されます。 問題の解決策: 通常は overflow: hidden を追加します。 ; 親要素へ; 他のメソッドは上記の理由に応じて解決できます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。