{"id":85960,"date":"2019-02-13T12:12:12","date_gmt":"2019-02-13T12:12:12","guid":{"rendered":"https:\/\/es.wordpress.org\/support\/topic\/efecto-parallax\/"},"modified":"2019-02-14T11:07:36","modified_gmt":"2019-02-14T11:07:36","slug":"efecto-parallax","status":"publish","type":"topic","link":"https:\/\/es.wordpress.org\/support\/topic\/efecto-parallax\/","title":{"rendered":"Efecto parallax"},"content":{"rendered":"<p>Hola a todos,<\/p>\n<p>No s\u00e9 si escribo en el sitio correcto.<br \/>\nEstoy intentando crear un efecto parallax para mi pagina. <\/p>\n<p>Actualmente tengo una secci\u00f3n con fondo rosa en la que ya hay elementos que ya hacen este efecto. La cosa es que quiero conseguir que la capa amarilla con siluetas de cactus haga este efecto sobre la capa rosa. <\/p>\n<p>Me gustar\u00eda conseguir algo as\u00ed:<br \/>\nhttps:\/\/www.numero10.ch\/fr\/home <\/p>\n<p>Siento recurrir pero no tengo conocimientos de c\u00f3digo y los desarrolladores de la plantilla me facilitan el codigo pero no me dan m\u00e1s informaci\u00f3n de como debo conseguirlo. <\/p>\n<p>Este es el c\u00f3digo que aplico pero no me funciona, no se si me falta a\u00f1adir algun paso m\u00e1s: <\/p>\n<pre><code>\n&lt;script type=&quot;text\/javascript&quot;&gt; \n\n(function($) {\n\n\t$.fn.scrolling = function(speed) {\n\t\tvar $item = $(this);\n\n\t\tif( $item.length == 0 ) return ;\n\n\t\tvar $parentBlock = $(this).closest(&#039;.fullwidth-block&#039;);\n\t\tvar positionTop = $item.data(&#039;positionTop&#039;);\n\t\tvar newPositionTop = positionTop+($(window).scrollTop()-$parentBlock.offset().top)*speed;\n\t\t$item.css({top: newPositionTop});\n\t}\n\n\t$.fn.arrowRotate = function(speed) {\n\t\tvar $item = $(this);\n\n\t\tif( $item.length == 0 ) return ;\n\n\t\tvar $parentBlock = $(this).closest(&#039;.fullwidth-block&#039;);\n\t\tvar angel = ($(window).scrollTop()-$parentBlock.offset().top)*speed*360\/$parentBlock.outerHeight();\n\t\t$item.css({\n\t\t\ttransform: &#039;rotate(&#039;+angel+&#039;deg)&#039;,\n\t\t\tMozTransform: &#039;rotate(&#039;+angel+&#039;deg)&#039;,\n\t\t\tWebkitTransform: &#039;rotate(&#039;+angel+&#039;deg)&#039;,\n\t\t\tmsTransform: &#039;rotate(&#039;+angel+&#039;deg)&#039;\n\t\t})\n\t\n})(jQuery);\n &lt;\/script&gt;<\/code><\/pre>\n<p>Si alguien tiene otra sugerencia de como conseguir el efecto me ser\u00eda de mucha ayuda!<\/p>\n<p>Un saludo!<\/p>\n","protected":false},"template":"","class_list":["post-85960","topic","type-topic","status-publish","hentry","topic-tag-js","topic-tag-parallax"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/85960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/85960\/revisions"}],"predecessor-version":[{"id":86004,"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/85960\/revisions\/86004"}],"wp:attachment":[{"href":"https:\/\/es.wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=85960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}