{"id":587,"date":"2017-03-17T13:00:20","date_gmt":"2017-03-17T06:00:20","guid":{"rendered":"http:\/\/www.yellowweb.id\/blog\/?p=587"},"modified":"2017-03-17T13:04:18","modified_gmt":"2017-03-17T06:04:18","slug":"tentang-html-marquee-tag","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/","title":{"rendered":"Tentang HTML marquee Tag"},"content":{"rendered":"<p>Halo sobat yellowweb, kita berjumpa lagi di artikel terbaru. Untuk artikel kali ini kita akan mencoba berkenalan dengan tag HTML yang mungkin sangat di kenal karena, memiliki fitur yang cukup membuat orang kali pertama mengenal HTML, mungkin bisa berkata wow KEREN. ya Tag HTML Marquee.<br \/>\n<!--more--><\/p>\n<p>Tag Marquee memungkinkan elemen tersebut membuat tulisan berjalan, seperti layaknya kita melihat news ticker berita yang ada di televisi. HTML dengan mudah menyediakan fitur tersebut dengan menggunakan tag Marquee.<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Marquee HTML&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;marquee&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\t&lt;br&gt;\r\n\r\n\t&lt;marquee direction=\"up\"&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\t&lt;br&gt;\r\n\r\n\t&lt;marquee direction=\"right\"&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\t&lt;br&gt;\r\n\r\n\t&lt;marquee behavior=\"alternate\"&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\t&lt;br&gt;\r\n\r\n\t&lt;marquee scrollamount=\"20\"&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\t&lt;br&gt;\r\n\r\n\t&lt;marquee scrolldelay=\"100\"&gt;Tulisan ini menggunakan Tag HTML Marquee,...&lt;\/marquee&gt;\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><script async src=\"\/\/jsfiddle.net\/miftahfs\/2a20rux9\/embed\/result\/\"><\/script><\/p>\n<p>Kalian bisa menggunakan sesuai dengan kebutuhan.<\/p>\n<p>Untuk fitur ini di dukung oleh semua browser, namun ada beberapa attibut yang tidak berjalan. Untuk amannya kalian bisa menggunakan browser Mozilla atau Edge.<\/p>\n<p>Sebagai tambahan mungkin bagi teman-teman, kurang menyukai dengan efek slidenya karena terkesan kurang smooth, cara ini kita bisa mensiasatinya dengan menggunakan CSS Marquee dan tentunya berbeda ya teman-teman. Dengan menggunakan CSS Marquee efek yang di timbulkan akan terasa lebih enak untuk di lihat, karena akan terlihat lebih smooth saat tulisan berjalan.<\/p>\n<pre class=\"lang:default decode:true \" >&lt;!DOCTYPE html&gt;\r\n&lt;title&gt;Example&lt;\/title&gt;\r\n\r\n&lt;!-- Styles --&gt;\t\r\n&lt;style style=\"text\/css\"&gt;\r\n.example1 {\r\n height: 50px;\t\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.example1 h3 {\r\n font-size: 3em;\r\n color: limegreen;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n \/* Starting position *\/\r\n -moz-transform:translateX(100%);\r\n -webkit-transform:translateX(100%);\t\r\n transform:translateX(100%);\r\n \/* Apply animation to this element *\/\t\r\n -moz-animation: example1 15s linear infinite;\r\n -webkit-animation: example1 15s linear infinite;\r\n animation: example1 15s linear infinite;\r\n}\r\n\/* Move it (define the animation) *\/\r\n@-moz-keyframes example1 {\r\n 0%   { -moz-transform: translateX(100%); }\r\n 100% { -moz-transform: translateX(-100%); }\r\n}\r\n@-webkit-keyframes example1 {\r\n 0%   { -webkit-transform: translateX(100%); }\r\n 100% { -webkit-transform: translateX(-100%); }\r\n}\r\n@keyframes example1 {\r\n 0%   { \r\n -moz-transform: translateX(100%); \/* Firefox bug fix *\/\r\n -webkit-transform: translateX(100%); \/* Firefox bug fix *\/\r\n transform: translateX(100%); \t\t\r\n }\r\n 100% { \r\n -moz-transform: translateX(-100%); \/* Firefox bug fix *\/\r\n -webkit-transform: translateX(-100%); \/* Firefox bug fix *\/\r\n transform: translateX(-100%); \r\n }\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML --&gt;\t\r\n&lt;div class=\"example1\"&gt;\r\n&lt;h3&gt;Tulisan berjalan,... &lt;\/h3&gt;\r\n&lt;\/div&gt;<\/pre>\n<p><script async src=\"\/\/jsfiddle.net\/miftahfs\/o2jj4qmb\/embed\/result\/\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Halo sobat yellowweb, kita berjumpa lagi di artikel terbaru. Untuk artikel kali ini kita akan mencoba berkenalan dengan tag HTML yang mungkin sangat di kenal karena, memiliki fitur yang cukup membuat orang kali pertama mengenal HTML, mungkin bisa berkata wow KEREN. ya Tag HTML Marquee.<\/p>\n","protected":false},"author":1,"featured_media":592,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,43,11],"tags":[8,315,13,314,313],"class_list":["post-587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-tutorial","tag-css","tag-css-marquee","tag-html","tag-html-marquee","tag-marquee"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tentang HTML marquee Tag - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tentang HTML marquee Tag - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Halo sobat yellowweb, kita berjumpa lagi di artikel terbaru. Untuk artikel kali ini kita akan mencoba berkenalan dengan tag HTML yang mungkin sangat di kenal karena, memiliki fitur yang cukup membuat orang kali pertama mengenal HTML, mungkin bisa berkata wow KEREN. ya Tag HTML Marquee.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-17T06:00:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-17T06:04:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg?fit=1015%2C574&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1015\" \/>\n\t<meta property=\"og:image:height\" content=\"574\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Tentang HTML marquee Tag\",\"datePublished\":\"2017-03-17T06:00:20+00:00\",\"dateModified\":\"2017-03-17T06:04:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/\"},\"wordCount\":159,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/marquee-html.jpeg\",\"keywords\":[\"css\",\"css marquee\",\"html\",\"html marquee\",\"marquee\"],\"articleSection\":[\"CSS\",\"HTML\",\"Tutorial\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/\",\"name\":\"Tentang HTML marquee Tag - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/marquee-html.jpeg\",\"datePublished\":\"2017-03-17T06:00:20+00:00\",\"dateModified\":\"2017-03-17T06:04:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/marquee-html.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/marquee-html.jpeg\",\"width\":1015,\"height\":574,\"caption\":\"\\\"An Evening with Photographer George Steinmetz\\\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/tentang-html-marquee-tag\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tentang HTML marquee Tag\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tentang HTML marquee Tag - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/","og_locale":"en_GB","og_type":"article","og_title":"Tentang HTML marquee Tag - YELLOWWEB.ID","og_description":"Halo sobat yellowweb, kita berjumpa lagi di artikel terbaru. Untuk artikel kali ini kita akan mencoba berkenalan dengan tag HTML yang mungkin sangat di kenal karena, memiliki fitur yang cukup membuat orang kali pertama mengenal HTML, mungkin bisa berkata wow KEREN. ya Tag HTML Marquee.","og_url":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2017-03-17T06:00:20+00:00","article_modified_time":"2017-03-17T06:04:18+00:00","og_image":[{"width":1015,"height":574,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg?fit=1015%2C574&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Tentang HTML marquee Tag","datePublished":"2017-03-17T06:00:20+00:00","dateModified":"2017-03-17T06:04:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/"},"wordCount":159,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg","keywords":["css","css marquee","html","html marquee","marquee"],"articleSection":["CSS","HTML","Tutorial"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/","url":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/","name":"Tentang HTML marquee Tag - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg","datePublished":"2017-03-17T06:00:20+00:00","dateModified":"2017-03-17T06:04:18+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/03\/marquee-html.jpeg","width":1015,"height":574,"caption":"\"An Evening with Photographer George Steinmetz\""},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/tentang-html-marquee-tag\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Tentang HTML marquee Tag"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=587"}],"version-history":[{"count":4,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/587\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/587\/revisions\/591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/592"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}