{"id":114,"date":"2019-05-22T03:45:05","date_gmt":"2019-05-22T03:45:05","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=114"},"modified":"2019-05-22T03:49:18","modified_gmt":"2019-05-22T03:49:18","slug":"como-hacer-efecto-parallax","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/como-hacer-efecto-parallax\/","title":{"rendered":"Como hacer efecto parallax en mi sitio web con HTML y CSS [Adaptable a dispositivos moviles] \ud83c\udf10\ud83d\udcbb"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Hola, qu\u00e9 tal <\/span><b>\u00bfCu\u00e1ntas veces no has querido integrar el efecto parallax a tu sitio web? O simplemente te gustar\u00eda implementarlo para ver c\u00f3mo se ve en tu proyecto web<\/b><span style=\"font-weight: 400;\">, pues con la propiedad de CSS, background-position: fixed; Es mucho m\u00e1s f\u00e1cil y genial, entonces en el d\u00eda de hoy te ense\u00f1aremos a hacerlo y aplicarlo hoy mismo a tu proyecto, te escribe Jordan Alexander de AlexCG Design y empezamos.<\/span><\/p>\n<p>https:\/\/giphy.com\/gifs\/XGCxjd0xTrwhu1neBv<\/p>\n<p><span style=\"font-weight: 400;\">\u26a0\ufe0f\u270b <\/span><b>Antes de seguir leyendo, <\/b><span style=\"font-weight: 400;\">Si a\u00fan no has visto nuestro tutorial sobre <\/span><b>C\u00f3mo hacer el efecto Parallax con HTML y CSS. <\/b><span style=\"font-weight: 400;\">\u00bfQu\u00e9 esperas?, Puedes verlo aqu\u00ed abajo:\ud83d\udc47\ud83d\udc47\ud83d\udc47<\/span><\/p>\n<p><iframe title=\"Como crear el efecto parallax  | Usa el efecto Parallax f\u00e1cil y rapido\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/tkwuU9w_QAc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Recuerda que como la mayor\u00eda de nuestros proyectos, en la parte final del BLOG se encuentra el link para descargar los archivos base del proyecto: <\/span><b>C\u00f3mo hacer el efecto Parallax con HTML Y CSS<\/b><span style=\"font-weight: 400;\"> para que lo puedas implementar ahora mismo en tu proyecto personal o lo uses para practicar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por \u00faltimo no olvides suscribirte a nuestro canal de Youtube AlexCG Design y tambi\u00e9n seguirnos en todas nuestras redes sociales, <\/span><b>si te fue de ayuda no olvides compartir el v\u00eddeo y darle like, eso nos ayudar\u00eda much\u00edsimo a seguir dando contenido de valor.<\/b><\/p>\n<h3><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" \/>M\u00e1s informaci\u00f3n:<\/h3>\n<p><a href=\"http:\/\/bit.ly\/2J0ptHI\" target=\"_blank\" rel=\"noopener noreferrer\">Inv\u00edtame un caf\u00e9:<img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/2615.svg\" alt=\"\u2615\ufe0f\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p><a href=\"http:\/\/www.mediafire.com\/file\/bbo2jljn6zyyyjl\/Parallax.zip\/file\" target=\"_blank\" rel=\"noopener noreferrer\">Descarga el proyecto <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f381.svg\" alt=\"\ud83c\udf81\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hola, qu\u00e9 tal \u00bfCu\u00e1ntas veces no has querido integrar el efecto parallax a tu sitio web? O simplemente te gustar\u00eda implementarlo para ver c\u00f3mo se ve en tu proyecto web, pues con la propiedad de CSS, background-position: fixed; Es mucho m\u00e1s f\u00e1cil y genial, entonces en el d\u00eda de hoy te ense\u00f1aremos a hacerlo y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/121"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}