How can I have multiple images fade in and fade out infinitely,in sequence, in different locations (using abolute)?
Question
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>H a l f b l u u d</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>
<style type='text/css'>
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
.rotating-item-wrapper li{
float: left;
list-style-type:none;
width: 148px;
height: 150px;
margin: 0 0 0 6px;
padding: 0;
position: relative;
text-decoration: none;
}
.rotating-item-wrapper li div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rotating-item{
display:block ;
position: absolute;
width: 148px;
height: 150px;
}
.harleypaint {
position: absolute;
left: 850px;
top: -500px;
z-index: 2;
display:block ;
}
.harleydraw {
position: absolute;
left: -125px;
top: -400px;
z-index: 2;
display:block ;
}
.harleyguitar {
position: absolute;
left: -325px;
top: -50px;
z-index: 2;
display:block ;
}
.harleystand {
position: absolute;
left: 450px;
top: 10px;
z-index: 2;
display:block ;
}
.harleyblink {
position: absolute;
left: -100px;
top: -450px;
z-index: 2;
display:block ;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 3000;
//interval between items (in milliseconds)
var itemInterval = 1500;
//cross-fade time (in milliseconds)
var fadeTime = 3000;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1;
currentItem = (currentItem+rand) % numberOfItems;
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
</script>
<style type='text/css'>
.bmenu{
padding: 0px;
margin: 0 0 10px 0;
position: relative;
text-decoration: none;
}
.bmenu li{
font-size: 35px;
display: block;
}
.bmenu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 4px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-decoration: none;
}
.bmenu:hover li a{
text-shadow: 0px 0px 6px #fff;
text-decoration: none;
}
.bmenu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;
text-decoration: none;
}
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$('body').stratus({
auto_play: false,
color: '24242D',
download: false,
links: 'https://soundcloud.com/halfbluud',
random: false
});
});
</script>
</head>
<body>
<table align="center" border="0" style="border-spacing: 0">
<tr>
<td width="598" height="267" > </td>
<td width="169"> </td>
</tr>
<tr>
<div class="mainpage"><td bgcolor="#000000"><center><iframe src="http://player.vimeo.com/video/75329627?title=0&byline=0&portrait=0&color=ffffff&autoplay=1&loop=1" width="600" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</center>
</td>
<td bgcolor="#000000"> <center><ul class="bmenu">
<li><a href="#">About</a></li><br>
<li><a href="#">Tour</a></li><br>
<li><a href="#">Media</a></li><br>
<li><a href="#">Store</a></li><br>
<li><a href="#">News</a></li>
</ul></center>
</td>
</div>
</tr>
</table>
<ul class="rotating-item-wrapper">
<li>
<div class="harleypaint">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleypaint" style="background-color: white;">
</div>
</li>
<li>
<div class="harleydraw">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleydraw" style="background-color: white;">
</div>
</li>
<li>
<div class="harleyguitar">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleyguitar" style="background-color: white;">
</div>
</li>
<li>
<div class="harleystand">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleystand" style="background-color: white;">
</div>
</li><li>
<div class="harleyblink">
<img src="http://www.xaluan.com/images/weathericon/48px/01.png"> </div>
<div class="harleyblink" style="background-color: white;">
</div>
</li>
</ul>
</body>
</html>
I have a website i am making that will have a vimeo video, in the center of the page, and a menu right next to it. So, it will end up being an all white page with this black rectangle in the middle.
The website is for an artist. I am trying to have different images of him working fade in and out in different locations around the black rectangle (for nothing other than aesthetics.). The menu is straightforward and the page is overwhelmingly minimalistic. The pictures fading in and out in different places will give it "something"....a sort of haunting effect.
I have found randomizing code but i dont want one image to be able to appear back-to-back-to-back. I want it to start with one image and move around to the other 5, and then return to the first image. Most things that fade in and out in sequence aren't placed in different positions (which is where im running into problems). I get the code working but then once i place the images around (using 'absolute' positioning) something goes wrong.
When attempting to implement the help that is readily available online, it doesn't do what i want.
I guess i could try to literally just call on altered versions of the same code (just change the absolute position and the timer) per image but that seems unnecessary. It also doesn't seem like i would be able to have that infinitely loop.
I apologize for the lengthiness of my post, but i just want to be clear that the 'easy to find' scripts and posts regarding fade in/out images are not the answer to my problem. I have searched and searched to no avail.
I'm aware that the code i have doesn't work at all, but it's where i got the most recent time i took a swing at it. THANKS ahead of time!
1 answers
solution1
0 2013-10-02 14:23:45
This isn't perfect, but it should get you started. It cycles through an array of images and changes the src on one img tag. It then randomly picks a top and left position and fades the image in and out. http://jsfiddle.net/bhlaird/TH7t7/3/
Javascript:
var images = [{
src: "http://placeKitten.com/g/500/500",
width: 500,
height: 500
}, {
src: "http://placeKitten.com/g/300/300",
width: 300,
height: 300
}, {
src: "http://placeKitten.com/g/600/600",
width: 600,
height: 600
}, {
src: "http://placeKitten.com/g/400/400",
width: 400,
height: 400
}, , {
src: "http://placeKitten.com/g/200/200",
width: 200,
height: 200
}];
var counter = {
val: 0,
top: 0,
left: 0
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function fadeImage(counter) {
counter.top = getRandomInt(0, $("body").height() - images[counter.val].height);
counter.left = getRandomInt(0, $("body").width() - images[counter.val].width);
$("#haunting").fadeTo(2000, 0.3).delay(1000).fadeOut(2000);
$("#haunting").attr({
src: images[counter.val].src
}).css({
top: counter.top,
left: counter.left
});
if (counter.val < images.length) counter.val++;
else counter.val = 0;
}
setInterval(function () {
fadeImage(counter);
}, 6000);
HTML:
<img id="haunting" style="display:none" src="http://placeKitten.com/g/500/200" />
<div id="video">
<img src="http://placekitten.com/200/200" />
<div id="menu">Some text</div>
</div>
CSS:
html, body {
height: 100%;
}
#video {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:200px;
height:210px;
text-align:center;
}
#haunting {
position: absolute;
top:0;
left:0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.