问题描述
我正在尝试制作一个动画,当我们向下滚动时,图像从灰度变为彩色,图像保持原位直到完全着色,彩色部分的高度是滚动量,剩余部分是灰色.我已经尝试了以下代码,但在这里,图像一下子变成了彩色。
可以使用的技巧之一是将灰度图像置于彩色图像上并更改我无法实现的灰度图像的高度。
const targets = document.querySelectorAll(".colored");
const isAnimated = "is-animated";
const threshold = 0.5;
function callback(entries,observer) {
entries.forEach((entry) => {
const elem = entry.target;
if (entry.intersectionRatio >= threshold) {
elem.classList.add(isAnimated);
//observer.unobserve(elem);
} else {
elem.classList.remove(isAnimated);
}
});
}
const observer = new IntersectionObserver(callback,{ threshold });
for (const target of targets) {
observer.observe(target);
}
/* RESET RULES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--blue: #0a0c10;
--gray: #ededed;
--white: white;
--red: red;
}
* {
padding: 0;
margin: 0;
Box-sizing: border-Box;
}
a {
text-decoration: none;
color: inherit;
}
body {
font-size: 20px;
font-family: sans-serif;
text-align: center;
}
.cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vh-100 {
height: 100vh;
}
.hero-section {
display: flex;
align-items: center;
justify-content: center;
}
.hero-section p {
margin-top: 5px;
}
.hero-section,.page-footer {
color: var(--white);
background: var(--blue);
}
.section h2 {
font-size: 2.5rem;
padding: 10vh;
}
.section h2 a {
Box-shadow: inset 0 -5px 0 var(--blue);
transition: all 0.15s;
}
.section h2 a:hover {
color: var(--white);
Box-shadow: inset 0 -45px 0 var(--blue);
}
.img-wrapper {
display: grid;
}
.img-wrapper div {
grid-column: 1;
grid-row: 1;
}
/* CLIP-PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grayscale {
filter: grayscale(1);
background-color: var(--gray);
}
.colored {
clip-path: inset(0 100% 0 0);
transition: all 1.5s ease-in-out;
}
.colored[data-animation="to-left"] {
clip-path: inset(0 0 0 100%);
}
.colored[data-animation="to-top"] {
clip-path: inset(0 0 100% 0);
}
.colored[data-animation="to-bottom"] {
clip-path: inset(100% 0 0 0);
}
.colored.is-animated {
clip-path: inset(0);
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
font-size: 18px;
padding: 10vh;
}
.page-footer p + p {
margin-top: 5px;
}
.page-footer span {
color: var(--red);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="hero-section vh-100">
<div>
<h1>Grayscale to Color Effect</h1>
<p>? Scroll down</p>
</div>
</section>
<section class="section">
<h2>by <a href="https://pixabay.com/el/users/mark_mook_fotografie-3466195" target="_blank">Mark Mook</a></h2>
<div class="vh-100 img-wrapper">
<div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
<div class="colored cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait1.jpg); background-position: top;"></div>
</div>
</section>
<section class="section">
<h2>by <a href="https://pixabay.com/el/users/bessi-909086" target="_blank">Besi</a></h2>
<div class="vh-100 img-wrapper">
<div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
<div class="colored cover" data-animation="to-left" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait2.jpg); background-position: top;"></div>
</div>
</section>
<section class="section">
<h2>by <a href="https://pixabay.com/el/users/nastya_gepp-3773230" target="_blank">Anastasia Gepp</a></h2>
<div class="vh-100 img-wrapper">
<div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
<div class="colored cover" data-animation="to-bottom" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait3.jpg); background-position: top;"></div>
</div>
</section>
<section class="section">
<h2>by <a href="https://pixabay.com/el/users/doanme-4958892" target="_blank">Doris Metternich</a></h2>
<div class="vh-100 img-wrapper">
<div class="grayscale cover" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
<div class="colored cover" data-animation="to-top" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/portrait4.jpg);"></div>
</div>
</section>
<footer class="page-footer">
<p>
<small>Images from <a href="http://pixabay.com/" target="_blank">Pixabay</a>
</small>
</p>
<p>
<small>Made with <span>❤</span> by <a href="https://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</p>
</footer>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)