タイムラインの影響の分析

タイムラインは新しいものではありませんが、興味があったので、最近インターネットでより良いと思われるタイムラインのデモを検索し、ダウンロードして研究し、具体的な効果をいくつか修正しました。画像: (このデモは画像のスクロール読み込みを実装しています)

コードアドレス: Responsive Timeline.zip

画像のスクロール読み込みを実装する方法最も重要な部分は次のコード部分です:

(function() {
  $(document).ready(function() {var timelineAnimate;
    timelineAnimate = function(elem) {      return $(".timeline.animated .timeline-row").each(function(i) {var bottom_of_object, bottom_of_window;
        bottom_of_object = $(this).position().top + $(this).outerHeight();
        bottom_of_window = $(window).scrollTop() + $(window).height();if (bottom_of_window > bottom_of_object) {          return $(this).addClass("active");}
      });
    };
    timelineAnimate();return $(window).scroll(function() {      return timelineAnimate();
    });
  });

}).call(this);

?

実際、この例では画像を純粋に動的にロードするのではなく (つまり、後で実装できる HTML タグと DOM 要素を動的に生成します)、元のページの不透明度属性値を非表示にするか 0 から 1 に変更するだけです。上記のコードを見ると、実際にはここに小さなアルゴリズムがあります

if (bottom_of_window > bottom_of_object) 才会去给当前对象（即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果)
我们先讨论下这两个值bottom_of_window和bottom_of_object

bottom_of_window = $(window).scrollTop() + $(window).height();

$(this).addClass("active") を実行すると、次のスタイルが機能することがわかります。

$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离，其实可以理解为页面滚动条拉到某个位置，顶部隐藏的页面内容的高度;

なぜトランジショナルフローティングエフェクトがあるのでしょうか? 実際、それは定義されています

$(window).height()表示当前可视页面区域的高度;

bottom_of_object = $(this).position().top + $(this).outerHeight();

transition（css3タグ）はクラスセレクターを定義します .timeline.animated .timeline-row .timeline-content に含まれるオブジェクトはスタイルの変更には 0.8.s のトランジション効果がかかります。もちろん、今回も変更できます

。

$(this).addClass("active") を実行する前に、タイムラインの左側のオブジェクトのスタイルは次のようになります (ここではタイムラインの左側について話しましょう)

$(this).position().top表示当前元素距离父元素的距离，个人理解为应该就是margintop的值吧，

rreee

実行後のスタイルは次のようになります:

$(this).outerHeight()表示当前元素的高度还有padding+border，但不包括margin
如下盒子模型：

つまり、透明度と左マージンが変更されているため、左から右へ実装効果が生じます。

なぜタイムラインの右側のオブジェクトは右から左へのカットイン効果なのでしょうか? $(this).addClass("active") を実行する前に、まず右側のオブジェクトのスタイルを変更します。タイムラインは

当if (bottom_of_window > bottom_of_object)为真的情况下，我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢，其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果，我们可以看到添加效果是向.timeline.animated .timeline-row添加的，我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果：

$(this).addClass("active") を実行した後、左が 20px、不透明度 (透明度が 0)、

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }
  .timeline.animated .timeline-row:nth-child(odd) .timeline-content {left: -20px; }
  .timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
  .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0; }

左が 0、不透明度 (透明度が 1) であることがわかります。 、トランジションは 0.8 秒なので、右から 1 つあります。左にトランジション エフェクトがあります。

上記のコードには微妙な点があります

.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }

.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

ここで、p:nth-child(2) は 2 番目の子を表します。 pの親要素に要素があり、この子要素がpで、このとき、たまたま2番目の子要素がPなので、表示効果は以下のようになります

以下のように変更すると

opacity: 0;

:; }

この時の効果は以下の通りです

p:nth-child(2)の2番目の子要素がpではなくh2なので、一致する要素が見つからず、背景色が反映されませんでした

まずこれを勉強しましょう。その後、ページ要素をページの早い段階で表示するのではなく、透明度の表示または非表示を制御するだけで、ページ要素を動的に読み込む準備をする時間ができます。

以上がタイムラインの影響の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。