基于另一个元素的淡入淡出在滚动元素周围放置边框

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);
}