• 0

Interesting landing page with two choices?


Go to solution Solved by Seahorsepip,

Question

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!

Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 0
Cute James

For Mozilla Slider, you can look into this thread: http://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 post
Share on other sites
  • 0
Seahorsepip

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 post
Share on other sites
  • 0
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!

Link to post
Share on other sites
  • 0
Seahorsepip

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 post
Share on other sites
  • 0
Seahorsepip

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

 

Lemme write a jsfiddle.

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
Seahorsepip

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 post
Share on other sites
  • 0
MikeChipshop

Good work as always Seahorsepip!

  • Like 1
Link to post
Share on other sites
  • 0
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!

Link to post
Share on other sites
  • 0
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!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Karan Singh
      Life is Strange: Before the Storm Ep. 2 review: Lightning in a Bottle
      by Gurkaran Singh

      In almost every trilogy, the second part is the best. It doesn't have to set up the story like the first one and it doesn't have to worry about ending the series on a high note. Like a middle child, it can maintain mystery as well as have a certain sense of panache. (Of course, this has nothing to do with the fact that I'm a middle child. This is why I was highly anticipating the second episode of Life is Strange: Before the Storm. It did not disappoint.

      **This review contains a few spoilers from the first episode. Reader discretion is advised.**

      Story


      After Rachel burns down most of the flora in Arcadia Bay and screams bloody murder, she and Chloe are reprimanded by Blackwell's Principal Wells for having skipped school the previous day. This doesn't end well for Chloe. For Rachel, however, things turn out different. Her clean record saves her from suspension but, her actions may take away her role in The Tempest - the school play that's supposed to happen the same night. This also serves as a commentary on how prejudice can easily cloud our judgments. Everyone was willing to believe Chloe was the perpetrator without much evidence.



      In any case, Chloe's "fate" in the meeting escalates into a heated argument with her mother and David, her mom's boyfriend who has announced that he is moving in with them. She feels as if everyone and everything that she's cared for is somehow betraying her. This leads her to act out and leave. She goes to the only place that she feels is still her own, the junkyard. Her relationship with her mother turns more strenuous and she never goes home for the rest of the episode. They do communicate via text messages throughout the game, though. Once at the junkyard, Chloe sees her father in another one of her dream-nightmare fugue-like states and is visibly distraught. There are many references and scenes of fire throughout the game, sometimes as the main focus and at others, in the background.

      She is awakened by Rachel. Each of them pretends to be the other's therapist and, in turn, they grow closer to each other. Their relationship no longer feels rushed, even though they've known each other for no more than a few days.



      Soon, Rachel has to leave for the play while Chloe has an appointment with her drug dealer, Frank Bowers who gives Chloe a "collection job". The job goes awry and Chloe is faced with a dilemma that will come back to haunt her in the next episode. Then, Chloe leaves for The Tempest. Backstage, we see a lot of events unfold that provide more dimensions to the supporting characters. Nathan Prescott - the reclusive "spoiled" brat, for instance - is seen fighting his own demons. He has to deal with his domineering father, the fear of living up to his last name all while dealing with bullies. This is an incredible development for the game. To show troubled people as not just the sum of their worst qualities, but as the product of their circumstances, is the biggest strength of this game.



      Further events transpire to put Chloe on stage, acting in the play (with a little nudge from Rachel). Her sloppy acting was pretty much how I would expect her to do it. It was hella entertaining, though. Near the end of their scene, we see a real off-the-cuff moment shared by our two female protagonists, which turns into an indelible freeze-frame for their relationship.

      Later, they end up at the Amber residence. This is also the first time that Chloe has a one-on-one with Rachel's parents who are, unsurprisingly, not fond of her. On being cornered, Chloe agrees to have dinner with the Ambers. The game ends on a bombshell of a cliff-hanger that stands to turn everything on its head. However, I was more interested in the conversations between Chloe, a rebel, and Mr. Amber, a "model" citizen. Their philosophies, prejudices, and hypocrisy provided a great commentary on what our society deems acceptable. Needless to say, I await episode three impatiently.

      Animation, Gameplay, and Music


      There isn't much to say in terms of animation or gameplay as the new episodes have barely touched on the formula that the original came up with. I do wish, however, that the facial expressions were a little better. I found the voice-over to be excellent, but facial expressions of the characters often undercut the emotion being portrayed.

      One huge takeaway for me, though, would be the music. It's hauntingly beautiful and resonates with you. Music was my only complaint about the first episode, and I am glad that this episode improved upon it.

      Standout moments


      The amazing feature of this particular episode is that it delves deeper into other supporting characters. Rather than the one-dimensional personalities we are often presented within the media, we get to see the other side of the coin. Drew, for example, was shown as a jock and a bully in the first episode, but here we get to see him in a different light. His concern for his unemployed father as well as the overprotective nature of his love for his brother makes him more human than simply a caricature to further the plot of the game.

      In two different instances, the episode reminds us that people are more than what they put on display. Frank, when talking about Drew, tells Chloe that "people are never just a type" and Samuel, the school groundskeeper, reiterates the same point later on in the game. Similarly, Nathan has his own struggle. His money or name doesn't make him immune to bullying or from an overbearing father. This episode was particularly exceptional for exploring these issues while at the same time moving the story forward. It doesn't feel forced or even uncomfortable. It just organically falls into place.

      Conclusion


      Life is Strange: Before the Storm is shaping up to be one of my favorite titles of the year. This episode improves on its predecessor in almost every way. While the first episode set up the story nicely, the second one brings more life to it. The moments between Rachel and Chloe feel natural instead of hastened. I was much more engaged in their dynamic. The pacing of the story is taut and the music perfectly complements it. It doesn't let you breathe and that makes it all the more exhilarating. Chloe and Rachel's bond in the game is admirable and the supporting cast gets more to do, which is a welcome change. It also sets up the third episode very nicely.

      The series is poised to be an outstanding gaming experience. All I hope is that the third episode maintains the depth and music of this one and improves upon the facial animation, somehow. I completed Life is Strange: Before the Storm Episode 2 in about three hours without any major lags or glitches. It's a beautiful game and I highly recommend it. You can buy the game on the device of your choice:

      Xbox One: Standard Edition ($16.99) / Deluxe Edition ($24.99) PlayStation 4: Standard Edition ($16.99) / Deluxe Edition ($24.99) PC (Steam): Standard Edition ($16.99) / Deluxe Edition ($24.99) PC (SE store): Standard Edition ($16.99) / Deluxe Edition ($24.99) Don't forget to follow us @NeowinGaming on Twitter for more gaming reviews!

      Life is Strange: Before the Storm was reviewed on an Asus GL552VW with a copy provided by the publisher on Steam. The title was played with an Xbox One controller attached. Here are the specifications of the device:

      Display: 15.6" 16:9 IPS FHD (1920x1080) non-touch OS: Windows 10, 64-bit RAM: 16GB Processor: Intel Core i7-6700HQ, ~ 2.60 GHz GPU: NVIDIA® GeForce® GTX 960M with 4GB GDDR5 VRAM
    • By compl3x
      I was just reading this new study that suggests behaving immorally in  games might make you morally sensitive in real life.
       
      It got me to thinkin' about how much I dislike acting immorally or violently in a game when I am presented with the option to either choose a "good" or "bad" path. In Fallout, I try to do the right thing by the inhabitants of the wasteland. In Mass Effect, I preferred the paragon approach, only going back through the titles to play the renegade options to see how the story or characters played out (punching that journalist in the face in ME2 made me feel like a right jerk.). 
       
      In games where I have to kill people in order to progress the story I don't feel anything because they are simply obstacles which must be overcome in order to progress. If I don't shoot the Russian bad guys, blow up the rival drug cartel's hideout, or take down the gangsters hot on my trial in the streets I die or can't complete the game.
       
      I threw up a quick poll for fun.
    • By Nick H.
      Ok, time for a little backstory. If you don't want to read it, skip down to the bolded bit.
      I started my current job back in October. I'm a helpdesk guy for a rather large company, catering to users around the world. It was a huge step up from my previous job, which only catered to three school campuses. Part of the reason for the position being available with this company is that it has been bought by a larger company, and so they needed the extra personnel to help with the migration process. While it wasn't explicitly pointed out, I took this to mean that once the system was together it would be the larger company's IT team that would take over complete control, basically ending my job. I was ok with that, since at the time I was unemployed so any job was fine. I imagined that this migration period would only be about one year, meaning that my contract would only be one year. Again, I was fine with that.
      Skip forwards to today. I'm 10 months in to the contract, and the honeymoon period is well and truly over. Almost every aspect of this job is bad. I don't feel like I work in IT anymore, I feel more like a secretary. While I understand that paperwork is pretty much part of any job, the paperwork outweighs the computer work by something like 5:1. For every computer I touch, there is paperwork to be filled out. For every access request, there is more paperwork to be filled out. It's come to the point where my boss - in no uncertain terms - has sidelined me so that now all I deal with is access requests. This means that I'm in front of my computer almost all the time, and for every access request I handle...you guessed it, more paperwork.
      The migration is a mess. I know that it isn't easy to plan such a thing, but there is almost zero communication between us and the other teams. I'm currently handling two ticketing systems, ours and theirs, in an attempt to smooth out the transition. Yeah, that's working well. Even my partner in the US is saying the same thing, the system is fundamentally flawed.
      This is not what I got in to IT for. I enjoy working with computers, but I also enjoy interacting with clients. At my last job I genuinely enjoyed answering the phone and saying, "you know what, I'll just head over and meet you to explain what the issue is." While it's more difficult to have that interaction here (I can't exactly just hop over to Morocco to fix a PC) I'm no longer supposed to get involved with problems in the same building that I'm in. That becomes a job for any of the rest of the team.
      I woke up this morning and trudged to work as usual. All the way along I was thinking, "why am I doing this?" And this hasn't been the first time that it's entered my mind. Today has been slightly different though, in that my mind came up with the idea of "I want a new job" and now I can't shake it. Obviously I'm going to talk to my boss when he comes back (2 weeks vacation when we were told that - due to the migration - we couldn't really do such a thing at this time) and tell him that either he puts me in to a more hands-on position or I'm out of here. But if that doesn't happen, I'm going to hand in my letter of resignation.
      Purpose of this thread
      As I mentioned before, I realise that very few jobs come without paperwork. And it's not that I'm unhappy with doing paperwork, so long as there is enough practical work involved to justify it. How does the paperwork : work ratio work out for everyone else?
      Has anyone been in a similar situation in IT, being part of a migration process? How did it work for you?
      Ignoring the "if you don't like it, change it" advice, do you think it's right that I'm considering packing it in? If you were in the above situation, what would you do?
      Should I look for another job in IT, or should I try my hand at something else? If all else fails, I don't think I'd mind working in a bar for a short time, just while I figure my situation out.
      If you've considered packing in your job before, how did you go about job hunting, and dealing with interviews? I'm still going to be with this company during that time, so my availability will obviously be limited.
      Ok, I think that's it. Aside from anything else I needed to get it off my chest, and writing it down has cleared my head slightly which is a start. Any responses are welcome.
    • By tanjiajun_34
      Is there is a way to remove a word from a Choices variable because I don't want my speech recognition to recognize the word anymore.