基於另一個元素的淡入淡出在滾動元素周圍放置邊框

Question

我正在使用代碼塊創建 markdown 報告。 我有一個使用代碼塊創建的 plot。 當您上下滾動頁面時，plot 會淡入。 我想在 plot 淡入時在代碼塊周圍放置一個邊框，並在 plot 淡出時移除邊框。 從本質上講，這突出了創建正在淡入的 plot 的代碼。我已經給出了創建 class “prefade”的繪圖的特定代碼塊。 這就是我目前所擁有的：

$(window).scroll(function() {
  // Setting: Start fading halfway up the page
  var startPos = 0.62;
  
  var endPos = 0.9
  
  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();
    
    var objectBottom = $(this).offset().top + $(this).outerHeight();
    
    // Get viewport height
    var vh = $w.height();

    if (pos < vh * startPos) {
      // If element has past the starting threshold, we fade it
      $(this).find('pre').addClass("focus")
    } else { 
      $(this).find('pre').removeClass("focus");
    }
    
  });
});

 $(window).scroll(function() { var startPos = 0.62; 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(); var objectBottom = $(this).offset().top + $(this).outerHeight(); // Get viewport height var vh = $w.height(); if (pos < vh * startPos) { $(this).find('pre').addClass("focus") } else { $(this).find('pre').removeClass("focus"); } }); });

 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: 0; width: 600px; z-index: 9; } #scatterplot { position: relative: top; -60vh: z-index; -1 } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity. 1, } to { opacity. 0: } };fadeIn: .fadeOut { animation-fill-mode; forwards. animation-duration: 0;7s. }:fadeOut { animation-name; fadeOut: };fadeIn { animation-name: fadeIn; } #scatterplotdetail { position. relative: top; -90vh: };focus { border-width: 8px, border-style, solid; border-color: rgb(200, 200, 106); }

 <div> dummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy textdummy text </div> <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 fadeOut"> <p><img src="https://i.imgur.com/Kdarrua.png" width="900" height="550"></p> </div> <script type="text/javascript"> const observerOptions = { root: null, rootMargin: "0px", threshold: 0.7 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // fade in observed elements that are in view entry.target.classList.replace('fadeOut', 'fadeIn'); entry.target.classList.replace() } else { // fade out observed elements that are not in view entry.target.classList.replace('fadeIn', 'fadeOut'); } }); }, observerOptions); const fadeElms = document.querySelectorAll('.fade'); fadeElms.forEach(el => observer.observe(el)); $(window).scroll(function() { // Setting: Start fading halfway up the page var startPos = 0.62; var endPos = 0.9 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(); var objectBottom = $(this).offset().top + $(this).outerHeight(); // Get viewport height var vh = $w.height(); if (pos < vh * startPos) { // If element has past the starting threshold, we fade it $(this).find('pre').addClass("focus") } else { $(this).find('pre').removeClass("focus"); } }); }); </script> <div class="plotDetail" id="scatterplotdetail"> <p>The code above creates a scatter plot. The graph shows that reviews have become more condensed over time. Initially, the reviews were more spread out earlier on. The early years had a lot of 1 and 2 star ratings. Conversely, there hasn't been a 5 star review since 2007.</p> <p>Interestingly, the cocoa percentage does not appear to have any correlation with the rating given.</p> <div class="triangle" style="color:#ffffff" id="corner"> </div> </div> </div>

小提琴

到目前為止的樣子：這里

Answer 1

我只更改了 Fiddle 中 CSS 的其余部分。 現在您可以通過時間和緩動進行微調！

主要邏輯：為您的<pre>定義一個“透明”邊框，使用border-color: rgba(200,200,106,0) （alpha 值 0）並將顏色轉換為完全可見border-color: rgba(200,200,106,1) （alpha 值1) 當<pre>變成.focus 。 效果很好，它可以防止跳動作為副作用......（小提琴）

從

.focus {
    border-width: 8px;
    border-style: solid;
    border-color: rgb(200, 200, 106);
}

至

pre {
    border-width: 8px;
    border-style: solid;
    border-color: rgba(200, 200, 106,0);
    transition: border-color 1s ease-in-out;
  
}
.focus {
    border-color: rgba(200, 200, 106,1);
}