{"id":707,"date":"2024-03-28T05:48:00","date_gmt":"2024-03-28T05:48:00","guid":{"rendered":"https:\/\/javigomez.org\/?p=707"},"modified":"2025-09-29T20:33:15","modified_gmt":"2025-09-29T20:33:15","slug":"checkbox-animado-svg-animacion-y-javascript","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2024\/03\/28\/checkbox-animado-svg-animacion-y-javascript\/","title":{"rendered":"Checkbox animado: SVG, Animaci\u00f3n y JavaScript"},"content":{"rendered":"\n<p>En el siguiente c\u00f3digo se quitan los estilos por defectos de un checkbox y se realiza una animaci\u00f3n, como si el check se realizase a mano.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2024\/03\/Checkbox-1.mp4\"><\/video><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Check box personalizado&lt;\/title>\n  &lt;style>\n    .contenedor {\n      position: relative;\n    }\n\n    .check {\n      appearance: none; \n      width: 14px;\n      height: 14px;\n      border: 1px solid #500;\n      vertical-align: bottom;\n    }\n\n    .linea {\n      width: 14px;\n      height: 14px;\n      fill: none;\n      stroke: #500;\n      position: absolute;\n      left: 5px;\n      top: 3px;\n      z-index: -1;\n    }\n\n    label {\n      font-family: Arial, Helvetica, sans-serif;\n      color: #500;\n    }\n\n    .animado {\n      transition: stroke-dashoffset .5s;\n    }\n  &lt;\/style>\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"contenedor\">\n    &lt;input type=\"checkbox\" id=\"check\" class=\"check\" >\n    &lt;label for=\"check\">Aceptar condiciones&lt;\/label>\n    \n    &lt;svg class=\"linea\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      &lt;path class=\"trazo\" d=\"M2 6.5C2 6.5 5 14.5 6.5 12.5C8 10.5 9.5 2 9.5 2\" stroke-width=\"3\" stroke-linecap=\"round\">\n      &lt;\/path>\n    &lt;\/svg>\n  &lt;\/div>\n\n  &lt;script>\n    var check = document.querySelector(\"#check\");\n    var trazo = document.querySelector(\".trazo\");\n    var length = trazo.getTotalLength();\n\n    trazo.style.strokeDasharray = length;\n    trazo.style.strokeDashoffset = length;\n\n    check.addEventListener(\"change\", function () {\n      if (this.checked == true) {\n        trazo.classList.add(\"animado\");\n        trazo.style.strokeDashoffset = 0;\n      } else {\n        trazo.classList.remove(\"animado\");\n        trazo.style.strokeDashoffset = length;\n      }\n    });\n  &lt;\/script>\n\n\n&lt;\/body>\n\n&lt;\/html>\n\n\n\n  <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En el siguiente c\u00f3digo se quitan los estilos por defectos de un checkbox y se realiza una animaci\u00f3n, como si el check se realizase a &hellip; <\/p>\n","protected":false},"author":1,"featured_media":708,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[33,75,106,204,319],"class_list":["post-707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-javascript","tag-animacion","tag-checkbox","tag-css","tag-javascript","tag-svg"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/707\/revisions\/869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/708"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}