基於另一個元素淡入和淡出圖像

Question

我正在研究 R markdown 腳本。 我想在向下滾動頁面並淡出時淡入圖像。 圖像應該在生成它的代碼塊進入視口時淡入，然后在代碼塊滾動出視口時淡出。

到目前為止，我只能讓它滾動出去，但還沒有弄清楚如何讓它滾動進來。這是我到目前為止所擁有的：

$(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”的 class 的 div 中，我用它來確定何時淡入和淡出放置在帶有 class “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>

到目前為止的樣子

任何人都建議在代碼塊出現時淡入，然后在代碼塊消失時淡出？

Answer 1

我假設您使用.prefade position 來更改 '.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