• 0

Interesting landing page with two choices?


Question

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!

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

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.

 

2gv515i.png

Link to comment
Share on other sites

  • 0

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.

 

2gv515i.png

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

  • Like 1
Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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

 

Lemme write a jsfiddle.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

This topic is now closed to further replies.