{"id":110,"date":"2016-06-30T21:36:39","date_gmt":"2016-06-30T21:36:39","guid":{"rendered":"http:\/\/joseecarrier.ca\/en\/?post_type=jetpack-portfolio&p=110"},"modified":"2016-07-05T17:02:27","modified_gmt":"2016-07-05T17:02:27","slug":"input-field-effect","status":"publish","type":"jetpack-portfolio","link":"https:\/\/joseecarrier.ca\/en\/portfolio\/input-field-effect\/","title":{"rendered":"Input Field Effect"},"content":{"rendered":"\n

Here is a second project in my series of experiments on web interaction (see previous one here<\/a>). The aim of this series is to get to know the tools available to bring interactivity to websites. I decided to build these experiments around lines just to give a direction to my projects. For this experiment, I worked on an input field effect. It was inspired by some tutorials on Codrops<\/a>, namely the ones on Text Input Effects<\/a> and Animated Checkboxes and Radio Buttons<\/a>. Ideas were also taken from the Float Label Pattern first proposed by Matt D. Smith and its various implementations (see article here<\/a>). For the lines, I use an SVG and I animate its width using CSS transitions when the field is in focus or filled. I set a class using Javascript on the field when it’s not empty like Peter Sorowka is doing in his Graceful Degradation (see CodePen here<\/a>). Here is the result in an animated GIF. You can also try it out here<\/a>.<\/p>\n

$\"InputFieldLineEffect\"$ <\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"

Here is a second project in my series of experiments on web interaction (see previous one here). The aim of this series is to get to know the tools available to bring interactivity to websites. I decided to build these experiments around lines just to give a direction to my projects. For this experiment, I worked […]<\/p>\n","protected":false},"author":1,"featured_media":112,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[6],"jetpack-portfolio-tag":[33,32,30],"class_list":["post-110","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","jetpack-portfolio-type-web-development","jetpack-portfolio-tag-input-field","jetpack-portfolio-tag-svg","jetpack-portfolio-tag-web-interaction","jetpack-portfolio-input-field-effect"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":1,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/110\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/110\/revisions\/113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/media\/112"}],"wp:attachment":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=110"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}