{"id":103,"date":"2016-05-27T17:55:10","date_gmt":"2016-05-27T17:55:10","guid":{"rendered":"http:\/\/joseecarrier.ca\/en\/?post_type=jetpack-portfolio&p=103"},"modified":"2016-05-30T14:35:05","modified_gmt":"2016-05-30T14:35:05","slug":"button-click-effect","status":"publish","type":"jetpack-portfolio","link":"https:\/\/joseecarrier.ca\/en\/portfolio\/button-click-effect\/","title":{"rendered":"Button Click Effect"},"content":{"rendered":"\n

I’m starting a series of experiments on web interaction. They were inspired by different tutorials on Codrops <\/a>and the aim 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 project. For this first experiment, I worked on a button click effect. It was inspired in part by this tutorial<\/a>. For the lines, I use lines in an svg and I animate the line stroke opacity and the width of the SVG using CSS transitions when the button is clicked. Here is the result in an animated GIF. You can also try it out here<\/a>.<\/p>\n

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

I’m starting a series of experiments on web interaction. They were inspired by different tutorials on Codrops and the aim 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 project. For this first experiment, I worked on […]<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[6],"jetpack-portfolio-tag":[31,32,30],"class_list":["post-103","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","jetpack-portfolio-type-web-development","jetpack-portfolio-tag-button-click","jetpack-portfolio-tag-svg","jetpack-portfolio-tag-web-interaction","jetpack-portfolio-button-click-effect"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/103","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=103"}],"version-history":[{"count":1,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/103\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio\/103\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=103"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/joseecarrier.ca\/en\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}