Interesting landing page with two choices?

[Cute James]

Good morning,

 

I would like to request suggestions for attractive and interesting 'landing pages' that offer two independent routes (e.g. /route1/ or /route2/).

 

I am responsible for a product website hosted at http://www.kawaimp.com (some of you may recall my asking a Retina DPI query about it recently).

This website currently provides product information for one model only (stored in /mp11/), however content for another model is in development and will be stored independently in a separate folder (/mp7/) .

 

My plan is to design an interesting landing page for the website that acts as a model selection page with links to /mp11/ and /mp7/ .

 

I have some ideas in my head, but would appreciate suggestions from other Neowin members.  I rather like the sliding/expanding interface of http://www.mozilla.org/en-US/ , however I don't know how this could be adapted from the current four choices to just two.

 

Many thanks in advance!

[Seahorsepip Veteran]

And how I would make it responsive:

http://jsfiddle.net/ZHQjS/30/embedded/result/

[+Zlip792 MVC]

For Mozilla Slider, you can look into this thread: https://www.neowin.net/forum/topic/1202881-where-can-i-get-the-mozilla-slider/

[Cute James]

For Mozilla Slider, you can look into this thread: https://www.neowin.net/forum/topic/1202881-where-can-i-get-the-mozilla-slider/

 

Thanks, yes that's actually the post I initially recalled when thinking about this subject.

 

I've prepared a mock-up of how I'd like the landing page to look, so fingers crossed our agency will be able to work their magic.

 

[Seahorsepip Veteran]

Thanks, yes that's actually the post I initially recalled when thinking about this subject.

 

I've prepared a mock-up of how I'd like the landing page to look, so fingers crossed our agency will be able to work their magic.

 

Ah that's a cool idea, *seeing already some cool animations for this*

[Cute James]

Ah that's a cool idea, *seeing already some cool animations for this*

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

[Seahorsepip Veteran]

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

Notepad, I don't use any animation tools for animations.

[Cute James]

Notepad, I don't use any animation tools for animations.

Purely notepad?

 

May I ask how you would go about scripting the animation for something like this:

https://www.dropbox.com/s/i19txceqg5k3rm7/Animation.ppt

[Seahorsepip Veteran]

4 elements, 2 gray blocks with text and 2 image blocks that slide/fade in.

 

Lemme write a jsfiddle.

[Seahorsepip Veteran]

Here's the not animated html to start with: http://jsfiddle.net/ZHQjS/14/

[Seahorsepip Veteran]

And here's the same page animated:

http://jsfiddle.net/ZHQjS/18/embedded/result/

[Seahorsepip Veteran]

And here's the same without a fixed width: http://jsfiddle.net/ZHQjS/19/embedded/result/

Though it requires additional mediaqueries to be fully responsive without bugs ;)

[pqt]

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

http://daneden.github.io/animate.css/

 

Check out this for a 'just-add-water' solution. In order to make it do exactly what you want you'll have to investigate some javascript to add and remove classes, but this will save you some time AND allows you to experiment with different animations so you can make an educated decision of which you like best.

[Seahorsepip Veteran]

http://daneden.github.io/animate.css/

 

Check out this for a 'just-add-water' solution. In order to make it do exactly what you want you'll have to investigate some javascript to add and remove classes, but this will save you some time AND allows you to experiment with different animations so you can make an educated decision of which you like best.

That is nice for simple animations but using animation sequences will become messy with these things and not to forget that the whole reason css animations exist is because they're meant to replace js animations. Using js again to do some css animations is just a bad idea.

 

You can better use pure css animations which aren't that hard to create and understand and then combine them into one animation or use them after each other like so:

.object {
    animation: ani1 1s 1,
               ani2 1s 1s 1;
}

The above code runs both animations after each other:

-ani1 runs for 1s once

-ani2 runs for 1s after 1s once.

 

The link above is great for looking into how certain css animations are created but don't trigger them with js when it's not necessary, if you want to do animation on a button click I can understand but otherwise it's just a bad idea to use js.

 

Keep in mind you can also trigger animations using checkboxes with :check or with input boxes with :require and :focus and of course with :hover and :active.

[MikeChipshop Member]

Good work as always Seahorsepip!

[Cute James]

Wow, that's terrific - great work Seahorsepip!

I wasn't expecting you to actually code the whole thing.

 

Your code works very well, and I expect it may be useful to the agency.

I will send a PM to discuss remuneration for your efforts.

 

Cheers!

[Cute James]

Just to update the thread:

 

The additional content and landing page went online last Friday.  Our agency used my design and animation as a reference and I am satisfied with the results.

The completed site is online at:

 

http://www.kawaimp.com/index.html

 

Cheers!