{"id":2130,"date":"2013-01-15T15:11:44","date_gmt":"2013-01-15T15:11:44","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2130"},"modified":"2016-05-23T13:53:24","modified_gmt":"2016-05-23T13:53:24","slug":"marquee-scroll-move","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/","title":{"rendered":"Marquee scroll move"},"content":{"rendered":"<p>En este art\u00edculo vamos a utilizar la etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.<\/p>\n<p>La etiqueta marquee se utiliza de la siguiente forma:<\/p>\n<pre>&lt;marquee&gt;--YOUR CONTENT---&lt;\/marquee&gt;<\/pre>\n<p>Este elemento HTML soporta una serie de atributos:<\/p>\n<p>Marquee soporta una serie de atributos para modificar su comportamiento o su aspecto. Son los siguientes:<\/p>\n<p><strong>width -&gt; <\/strong>Anchura de la marquesina.<\/p>\n<p><strong>height<\/strong> -&gt; Altura de la marquesina.<\/p>\n<p><strong>direction<\/strong> -&gt; Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son \u00ab<em><strong>left<\/strong><\/em>\u00bb y \u00ab<em><strong>right<\/strong><\/em>\u00ab.<\/p>\n<p><strong>behavior<\/strong> -&gt; Es el comportamiento de la marquesina, de entre los posibles: \u00ab<em><strong>scroll<\/strong><\/em>\u00bb (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma direcci\u00f3n y \u00ab<em><strong>alternate<\/strong><\/em>\u00ab, que indica que el desplazamiento se hace a un lado y al otro de manera alternada.<\/p>\n<p><strong>scrolldelay<\/strong> -&gt; Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posici\u00f3n de lo que hay desplaz\u00e1ndose. Es decir, cuanto mayor sea el valor, m\u00e1s milisegundos tardar\u00e1 la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500 la marquesina cambiar\u00e1 de estado (desplazar\u00e1 el contenido) cada medio segundo.<\/p>\n<p><strong>scrollamount<\/strong> -&gt; Es la cantidad de pixels que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. A mayor scrollamount, m\u00e1s se desplazar\u00e1 la marquesina en cada movimiento y por tanto la animaci\u00f3n ser\u00e1 m\u00e1s r\u00e1pida. El valor por defecto es 6. Podemos probar a colocar un valor mayor y veremos que el movimiento ser\u00e1 m\u00e1s \u00aba golpes\u00bb.<\/p>\n<p><strong>loop<\/strong> -&gt; El n\u00famero de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo s\u00f3lo funciona en Internet Explorer. Por defecto es \u00ab<em><strong>infinite<\/strong><\/em>\u00ab, que quiere decir que se desplazar\u00e1 todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como 3, querr\u00e1 decir que la marquesina s\u00f3lo realizar\u00e1 tres ciclos o movimientos y luego parar\u00e1.<\/p>\n<p><strong>bgcolor<\/strong> -&gt; El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.<\/p>\n<p><strong>hpspace<\/strong> y <strong>vspace<\/strong> -&gt; Estos dos atributos sirven para definir el n\u00famero de p\u00edxels que debe aparecer entre la marquesina y otros contenidos de la p\u00e1gina, en horizontal y vertical.<\/p>\n<p>En los ejemplos que vamos a ver en funcionamiento hemos creado 2 marquesinas. Una en la cabecera de la p\u00e1gina ocupando pr\u00e1cticamente todo el ancho y con direcci\u00f3n izquierda.<\/p>\n<pre>&lt;marquee direction=\"left\" width=\"880px\" height=\"30px\" scrollamount=\"4\" scrolldelay=\"100\" onMouseOver=\"stop()\" onMouseOut=\"start()\"&gt;\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n   ---CONTENIDO QUE SE MUEVE EN LA CABECERA---\r\n&lt;\/marquee&gt;<\/pre>\n<p>Y la otra marquesina la colocamos en la sidebar o columna izquierda para presentar otra posibilidad que es la movilidad de la marquesina en direcci\u00f3n hacia arriba.<\/p>\n<pre>&lt;marquee direction=\"up\" width=\"190\" height=\"600\" scrollamount=\"4\" scrolldelay=\"100\" onMouseOver=\"stop()\" onMouseOut=\"start()\"&gt;\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n   ---CONTENIDO QUE SE MUEVE EN LA SIDEBAR---\r\n&lt;\/marquee&gt;<\/pre>\n<p>El efecto que se produce es hacer scroll autom\u00e1tico (vertical o horizontalmente) hasta que se pase el rat\u00f3n por encima de la marquesina.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/modulos-prestashop\/es\/79-noticias-en-marquesina.html\" target=\"_blank\">Ver m\u00f3dulo de noticias en marquesina para Prestashop <\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/javascript\/marquee-scroll-move\/\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a utilizar la etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML. La etiqueta marquee se utiliza de la siguiente forma: &lt;marquee&gt;&#8211;YOUR CONTENT&#8212;&lt;\/marquee&gt; Este elemento HTML soporta una serie de atributos: Marquee soporta una serie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6614,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,21],"tags":[74,124],"class_list":["post-2130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-prestashop","tag-contenedores","tag-modulos-prestashop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Marquee scroll move - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Marquee scroll move - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-15T15:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-23T13:53:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"626\" \/>\n\t<meta property=\"og:image:height\" content=\"626\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/\",\"name\":\"Marquee scroll move - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg\",\"datePublished\":\"2013-01-15T15:11:44+00:00\",\"dateModified\":\"2016-05-23T13:53:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg\",\"width\":626,\"height\":626},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Marquee scroll move\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Marquee scroll move - Jose Aguilar Blog","description":"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Marquee scroll move - Jose Aguilar Blog","og_description":"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-01-15T15:11:44+00:00","article_modified_time":"2016-05-23T13:53:24+00:00","og_image":[{"width":626,"height":626,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/","url":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/","name":"Marquee scroll move - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg","datePublished":"2013-01-15T15:11:44+00:00","dateModified":"2016-05-23T13:53:24+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"La etiqueta marquee para realizar una animaci\u00f3n sencilla en una p\u00e1gina web. Como animar una imagen o hacer que el texto se mueva s\u00f3lo con HTML.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/01\/marquee-icon.jpg","width":626,"height":626},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/marquee-scroll-move\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Marquee scroll move"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2130"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2130\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6614"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}