In this session, we continue our discussion on the idea of having a website with horizontal scrolling content and talk about how to align the other elements on the web page. In this particular case, the scrolling element would be a torn paper background image with various content on it.
Rick: So you want to do something like this.
Kim: Yes I do and I want this… I want a cool horizontal scroll.
Rick: You want a cool horizontal scroll.
Kim: So there are the white ends there, it would just… everything would continue on. It would just continue on your… you know, because I have my mouse. I can just hit my little mouse sideways and then horizontally scroll. And I want my art just to horizontally scroll through forever on my art examples.
Rick: And you know, the easiest way to do here Kim would be if all this stuff on the side could start on the edge instead of starting here on the middle.
Kim: Oh okay.
Rick: If it could start on the edge… well, in fact, what I’m really saying is if the hole page starts at the edge and it takes up as much page as there is available and then can scroll and continue to scroll as you… until you get to the end of whatever content you have. That would be easiest way to accommodate that because then what you could do is make the logo and the menu… make their positions absolute which means as the rest of this stuff scrolls past, it stays where it is. And you can do the same thing with your footer widgets. You can make them absolute and then as you scroll through here, everything else would be… they would stay fixed.
Rick: Now but you want your paper to still be.. the torn paper edge not to be fixed. You want it still to continue to scroll on by, right?
Kim: Exactly. I just want that whole thing to just like a big piece of torn paper all the way through.
Rick: And so… and I think it’s a cool idea. I can’t actually tell you how to do everything on that tonight. But I can… I am prepared to talk about how to create this torn edge in a way that is repeating.
Kim: Now, I made that that width because that was the width of the page itself. Like one is at 1600 or something. So I don’t know if I should make that a little smaller image that would repeat or if I just say at 1600 and just have that repeat. I mean, beause it’s a very small image. It’s a gif.
Rick: Yeah, I’ve got it open right here in Photoshop. It is very small. It’s what…
Kim: It’s ilke… it’s very small but I’ve really crunched it down so I don’t knokw if I should make it smaller and try to repeat or just keep it at the 1600 width and repeat that since it will be going for a long time. You know, the horizontal…
Rick: Well, what I would do is I would make… what I’ve done here is I’ve taken the one image you created and I’ve created a second image called torn edge bottom. So here’s the top piece. This is the one you gave me. Here’s the bottom piece that essentially reversed, just rotated around. The way to really make the pattern feel like it’s not repeating is if your bottom image was smaller in length so that its repeating pattern was completely different than the top repeating pattern. Because right now, the upper and the lower repeating patterns are going to be the same.
Kim: So that’s in Photoshop?
Kim: Oh okay. So I would just make one… just crunch one down to 1000 like the bottom would be 1000 and then the top would 1600? Is that… something like that?
Rick: Yeah, that’s what I would do. I mean you just chop out this middle piece of it and…
Kim: And make it repeating?
Rick: Yeah and make it match nicely in there and then… so that your pattern… the repetition pattern is not the same at the top and at the bottom.
Kim: Right because you really don’t want that to mirror because that’s would just be boring.
Rick: Yeah, you want it to feel like it’s continuning different each time.
Kim: Okay, I can do that.
Rick: Okay so then the next thing to do is to install the plugins. And you know, I forgot to check to see whether or not I even have a login for the site.
Kim: I think you do have a login. Just use your regular login.
Rick: Right. Let’s see if it works. It does work, hurrah.