{"id":80,"date":"2016-05-30T14:52:36","date_gmt":"2016-05-30T14:52:36","guid":{"rendered":"http:\/\/joseecarrier.ca\/fr\/?post_type=jetpack-portfolio&p=80"},"modified":"2016-05-30T14:52:36","modified_gmt":"2016-05-30T14:52:36","slug":"effet-clic-de-bouton","status":"publish","type":"jetpack-portfolio","link":"https:\/\/joseecarrier.ca\/fr\/portfolio\/effet-clic-de-bouton\/","title":{"rendered":"Effet clic de bouton"},"content":{"rendered":"\n

Je débute une série d’expérimentations sur l’interaction web. Ils ont été inspirés par différents tutoriels sur Codrops<\/a> et le but est de me familiariser avec les différents outils disponibles pour ajouter de l’interactivité à des sites Web. J’ai décidé de concevoir ces expérimentations autour du thème des lignes simplement pour donner une direction à mon projet. Pour cette première expérience, j’ai travaillé sur un effet lors du clic d’un bouton. Il a été inspiré en partie par ce tutoriel<\/a>. Pour les lignes, j’utilise un SVG et j’anime l’opacité des lignes et la largeur du SVG en utilisant des transitions CSS lorsque le bouton est cliqué. Voici le résultat dans un GIF animé. Vous pouvez également l’essayer ici<\/a>.<\/p>\n

$\"ButtonLineClickEffect2\"$ <\/p>\n

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

Je débute une série d’expérimentations sur l’interaction web. Ils ont été inspirés par différents tutoriels sur Codrops et le but est de me familiariser avec les différents outils disponibles pour ajouter de l’interactivité à des sites Web. J’ai décidé de concevoir ces expérimentations autour du thème des lignes simplement pour donner une direction à mon projet. Pour cette première expérience, j’ai […]<\/p>\n","protected":false},"author":1,"featured_media":81,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[5],"jetpack-portfolio-tag":[27,29,30,31,32],"class_list":["post-80","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","jetpack-portfolio-type-developpement-web","jetpack-portfolio-tag-animation","jetpack-portfolio-tag-bouton","jetpack-portfolio-tag-clic","jetpack-portfolio-tag-interaction","jetpack-portfolio-tag-ux","jetpack-portfolio-effet-clic-de-bouton"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/jetpack-portfolio\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/jetpack-portfolio\/80\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/media\/81"}],"wp:attachment":[{"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=80"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/joseecarrier.ca\/fr\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}