Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

How would I achieve this?

Hey guys,

I am dev a wordpress e-commerce site for a friend and I had this idea I wanted to use. I have no idea as to how id go about this but I wanted to basically have the homepage be sort of two different doors the user can click on and go through. I want to have this be animated with html 5 or jquery or something. They dont have to be exactly doors, they could be sliding blocks or windows or anything. Pretty much split right down the middle.

Also, if its possible, wanted to know if I could also ad a video to this landing page.

4 Answers

It's not really hard if you understand jquery a bit. You can just make two divs or images that split the page. The jquery should be something like this:

$(".thedoorblockthing").click(function () {
  $(this).hide("slide", { direction: "up" }, 1000);
});

A video can just be accomplished with simple html inside one of them divs

If you dont understand any of this you hava a long way to go but if you need help for the whole thing just let me know.

Jquery documentation UI/Effects/Slide

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Hey guys! I'm going to retag this from "wordpress" to "jquery" and "html5" so you can hopefully get some more support from the right folks!

Thanks!

Andrew Chalkley
STAFF
Andrew Chalkley
Treehouse Guest Teacher

+1 Efen :)

@Darrin try a couple of things out. Maybe plain ol' jQuery is enough or there could be a plugin to do snazzier things with CSS3 too :)