View Full Version : Make Layers Appear Over Time
TicTacWoe
12-20-2009, 04:36 PM
Hello, I'm looking to have a couple of layers containing images appear one by one in a couple of seconds when the page on the site loads.
I used to use Dreamweavers timeline for this but they got rid of this feature for the cs4 version as it wasnt supported by all browsers and was unreliable.
All I want is for several layers to appear incrementally over time, if there a simple script/extension or whatever that can do this for me please let me know.
Thanks
I can make this for you - but there are a few things. You cant just take it directly from one psd file, or from one layered file, it would have to be many files. For example, there would be layer1.png, layer2.png, layer3.png all coming in one second apart from each other. Now I need to know if you want any special effect as it comes in? (fadein, slidein?). Thats all! Once I know the answer, I will begin. :D
TicTacWoe
12-20-2009, 05:25 PM
Hi Nile thanks so much for offering to help. Yeah it's fine about the multiple files, I already have them as separate Gif files each within it's own layer.
As for the special effects a brief fade could be nice but it's not essential, they're going to appear quite quickly (like half a second after one another or something) so I'm not sure if the fade would be that noticable anyway.
Thanks again Nile I look forward to seeing what you can do!
HTML page:
<html>
<head>
<title>Appearing Layers</title>
<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<script type="text/javascript">
var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 200px;
height: 200px;
background-color: #ddd;
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<div id="image"><noscript><img src="noscript.png" /></noscript></div>
</body>
</html>
Script.js:
// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs){
var count = imgs.length;
var a = setInterval(function(){
var image = document.createElement('img');
image.style.position = "absolute";
image.src = imgs.shift();
document.getElementById(id).appendChild(image);
count--;
if(count == 0){ clearInterval(a); }
}, 500);
};
Tell me if you don't understand something.
TicTacWoe
12-20-2009, 08:36 PM
Cheers mate, I'll try that out in Dreamweaver when I get home.
I'm a bit confused about the js though, what exactly do I change to choose the time it takes for the images to apear? Maybe you could show me a quick example of what it would look like to have them appear one by one every half a second when the page loads.
Thanks again, if you have a website or something I'll add you to the links page on my site.
Ok, since your confused I'm going to go over this slower:
Step 1: Make a file called script.js and int hat, put this code (copy and paste it)
// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs){
var count = imgs.length;
var a = setInterval(function(){
var image = document.createElement('img');
image.style.position = "absolute";
image.src = imgs.shift();
document.getElementById(id).appendChild(image);
count--;
if(count == 0){ clearInterval(a); }
}, 500);
};
Change the highlighted to how many seconds multiplied by 1000.
Step 2: In the <head> part of your document, paste this code:
<title>Appearing Layers</title>
<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<script type="text/javascript">
var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 200px;
height: 200px;
background-color: #ddd;
}
</style>
But replace the highlighted with your images, and replace the red with the total width of your image(in pixels).
Step 3:
Place the following code where you want your image to be:
<div id="image"><noscript><img src="noscript.png" /></noscript></div>
But replace the red with an image that should show up if they dont have javascript enabled.
Good luck! Tell me if you have any issues.
TicTacWoe
12-20-2009, 09:10 PM
Thats great, I understand it fine now and I'm pretty certain that I can implement this correctly now, I'll let you know how I get on when I try it out.
TicTacWoe
12-23-2009, 02:36 AM
ok Nile I tested it out and it works just as you said.
However I have one problem, I wanted to add a swap image behavior to those images that load over time (so that once loaded when moused over they will swap with another static image).
I had this working fine when using the timeline method in the old dreamweaver but I'm not sure how to add behaviors to the loaded images using your script.
It's probably something quite simple, let me know if you can help me out
thanks
Do you want it to come in layer by layer, just like when the page loads?
TicTacWoe
12-23-2009, 02:53 AM
yes just on load and then theyre just like static no loops or anything.
TicTacWoe
12-23-2009, 02:57 AM
sorry i didnt get what you mean at first there, no i just want to be able to add a mouseover swap image behavior to the images once they have been loaded
Change script.js to:
// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs, swap){
var count = imgs.length;
var a = setInterval(function(){
var image = document.createElement('img');
image.style.position = "absolute";
image.src = imgs.shift();
document.getElementById(id).appendChild(image);
count--;
if(count == 0){ clearInterval(a); }
}, 500);
var swapped = document.createElement('img');
swapped.style.position = "absolute";
document.getElementById(id).onmouseover = function(){
document.getElementById(id).appendChild(swapped);
};
document.getElementById(id).onmouseout = function(){
document.getElementById(id).removeChild(swapped);
};
};
And then, on your html page, change:
loadimg("image", effect);
To:
loadimg("image", effect, "swap.png");
Change swap.png to your image you want it to be swapped with.
Also, did you want it to go back when you move your mouse away? If not, please tell me, because thats what the above code is aiming to do.
This code is not tested.
TicTacWoe
12-23-2009, 03:12 AM
Many thanks again Nile, I'll try that out now and yes I did want it to go back to the original image on mouseout so in theory the code should be fine.
cheers
Ok, tell me your results. :D
TicTacWoe
12-23-2009, 03:36 AM
hmmm so far that isnt working and I've noticed another problem I'm having with this in general. So far I'd only tested this with loaded one image but when I load more than one the second, third images etc just appear on top of the first one. What is it I'm supposed to do to get the images to appear within different layers on the page.
Sorry about all the questions/confusion as you probably guessed im not very experienced with coding!
Ok let me test out the code. For your second problem, do you mean when you try to add another one of these to your pages?
TicTacWoe
12-23-2009, 03:48 AM
no I mean I don't know how to work it so that the first image appears within one layer, the second image appears within a different layer and so on.
what I do is replace the names in the following code with the paths of my own files (this is working fine)
new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
but I dont quite get what I'm supposed to do nextso that image1 will load in a different layer to image2 as it is theyre all loading on top of one another in the same layer which has the ID 'image'
TicTacWoe
12-23-2009, 03:53 AM
is it simply that I need to put the following code in each time for each image that appears?
loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 200px;
height: 200px;
background-color: #ddd;
}
and then give each layer the same ID as the bit after loading in the above example.
TicTacWoe
12-23-2009, 04:02 AM
maybe if you could show me an example which has images being loaded in two or three layers I'd understand this better but right now im very confused!!
Replace image1.png with he first layer.. Replace image2.png with the second layer.... etc
TicTacWoe
12-23-2009, 04:20 AM
oh so its thr layers themselves I should be replacing it with? I thought i should be putting in the names of the actual files that should go within those layers (if you get me). So instead of image1.png or whatever I should actually put the name of the layer (which itself would contain the image I want to load) in it's place?
TicTacWoe
12-23-2009, 04:34 AM
very sorry about all this hassle Nile but bare with me here :)
heres the code from a test page using my images and your code---
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>Appearing Layers</title>
<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<script type="text/javascript">
var effect = new Array('images/a.gif', 'images/c.gif', 'images/d.gif');
loadimg("image", effect);
</script>
<style type="text/css">
#image {
width: 80px;
height: 80px;
background-color: #ddd;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
</style>
</head>
<body>
<div id="image"></div>
</body>
</html>
now this gives me one layer in which all three images in the array appear over time on top of one another. What do I need to do so that the first image only appears in that layer and then the second appears in a new layer etc
I know I'm being really stupid with this but its verrrrry late in Ireland!
Umm... okay, say you have 5 layers:
layer1.png - Layer 1
layer2.png - Layer 2
layer3.png - Layer 3
layer4.png - Layer 4
layer5.png - Layer 5
Then it should be:
var effect = new Array('layer1.png', 'layer2.png', 'layer3.png', 'layer4.png', 'layer5.png');
TicTacWoe
12-23-2009, 04:44 AM
i understand that part, but they still all load in the same position for me
Do you mean the same spot? This is because there not positioned right in the image, if you don't understand that, I'll explain it tomorrow. :D
TicTacWoe
12-23-2009, 04:49 AM
well yeah, what I have working is the following- the page loads, the images/layers appear one by one fine and in the right order etc but they all just appear right on top of each other, i want them to appear in different positions on the page.
TicTacWoe
12-23-2009, 02:13 PM
ok I uploaded a very simple test of the problem here http://clockworkorchestra.com/
as you can see the 3 images load one after another fine but I can't control where they upload to. I want them to load into different positions on the page but using the code you gave me they all load into the div named "image" on top of one another and no matter what I've tried I havn't been able to get them to load one by one into separate layers.
I've also uploaded an example of what Im trying to achieve here (this is using timelines from an old version of dreamweaver which are no longer supported by all browsers or even in dreamweaver anymore) http://clockworkorchestra.com/nu.html
so here you see the three images appear one by one over time in different layers.
I know this is something really simple and I'm being stupid here but I havn't really done something like this on a website before:o
TicTacWoe
12-23-2009, 08:17 PM
could anyone explain this to me? sorry bout the quick bump but im kinda in a rush to get this thing done
Sorry for the delay, give me a few minutes and I'll post the code =/.
script.js
// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs){
var count = imgs.length;
var a = setInterval(function(){
var image = document.createElement('img');
image.src = imgs.shift();
document.getElementById(id).appendChild(image);
count--;
if(count == 0){ clearInterval(a); }
}, 500);
};
HTML:
<html>
<head>
<title>Appearing Layers</title>
<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<style type="text/css">
#image {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<div id="image"><noscript><img src="noscript.png" /></noscript></div>
</body>
<script type="text/javascript">
var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
loadimg("image", effect);
</script>
</html>
Now, which layer do you want to be swapped?
TicTacWoe
12-23-2009, 08:55 PM
wow thanks, I tried that and now the images appear one by one in a row which is great! The only thing is how do I space the images out like I have in the second link I posted ie. is there a way to have say 5 or 10 pixels between each image?
As for the swapping of the images in theory I'd like to be able to swap any of the images on mousover, with the new image appearing directly on top of the original.
For image spacing, change:
<style type="text/css">
#image {
background-color: #ddd;
}
</style>
to:
<style type="text/css">
#image {
background-color: #ddd;
}
#image img {
padding-right: 10px;
}
</style>
For swapping, give me a while and I'll make the code.
TicTacWoe
12-23-2009, 09:11 PM
thanks again the padding worked great!
Great!
Heres the HTML:
<html>
<head>
<title>Appearing Layers</title>
<script type="text/javascript" src="script.js">
// Made by Nile, http://beta.unlinkthis.net
// DO NOT REMOVE THIS LABEL
</script>
<style type="text/css">
#image {
background-color: #ddd;
padding-right: 10px;
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<div id="image"><noscript><img src="noscript.png" /></noscript></div>
</body>
<script type="text/javascript">
var effect = new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png');
var swap = new Array('image1_i.png', 'image2_i.png', 'image3_i.png', 'image4_i.png', 'image5_i.png');
loadimg("image", effect, swap);
</script>
</html>
Change the swap variable.
And heres script.js:
// Made by Nile, http://beta.unlinkthis.net
//DO NOT REMOVE THIS LABEL
var loadimg = function(id, imgs, swap){
var count = imgs.length;
var a = setInterval(function(){
var image = document.createElement('img');
var images = new Array(imgs.shift(), swap.shift());
image.src = images[0];
image.onmouseover = function(){ this.src = images[1]; };
image.onmouseout = function(){ this.src = images[0]; };
document.getElementById(id).appendChild(image);
count--;
if(count == 0){ clearInterval(a); }
}, 500);
};
TicTacWoe
12-23-2009, 09:44 PM
hurrah! the swap variable worked perfectly! Now, just one or two minor things and then I'll leave you alone;)
Firstly, is there something a bit wrong with this part of your code-
#header hi a {
display: block;
width: 300px;
height: 800px;
}
because no matter what I change those pixel values to nothing happes.
Basically all I need to know how to do now is to change the overall size and position of the div that contains all of the array images.
EDIT- actually that #header part is nothing to do with what I'm doing is it, it's justpart of your example. Still, can't figure out how to change the size and position of the image layer that contains everything else.
Yes.
#header hi a {
display: block;
width: 300px;
height: 800px;
}
What does hi mean?
TicTacWoe
12-23-2009, 10:34 PM
sorry don't know why I pasted it with hi it was in it's orignal format that I was curious about.
But I don't get what that part does
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
is the header anything to do with the image array or is it something else altogether.
I tried putting the image div inside another layer and using that layer to control the position and size of the image div but is there a better way of controlling these things?
TicTacWoe
12-23-2009, 11:14 PM
Actually as well as the positioning/sizing thing I do have one final-final request which hopefully is possible.
The way your script works means that all of the images in the array appear one by one horizontally. But on one of the pages on my site i need the images to appear in three horizontal rows, so the first row appears one by one then the second row and then the third. So would it be possible to add two more arrays that have different positions on the page to the first (ie lower down the page) that load once the previous row is completed?
Or maybe all the images could still be in the same array but somehow the second set of images are positioned lower and the same for the third?
sorry for so many questions, all of this was so easily achieved with dreamweavers timeline:(
Why don't you keep using the dreamweaver time line? I'll get the code to you soon.
TicTacWoe
12-23-2009, 11:35 PM
well dreamweaver got rid of it either on cs4 or the previous version and I currently only have cs4 adobe products having previously used mx.
In any case, dreamweaver's timeline isn't supported by all current browsers. Animations like this done the current version of opera simply won't appear for example.
I still dont think they should have removed the feature though.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.