Page 1 of 5 123 ... LastLast
Results 1 to 10 of 41

Thread: Make Layers Appear Over Time

  1. #1
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Make Layers Appear Over Time

    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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    TicTacWoe (12-23-2009)

  4. #3
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    HTML page:
    Code:
    <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:
    Code:
    // 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.
    Last edited by Nile; 12-20-2009 at 08:54 PM.
    Jeremy | jfein.net

  6. #5
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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)
    Code:
    // 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:
    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:
    Code:
    <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.
    Jeremy | jfein.net

  8. #7
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #8
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Ok - great. Good luck.
    Jeremy | jfein.net

  10. #9
    Join Date
    Nov 2008
    Posts
    43
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #10
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Do you want it to come in layer by layer, just like when the page loads?
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •