I have looked for an answer for about 2 hours without any success: How do you make an animation that change the opacity of images in a grid randomly with a slow fadein ?
我已经找了大约2个小时没有任何成功的答案:你如何制作一个动画,用慢速淡化随机改变网格中图像的不透明度?
3 个解决方案
#1
1
It's not the most elegant code since I did it in like 5 minutes, but you may be able to get the idea and improve it:
这不是最优雅的代码,因为我在5分钟内完成了它,但你可能会得到这个想法并改进它:
jQuery
$(function(){
setInterval(function(){
var i = Math.floor(Math.random() * 10) + 1;
$("[data-highlight=1]").attr("data-highlight", "0").animate({
opacity: 0.2
}, 1000);
$("#photo-" + i).attr("data-highlight", "1").animate({
opacity: 1
}, 1000);
}, 3000);
});
CSS
.photo {
width: 150px;
height: 150px;
background-color: #F00;
font-size: 2em;
color: #FFF;
float: left;
opacity: 0.2;
}
HTML
<div class="photo" id="photo-1" data-highlight="0">DIV</div>
<div class="photo" id="photo-2" data-highlight="0">DIV</div>
<div class="photo" id="photo-3" data-highlight="0">DIV</div>
<div class="photo" id="photo-4" data-highlight="0">DIV</div>
<div class="photo" id="photo-5" data-highlight="0">DIV</div>
<div class="photo" id="photo-6" data-highlight="0">DIV</div>
<div class="photo" id="photo-7" data-highlight="0">DIV</div>
<div class="photo" id="photo-8" data-highlight="0">DIV</div>
<div class="photo" id="photo-9" data-highlight="0">DIV</div>
<div class="photo" id="photo-10" data-highlight="0">DIV</div>
Here is a demo: https://jsfiddle.net/ymu3ghgk/
这是一个演示:https://jsfiddle.net/ymu3ghgk/
#2
1
The code from the webpage you linked is doing the following (I modified it a little bit for simplicity's sake):
您链接的网页中的代码正在执行以下操作(为简单起见,我对其进行了一些修改):
$(function(){
setInterval(setImageOpacity, 2000); // Every 2 seconds call function setImageOpacity()
});
function setImageOpacity() {
var images = $('#careerImageTable img'); // Gets all images from the grid
var currentIndex = -1;
$.each(images, function (index, item) { // Loops through each image
if ($(item).css('opacity') == 1) { // Checks the opacity of the current image
currentIndex = index; // If opacity == 1 then thats the current index
return false;
}
});
var nextIndex = currentIndex;
while (nextIndex == currentIndex) {
nextIndex = Math.floor(Math.random() * images.length); // Will loop until a different index is found
}
images.eq(currentIndex).fadeTo(1000, 0.3); // The opacity animations
images.eq(nextIndex).fadeTo(1000, 1);
}
#3
0
Just break down the component and you should be able to figure out the logic:
只需分解组件,您就应该能够找出逻辑:
- 9 avatars in a 3x3 grid.
- Approx. every 3 seconds, there's a new "active" one
- Everything that is not active is faded out
3个3x3网格中的9个头像。
约。每隔3秒,就有一个新的“活跃”的
一切不活跃的东西都会消失
So, we can search how to make a 3x3 grid in css, figure out how to rig a 3 second timer with Javascript to change an element's class, and with a class toggle the fade between an active and non-active element.
因此,我们可以搜索如何在css中创建3x3网格,找出如何使用Javascript更改元素类的3秒计时器,并使用类切换活动元素和非活动元素之间的淡入淡出。
If you can put all that together, you got your component!
如果你把所有这些放在一起,你就得到了你的组件!
#1
1
It's not the most elegant code since I did it in like 5 minutes, but you may be able to get the idea and improve it:
这不是最优雅的代码,因为我在5分钟内完成了它,但你可能会得到这个想法并改进它:
jQuery
$(function(){
setInterval(function(){
var i = Math.floor(Math.random() * 10) + 1;
$("[data-highlight=1]").attr("data-highlight", "0").animate({
opacity: 0.2
}, 1000);
$("#photo-" + i).attr("data-highlight", "1").animate({
opacity: 1
}, 1000);
}, 3000);
});
CSS
.photo {
width: 150px;
height: 150px;
background-color: #F00;
font-size: 2em;
color: #FFF;
float: left;
opacity: 0.2;
}
HTML
<div class="photo" id="photo-1" data-highlight="0">DIV</div>
<div class="photo" id="photo-2" data-highlight="0">DIV</div>
<div class="photo" id="photo-3" data-highlight="0">DIV</div>
<div class="photo" id="photo-4" data-highlight="0">DIV</div>
<div class="photo" id="photo-5" data-highlight="0">DIV</div>
<div class="photo" id="photo-6" data-highlight="0">DIV</div>
<div class="photo" id="photo-7" data-highlight="0">DIV</div>
<div class="photo" id="photo-8" data-highlight="0">DIV</div>
<div class="photo" id="photo-9" data-highlight="0">DIV</div>
<div class="photo" id="photo-10" data-highlight="0">DIV</div>
Here is a demo: https://jsfiddle.net/ymu3ghgk/
这是一个演示:https://jsfiddle.net/ymu3ghgk/
#2
1
The code from the webpage you linked is doing the following (I modified it a little bit for simplicity's sake):
您链接的网页中的代码正在执行以下操作(为简单起见,我对其进行了一些修改):
$(function(){
setInterval(setImageOpacity, 2000); // Every 2 seconds call function setImageOpacity()
});
function setImageOpacity() {
var images = $('#careerImageTable img'); // Gets all images from the grid
var currentIndex = -1;
$.each(images, function (index, item) { // Loops through each image
if ($(item).css('opacity') == 1) { // Checks the opacity of the current image
currentIndex = index; // If opacity == 1 then thats the current index
return false;
}
});
var nextIndex = currentIndex;
while (nextIndex == currentIndex) {
nextIndex = Math.floor(Math.random() * images.length); // Will loop until a different index is found
}
images.eq(currentIndex).fadeTo(1000, 0.3); // The opacity animations
images.eq(nextIndex).fadeTo(1000, 1);
}
#3
0
Just break down the component and you should be able to figure out the logic:
只需分解组件,您就应该能够找出逻辑:
- 9 avatars in a 3x3 grid.
- Approx. every 3 seconds, there's a new "active" one
- Everything that is not active is faded out
3个3x3网格中的9个头像。
约。每隔3秒,就有一个新的“活跃”的
一切不活跃的东西都会消失
So, we can search how to make a 3x3 grid in css, figure out how to rig a 3 second timer with Javascript to change an element's class, and with a class toggle the fade between an active and non-active element.
因此,我们可以搜索如何在css中创建3x3网格,找出如何使用Javascript更改元素类的3秒计时器,并使用类切换活动元素和非活动元素之间的淡入淡出。
If you can put all that together, you got your component!
如果你把所有这些放在一起,你就得到了你的组件!