基于另一个元素淡入和淡出图像答案

【问题标题】：Fade image in and fade out based on another element基于另一个元素淡入和淡出图像
【发布时间】：2020-07-19 12:02:13
【问题描述】：

我正在编写一个 R 降价脚本。我想在向下滚动页面并淡出时淡入图像。图像应该在生成它的代码块进入视口时淡入，然后在代码块滚动出视口时淡出。

到目前为止，我只能让它滚动出来，但还没有弄清楚如何让它滚动进来。这是我目前所拥有的：

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.2;
  
  var x = $('.prefade').scrollTop();


  // Cache window object
  var $w = $(window);

  // Basically, we go through each element and check its relative position within the viewport
  $('.prefade').each(function() {

    // Get current relative position in viewport, based on the top edge
    var pos = $(this).offset().top - $w.scrollTop();

    // Get viewport height
    var vh = $w.height();

    if (pos < vh * startPos) {
      // If element has past the starting threshold, we fade it
      $('.fade').css('opacity', pos / (vh * startPos) * 1);
    } else {
      $('.fade').css('opacity', 1);
    }
  });
});

我已将代码块放置在具有“prefade”类的 div 中，我用它来确定何时淡入和淡出放置在具有“fade”类的 div 中的图像。这是它的样子：

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.2;
  
  var x = $('.prefade').scrollTop();


  // Cache window object
  var $w = $(window);

  // Basically, we go through each element and check its relative position within the viewport
  $('.prefade').each(function() {

    // Get current relative position in viewport, based on the top edge
    var pos = $(this).offset().top - $w.scrollTop();

    // Get viewport height
    var vh = $w.height();

    if (pos < vh * startPos) {
      // If element has past the starting threshold, we fade it
      $('.fade').css('opacity', pos / (vh * startPos) * 1);
    } else {
      $('.fade').css('opacity', 1);
    }
  });
});

h1 {
    margin-bottom: 0.3rem;
    font-weight: 800;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#TOC {
    width: 50%;
    background: #eee;
    opacity: 0.7;
    font-size: 0.8em;
    padding: 1em 2em;
    margin: 0 0 0.5em 0.5em;
}

.container-fluid.main-container {
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

.hljs {
    color: #c5c8c6;
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #1d1f21;
}

pre code {
    color: whitesmoke;
    background: inherit;
    white-space: inherit;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 15px;
}

code {
    border-radius: 2px;
    white-space: pre-wrap;
    color: #5e5e5e;
    background: #FFF7DD;
    border: 1px solid #fbf0cb;
    padding: 0 2px;
}

code, kbd, pre, samp {
    font-family: "Consolas", menlo, monospace;
    font-size: 92%;
}

code {
    vertical-align: bottom;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

code {
    font-family: monospace;
}

#body-inner pre {
    white-space: pre-wrap;
}

pre {
    padding: 1rem;
    margin: 2rem 0;
    background: #1d1f21;
    border: 0;
    border-radius: 2px;
    line-height: 1.15;
}

pre {
    position: relative;
    color: #ffffff;
}

pre {
    font-family: monospace;
    white-space: pre-wrap;
}

body {
    color: var(--MAIN-TEXT-color) !important;
}

body {
    font-size: 16px !important;
    color: #323232 !important;
    text-align: justify;
    word-wrap: break-word
}

body {
    font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-weight: 300;
    line-height: 1.6;
    font-size: 18px !important;
}

body {
    background: #fff;
    color: #777;
}

body {
    font-size: 1.05rem;
    line-height: 1.7;
}

:root {
    --MAIN-TEXT-color: #323232;
    --MAIN-TITLES-TEXT-color: #5e5e5e;
    --MAIN-LINK-color: #599a3e;
    --MAIN-LINK-HOVER-color: #3f6d2c;
    --MAIN-ANCHOR-color: #599a3e;
    --MENU-HEADER-BG-color: #74b559;
    --MENU-HEADER-BORDER-color: #9cd484;
    --MENU-SEARCH-BG-color: #599a3e;
    --MENU-SEARCH-BOX-color: #84c767;
    --MENU-SEARCH-BOX-ICONS-color: #c7f7c4;
    --MENU-SECTIONS-ACTIVE-BG-color: #1b211c;
    --MENU-SECTIONS-BG-color: #222723;
    --MENU-SECTIONS-LINK-color: #ccc;
    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;
    --MENU-SECTION-ACTIVE-CATEGORY-color: #777;
    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff;
    --MENU-VISITED-color: #599a3e;
    --MENU-SECTION-HR-color: #18211c;
}


.hljs::selection, .hljs span::selection {
    background: #b7b7b7;
}
.hljs::selection, .hljs span::selection {
    background: #373b41;
}


.triangle {
  position: fixed;
  left:1015px;
  margin-bottom:0;
  top:60vh;
  overflow-x: hidden;
  right: 0;
  width: 0;
  height: 0;
  border-bottom:350px solid #373b41;
  border-left: 350px solid transparent;
  color: #ffffff;
}

.fade {
  position: relative;
  left:600px;
  opacity: 1;
  width:600px;
  z-index: 9;
}

#scatterplot {
  position:relative;
  top: -60vh;
  z-index:-1
}

<div id="plotting-data" class="section level2">
<h2><span class="header-section-number">3.2</span> Plotting data</h2>
<div id="codescatter" class="prefade">
<pre class="r"><code class="hljs">ggplot(chocolate, aes(x= Review.Date, y = Rating, color = Cocoa.Percent)) + 
  geom_point() + 
  geom_jitter() +
  geom_smooth(method = <span class="hljs-string">'lm'</span>)+
  scale_color_continuous(low = <span class="hljs-string">"#b69885"</span>, high = <span class="hljs-string">"#763411"</span>)+
  theme_economist()+
  theme(legend.key.width = unit(<span class="hljs-number">5</span>, <span class="hljs-string">"lines"</span>))</code></pre>
</div>
<div id="scatterplot" class="fade" style="opacity: 1;">
<p><img src="https://i.imgur.com/Kdarrua.png" width="900" height="550"></p>
</div>

<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<p>dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
<div class="triangle" style="color:#ffffff" id="corner">
</div>
</div>

How it looks so far

有人建议在代码块进入视图时淡入，然后在代码块消失时淡出？

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

我假设你使用.prefade位置来改变'.fade'的不透明度，只是对你的js代码做一点改动，希望对你有帮助。

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.2;
  
  var x = $('.prefade').scrollTop();


  // Cache window object
  var $w = $(window);

  // Basically, we go through each element and check its relative position within the viewport
  $('.prefade').each(function() {

    // Get current relative position in viewport, based on the top edge
    var pos = $(this).offset().top - $w.scrollTop();
    

    if (pos < startPos) {
      $('.fade').css('opacity', 1 - Math.abs(pos - startPos) / $(this).height())
    } else {
      $('.fade').css('opacity', 1);
    }
  });
});

获取完整代码https://codepen.io/doichithhe/pen/PoZxazr

【讨论】：

当元素进入视口时，这仍然不会淡入。
那么我认为你应该选择 2 个阈值，顶部和底部。从元素 scrollTop 到 topThreshold，不透明度将从 0 更改为 1。从 bottomThreshold 到（元素 scrollTop + 元素高度），将是 1 到 0。我认为 :)