javascript - CSS 动画 - 带有图像的垂直选取框 - 每次特定图像变得可见时都会淡入新的背景颜色
问题描述
我有一个带有静态内容的垂直选框。我正在尝试实现以下 JavaScript 注释中概述的内容 - 根据刚刚进入视图的图像淡化为新的背景颜色。
笔在这里:https ://codepen.io/TraeRegan/pen/mdbKRXY
我尝试了各种 jQuery 插件,这些插件适用于用户在某些元素进入视口时滚动触发动画,但我无法让它们在 CSS 动画元素变得可见时检测它们。
JavaScript
$(function() {
var image1_bg_color = '#317a5c';
var image2_bg_color = '#dedede';
var image3_bg_color = '#ff0000';
var image4_bg_color = '#000000';
// pseudo-code...
// When #image2 becomes visible fade .container bg color from image1_bg_color to image2_bg_color
// When #image3 becomes visible fade .container bg color from image2_bg_color to image3_bg_color
// When #image4 becomes visible fade .container bg color from image3_bg_color to image4_bg_color
// When #image1 re-enters view fade .container bg color from image4_bg_color to image1_bg_color
// etc.
});
HTML
<div class="container">
<div class="marquee">
<img src="https://dummyimage.com/320x240/000/fff.gif&text=1" id="image1">
<p>This is some text about image 1.</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=2" id="image2">
<p>This is some text about image 2.</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=3" id="image3">
<p>This is some text about image 3</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=4" id="image4">
<p>This is some text about image 4.</p>
</div>
</div>
CSS
.container {
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
background-color: #317a5c;
}
.marquee {
width: 320px;
top: 480px;
position: relative;
box-sizing: border-box;
animation: marquee 30s linear infinite;
margin: 0 auto;
text-align: center;
color: #ffffff;
}
@keyframes marquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-150%);
}
}
解决方案
您必须在带有属性的img
标签中分配框背景颜色。data
因此,当图像在框中的预期位置时,我们可以获得背景颜色的值。
$(function() {
var boxTop = $('.container').offset().top + ($('.container').innerHeight()/2);
setInterval(function(){
// console.clear();
$('.marquee img').each(function(index, el) {
var imgTop = $(this).offset().top + ($(this).innerHeight()/2);
var boxBg = $(this).attr('data-bgcolor');
// console.log(boxTop, imgTop, imgId);
if(imgTop <= boxTop){
$('.container').css('background-color', boxBg);
}
});
}, 100);
});
.container {
width: 640px;
height: 480px;
margin: 0 auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
background-color: #317a5c;
transition: all 0.5s ease-in-out;
}
.marquee {
width: 320px;
top: 480px;
position: relative;
box-sizing: border-box;
animation: marquee 30s linear infinite;
margin: 0 auto;
text-align: center;
color: #ffffff;
}
@keyframes marquee {
from {
transform: translateY(0);
}
to {
transform: translateY(-150%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="marquee">
<img src="https://dummyimage.com/320x240/000/fff.gif&text=image 1" id="image1" data-bgcolor="#317a5c">
<p>This is some text about image 1.</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=image 2" id="image2" data-bgcolor="#dedede">
<p>This is some text about image 2.</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=image 3" id="image3" data-bgcolor="#ff0000">
<p>This is some text about image 3</p>
<img src="https://dummyimage.com/320x240/000/fff.gif&text=image 4" id="image4" data-bgcolor="#000000">
<p>This is some text about image 4.</p>
</div>
</div>
推荐阅读
- python - “关闭和停止”功能在 macOs High Sierra 上的 Canopy 下启动的 jupyter 笔记本中不起作用
- python - psutil.cpu_times() 返回的时间“单位”是多少?
- javascript - 查找未销毁的 Vue 组件
- neo4j - 如何激活 algo.asNode() 函数是 neo4j?
- javascript - 标签不活动时 Chrome 扩展程序代码不再运行?
- python - Python/Django 对象字典和 __dict__ 的奇怪行为
- c# - 使用 Platform Effector 2D 时如何降低 Box Collider 的粘性?
- regex - Powershell用“_”替换像“-anything_”这样的字符串
- java - Java 11 GC 时间戳
- java - 如何使用项目特定的删除按钮删除我的列表视图中的项目?