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

Question

我正在创建一个带有代码块的降价报告。我有一个使用代码块创建的图。当你上下滚动页面时，绘图会逐渐消失。我想在绘图淡入时在代码块周围放置一个边框，并在绘图淡出时删除边框。从本质上讲，这突出了创建逐渐消失的绘图的代码；预制"；。这就是我现在拥有的：

$(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>

Fiddle

到目前为止是什么样子：这里是

Answer 1

我只更改了Fiddle中CSS的其余部分。现在，您可以通过计时和放松来进行微调！

主要逻辑：用border-color: rgba(200,200,106,0)(alpha值0(为<pre>定义"透明"边界，并在<pre>变为.focus时将颜色转换为完全可见的border-color: rgba(200,200,106,1)(alpha值1(。效果很好，它可以防止跳跃作为副作用。。。(Fiddle(

来自

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