基于其他元素淡入淡出图像

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

我已经将代码块放在一个div中，div中有一个类"；预制"；，我用它来确定何时淡入和淡出放置在具有类"的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位置来更改'.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