Need a Coding Exercise

I never mention it any longer than necessary, yet as I’ve reported before, I’m at present deployed. I haven’t done a whole lot in terms of website development so far. MY SPOUSE AND I do, however have one or two projects I require on. The issue is, I simply just can’t get our brain into the item.

Therefore, I’m hoping a couple of quick coding exercises could easily get me there (a css-only whatever, etc. ). And this is when you all come in. Any suggestions

There’s been past discussion concerning this site:
https: //squareup. com/

A great deal of CSS3, Javascripting, as well as JQuery.

I determined that this main background image is a full-size blurry photograph.
After that they’ve taken photos of hands along with objects (in well-defined focus) against your black curtain.
The " black" becomes a transparency to the PNG as it’s slid in the blurry background.

The affect is excellent, and I’m asking yourself if there’s not so much a way to duplicate
the image effect… but more concerning the background slider with the forms on top.

As well as the login part mounts another aspect… the whole thing drops down for any login form.
Additionally , they use something referred to as " jelly"… is that a JQuery/JSON/AJAX kind of thing

Can you think a simpler version of their site features is realistic by part-time scripters for instance us (or me)

Look into their site (view that HTML source).

I’ll have a look into it. I can’t notice the jelly impact on this gov’t laptop or computer, but I’ll look when i get off operate. I can imagine it would be done with a number of CSS3 animations and/or transitions which has a simple fallback with regard to browsers that will not support it. During worst, you’re considering some incredibly very simple jQuery.

Thank you! I’ll post what I come up with!

On IE8, their site kind of fails… but that’s no problem.

Their particular demographics are iPad and iPhone users.
They programmed for a rather specific target market, but they did an excellent job of that.
It makes me desire to buy and itouch new generation ipod and use their particular product.

That adds nowadays to the challenge, then. IE compatibility/fallback

" Jelly" is apparently a go-between to get jQuery and Rails. Read more regarding it here: https: //github. com/pivotal/jelly#readme

I’m going to keep working within the rest. I think I’ll make the downfall transitions with CSS3 as well as a touch of jQuery.

I’ve destroyed the Squareup effects a little. It actually appears fairly simple. I mean to use my own solution rather than simply capturing theirs. To the slider, I’ll fork Flexslider and add custom animations to the foreground images. To begin with, I’m going to attempt CSS3 transitions for making it happen, but I’m unclear how well that can work. Regardless, the fork will contain a jQuery-reliant solution, and I’ll fork again only can think of a CSS-only solution.

My initial thought is always to use the: focus on pseudo-class to activate child element animations. The issue with that is the slider won’t have the ability to automatically transition. Another thought Relating to is to forego jQuery altogether and build a CSS3 only slider. There will not any automatic transitions (though I could create them for Webkit browsers using animations), but it could be an incredibly lightweight solution perfect for mobiles.

jQuery is the obvious and very likely easiest solution, which is why I will create that at the very least. It seems to get Squareup’s solution also, which is half the key reason why I intend to create a CSS-only model. The other reason being i always could use the actual practice.

Above the animations, I do believe the forms shall be easy to achieve with some creative by using positioning.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *