Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


 

Please wait - we are now uploading and converting your file...

 

Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Make Scrolling Content in your Webpage Without Writing Code

Make Scrolling Content in your Webpage Without Writing Code

Here's a new video tutorial to show you how to use psd2css Online to convert your Photoshop file into a dynamic web page that includes scrolling content. It all happens just from how you name your layers in Photoshop - you don't have to write any code. Watch the video, download the example, and try it yourself.

http://psd2cssonline.com/tutorials/scroll/index.html
http://psd2cssonline.com/tutorials/scroll/scroll.psd

http://psd2cssonline.com/tutorials/hike/index.html
http://psd2cssonline.com/tutorials/hike/hike.psd

Update! - The code for the examples above has been regenerated with a newer version of psd2css Online. Some of the generated code might not match the video.

Pause

Is there some code I can drop in to add a pause when the picture is centered in the frame in the same way that hulu.com has their header scrolling?

Image Slideshow

Hi - is it possible to use this feature to create an image slideshow that doesn't scroll, but just has images crossfading from one image to the next? I hope that makes sense - I want an image to appear, then fade out while the next image fades in. Can this be done with psd2css? Thanks!

Mozilla 1.7.3 for Mac..

This version of Mozilla doesn't display correctly; the scrollframe is not empty, its showing static versions of the thumbnails, over which the thumbnails scroll.

I.E. 5.6 for Mac

Working perfectly in Firefox and Safari. Its not working in I.E. 5.6 for Mac, however!

Anybody know any fixes?

This Video

Hey dude, you and whoever works with you to build all these components are absolute legends. Sure, you can spend hours checking to see if your code works, and screw around trying to get cool effects to work, but this is just legendary stuff. Thanks heaps.

Multiple scrolls on same page?

Is it possible do do more than one of these on a page or am I missing something? Magic site by the way!

help!!!

// Here we add some javascript to take care of the scrolling
// sections of the page that you designed. It works by removing
// each scrollcontent layer (and it's children) from the DOM and re-
// inserting it (and a copy) inside the matching scrollframe layer.
// Then we define an interval timer with a callback function
// where we move the scrollcontent within the scrollframe.
// Scrolling code for: b
var scrollOffset5 = 0;
$('#Layer-2').append( $('#Layer-5') );
$('#Layer-5').clone().addClass('Copy-Layer-5').insertAfter('#Layer-5');
function ScrollFunc()
{
how can i get this to repeat images correctly - I change the '2' to a '-2' to make the scrolling content go in reverse but it does't repeat....HELP!

file:///Users/nathansimpson/Desktop/psd2css/index.html

// Change the speed of the scroll by changing the '2' in the following
// line after the '+='. Negative numbers scroll the other way.
scrollOffset5 += -2;
// Scroll vertically by changing 'left' to 'top' and 'width' to 'height
// in the following lines
$('#Layer-5').css( 'left', scrollOffset5 );
$('.Copy-Layer-5').css( 'left', scrollOffset5 - $('.Copy-Layer-5').width() + 1 );
if( scrollOffset5 > $('.Copy-Layer-5').width() )
scrollOffset5 -= $('.Copy-Layer-5').width();
}
setInterval( ScrollFunc, 64 );

});

trying to get images to scroll reverse (right to left)

I'm having trouble getting the images to repeat after I place a neg number in the speed which does make the image scroll backwards...any ideas - here is the code and the link to show what it is doing...

link...
file:///Users/nathansimpson/Desktop/psd2css/index.html

code

// Here we add some javascript to take care of the scrolling
// sections of the page that you designed. It works by removing
// each scrollcontent layer (and it's children) from the DOM and re-
// inserting it (and a copy) inside the matching scrollframe layer.
// Then we define an interval timer with a callback function
// where we move the scrollcontent within the scrollframe.
// Scrolling code for: b
var scrollOffset5 = 0;
$('#Layer-2').append( $('#Layer-5') );
$('#Layer-5').clone().addClass('Copy-Layer-5').insertAfter('#Layer-5');
function ScrollFunc()
{
// Change the speed of the scroll by changing the '2' in the following
// line after the '+='. Negative numbers scroll the other way.
scrollOffset5 += -2;
// Scroll vertically by changing 'left' to 'top' and 'width' to 'height
// in the following lines
$('#Layer-5').css( 'left', scrollOffset5 );
$('.Copy-Layer-5').css( 'left', scrollOffset5 - $('.Copy-Layer-5').width() + 1 );
if( scrollOffset5 > $('.Copy-Layer-5').width() )
scrollOffset5 -= $('.Copy-Layer-5').width();
}
setInterval( ScrollFunc, 64 );

});

Content wont scroll?

I see you have a little "update" that states
"The code for the examples above has been regenerated with a newer version of psd2css Online. Some of the generated code might not match the video."

Can you please explain to me what the naming structure is now? I followed the tutorial perfectly but when I upload my PSD file it doesn't scroll at all. The _scrollcontent images are below the _scrollframe just as they are in my PSD? I believe its a new naming structure but I'm unaware of how to rename. Any help would be great!

Just a note; I tried uploading the PSD2CSS scroll PSD file as well just to make sure it wasn't a problem with my file and it didn't work either. Exact same outcome
T

Anyone? I would really like

Anyone? I would really like to figure this out!

Hi oregondunerz - I just

Hi oregondunerz -

I just downloaded the example (scroll.psd) and converted it - it works fine. Possibly you weren't logged in or your 2 weeks free has expired?

What I meant by the change is that the way the generated code looks and is laid out changed. I'll never change what any of the naming conventions are for exactly the reason you were worried about - it would break all the old stuff! :) Backward compatibility is a must.

Make sure you are logged in and try it again.

Thanks!

--
Shaun

Thanks for the reply Shaun.

Thanks for the reply Shaun. Sorry about the confusion, perhaps I wasn't logged in. I will give that a shot. THANKS!
T

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content