{"id":32,"date":"2019-02-15T15:13:10","date_gmt":"2019-02-15T15:13:10","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=32"},"modified":"2020-12-11T12:28:53","modified_gmt":"2020-12-11T12:28:53","slug":"scrolling-text","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/scrolling-text\/","title":{"rendered":"Scrolling Text Made Easy &#8211; 4 Ways to Set It Up"},"content":{"rendered":"<h2>What is scrolling text?<\/h2>\n<p>Scrolling text is text that moves onto a website page, by following the direction you define for it. It is dynamically displayed and has the properties you have set for this.<\/p>\n<p>Types of such text:<\/p>\n<ul>\n<li>Classic (the text is scrolling onto the page in an infinite number of iterations)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"zLarzM\" data-default-tab=\"html,result\" data-user=\"Veronica18\" data-pen-title=\"zLarzM\">See the Pen <a href=\"https:\/\/codepen.io\/Veronica18\/pen\/zLarzM\/\">zLarzM<\/a> by Veronica (<a href=\"https:\/\/codepen.io\/Veronica18\">@Veronica18<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<ul>\n<li>Slide-in (the text is scrolling onto the page up to a point, and then stays in place)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"VBderY\" data-default-tab=\"html,result\" data-user=\"Veronica18\" data-pen-title=\"VBderY\">See the Pen <a href=\"https:\/\/codepen.io\/Veronica18\/pen\/VBderY\/\">VBderY<\/a> by Veronica (<a href=\"https:\/\/codepen.io\/Veronica18\">@Veronica18<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<ul>\n<li>Alternate (the text is scrolling onto the page in one direction, then bounces back to the opposite direction, in another iteration of the movement)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"pZKgpL\" data-default-tab=\"html,result\" data-user=\"Veronica18\" data-pen-title=\"pZKgpL\">See the Pen <a href=\"https:\/\/codepen.io\/Veronica18\/pen\/pZKgpL\/\">pZKgpL<\/a> by Veronica (<a href=\"https:\/\/codepen.io\/Veronica18\">@Veronica18<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<ul>\n<li>Progress bar for scrolling text<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"0\" data-slug-hash=\"jpKWdx\" data-default-tab=\"js,result\" data-user=\"Veronica18\" data-pen-title=\"Super Simple Progress Bar\">See the Pen <a href=\"https:\/\/codepen.io\/Veronica18\/pen\/jpKWdx\/\">Super Simple Progress Bar<\/a> by Veronica (<a href=\"https:\/\/codepen.io\/Veronica18\">@Veronica18<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>This type of text is a quite rarely used feature, only for those cases when it brings real value to the website pages.<\/p>\n<p>The example below proves good use of such text, in that it includes real-time, valuable information presented to visitors:<\/p>\n<div id=\"attachment_1018\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.dailyfx.com\/real-time-news\"><img aria-describedby=\"caption-attachment-1018\" loading=\"lazy\" class=\"wp-image-1018 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/daily-forex-1024x497.png\" alt=\"\" width=\"1024\" height=\"497\" \/><\/a><p id=\"caption-attachment-1018\" class=\"wp-caption-text\">Daily Forex<\/p><\/div>\n<p>Another example of properly using such text is that of a website where real-time news is feeding a specific area in the homepage with all readers need to know:<\/p>\n<p><a href=\"https:\/\/ccir.ro\/\"><img loading=\"lazy\" class=\"aligncenter wp-image-1019 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/ccir-1024x453.png\" alt=\"\" width=\"1024\" height=\"453\" \/><\/a><\/p>\n<p>Scrolling text is practical for blogs where blog authors intend to draw attention to certain posts, by i.e. dynamically presenting their titles on the home page. It is also useful for newspapers that need to bring to the front real-time news and present them as-they-happen. Also, showing users how they progress in scrolling website text might be useful for better engagement with the site content (they know exactly how much they have read and how long it would take to scroll to the bottom of an article).<\/p>\n<h2>Scrolling Text \u2013 How to Add It to Your Website Pages?<\/h2>\n<p>There are 3 main methods of adding such text to your website pages: to use 1. a plugin (for WordPress websites), to use 2. a code generator giving you the code to paste in the page source, or else to write the code yourself (3. HTML or 4. CSS animations).<\/p>\n<h2>Automated Scrolling Text (How To\u2019s)<\/h2>\n<p>Let\u2019s tackle the methods of making such text function on your website pages. When readers land on a page, they will be able to watch the text moving (scrolling horizontally \u2013 left to right\/right to left, scrolling vertically \u2013 from the bottom up\/from top to bottom, bounce, slide in). How do you implement these?<\/p>\n<h3>1. Easy Way to Add Scrolling Text: Use a WordPress Plugin<\/h3>\n<p>If your site runs on WordPress, there\u2019s one best method for adding this type of text to a page. Its name is <em>Ditty News Ticker<\/em>, and it\u2019s a plugin specially created for inserting scrolling text into the website.<\/p>\n<p>There\u2019s a wide number of plugins available for scrolling text, we\u2019ll speak in this article about the most trusted and completely functional one.<\/p>\n<p>Here are the steps for including such text into a WordPress website, using this method:<\/p>\n<p>a. Search for and install plugin<\/p>\n<p>In the WordPress Admin dashboard, go to the Plugins section -&gt; Add New and type <em>Ditty News Ticker<\/em> into the search box.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1021 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/ditty-news-ticker-1024x301.png\" alt=\"\" width=\"1024\" height=\"301\" \/>b. Click on Install Now.<\/p>\n<p>c. Click on Activate.<\/p>\n<p>d. Check whether the plugin is part of the installed and active plugins, by going to Plugins -&gt; Installed Plugins.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1022 \" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/ditty-news-ticker2-1024x222.png\" alt=\"\" width=\"1024\" height=\"222\" \/>e. In the WordPress Admin dashboard, a new section has been added to the menu: it is titled <em>News Tickers<\/em>. By clicking on this section, you can go to the dashboard dedicated to creating and customizing a new ticker.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1023 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/ditty-news-ticker3-1024x488.png\" alt=\"\" width=\"1024\" height=\"488\" \/>f. Click and Add New New Ticker, to create scrolling text in a certain part of a webpage. It should open a dashboard as the one in the screenshot above.<\/p>\n<p>g. Start by giving a name to the news ticker, to facilitate the management of texts in different portions of the page\/website.<\/p>\n<p>h. Customize the news ticker, before applying it to the page in the website.<\/p>\n<h4><em><u>Ticker Type<\/u><\/em><\/h4>\n<p><u>Ticker Text<\/u><\/p>\n<p>You have to add in the dedicated field of this tab the text you want to submit to a scrolling movement.<\/p>\n<p><u>Ticker Type \u2013 Link &amp; Target<\/u><\/p>\n<p>If wanted, you can add a link to the text. For doing so, you must specify the URL of the destination page\/page section, and select whether the link will open in the same tab or in a new tab.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1024 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/ticker-type.png\" alt=\"\" width=\"807\" height=\"175\" \/><\/p>\n<h4><em><u>Ticker Mode &#8211; Scroll<\/u><\/em><\/h4>\n<p><u>Scroll Direction<\/u><\/p>\n<p>Specify the direction the text will scroll to, when the animation is activated: left, right, up, down.<\/p>\n<p><u>Scroll Speed <\/u><\/p>\n<p>Set the speed at which the text is scrolling onto the page. Larger values equal a speedier scrolling of the text in the respective section.<\/p>\n<h4><em><u>Ticker Mode \u2013 Rotate<\/u><\/em><\/h4>\n<p><u>Rotation Type<\/u><\/p>\n<p>Select the type of rotation for the ticker: fade, slide left, slide right, slide up or slide down.<\/p>\n<ol>\n<li>When all customizations are in place, click Save\/Update the ticker with the new properties.<\/li>\n<li>You will find a shortcode (in the customization dashboard) that you need to copy and paste into the page where you want the scrolling text to appear.<\/li>\n<li>After having applied the shortcode to the page section dedicated to scrolling text, save the changes and see the results.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>You will have a nice text scrolling on the page (left\/right, up\/down, depending on how you have set it), at the speed you defined into the dashboard, and scrolling in the direction you specified there.<\/p>\n<h3>2. Medium Difficulty Method: Scrolling Text with HTML Code Generator<\/h3>\n<p>For more ease of use, you can opt for a HTML code generator (marquee generator). You have the possibility to enter the text you want to submit to a scrolling movement, and adjust its properties directly online, in the code generator.<\/p>\n<p>This marquee generator can be found <u><a href=\"https:\/\/www.html.am\/html-generators\/marquee-generator.cfm\">here<\/a><\/u>.<\/p>\n<p>You will not only enter your own text, but also customize:<\/p>\n<p>a. Text color<\/p>\n<p>b. Background Color<\/p>\n<p>c. Text Font<\/p>\n<p>d. Scrolling direction<\/p>\n<p>e. Scrolling speed<\/p>\n<p>f. Type of movement (scroll\/bounce)<\/p>\n<p>g. Text padding<\/p>\n<p>h. Text margins<\/p>\n<p>i. Font size<\/p>\n<p>j. Text in bold\/italics<\/p>\n<p>k. Text alignment (left, right, center, justify)<\/p>\n<p>l. Line height<\/p>\n<p>You also can apply a scrolling effect to an image. Specify the URL of the image and the alternate text for that image, and the selected image will have a scrolling movement into the page.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1020 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/scrolling-text-code-generator.png\" alt=\"\" width=\"738\" height=\"824\" \/><\/p>\n<h3>3. Code Yourself: Scrolling Text with HTML code<\/h3>\n<p>The first, and most widely known method of implementing scrolling text is to use HTML code. The tag corresponding to this function is named \u201cmarquee\u201d, and has the following form:<\/p>\n<p>&lt;MARQUEE&gt;\u2026 &lt;\/MARQUEE&gt;.<\/p>\n<p>This tag comes in the html code of a page, and can have the following attributes:<\/p>\n<p>a. Width \u2013 this attribute defines the horizontal distance upon which the scrolling text unfolds;<\/p>\n<p>&lt;MARQUEE WIDTH=100&gt;This is my scrolling text&lt;\/MARQUEE&gt;<\/p>\n<p>b. Height \u2013 this refers to the vertical distance upon which the scrolling text unfolds;<\/p>\n<p>&lt;MARQUEE HEIGHT=75&gt;This is my scrolling text&lt;\/MARQUEE&gt;<\/p>\n<p>c. Behavior \u2013 the \u201cBehavior\u201d attribute creates a certain movement type for the text concerned by this tag (different behaviors are: scroll, slide, alternate).<\/p>\n<ul>\n<li>Classic scroll means the text is infinitely scrolling.<\/li>\n<li>Slide means the text is scrolling up to a point and then stays in place.<\/li>\n<li>lternate means the text is scrolling up to a point and then bounces back to an opposite scrolling movement.<\/li>\n<\/ul>\n<p>&lt;MARQUEE BEHAVIOR=SCROLL&gt;Scrolling text&lt;\/MARQUEE&gt;<\/p>\n<p>&lt;MARQUEE BEHAVIOR=SLIDE&gt;Slide-in text&lt;\/MARQUEE&gt;<\/p>\n<p>&lt;MARQUEE BEHAVIOR=ALTERNATE&gt;Alternate text movements&lt;\/MARQUEE&gt;<\/p>\n<p>d. Loop \u2013 the attribute defines how many times the text movement is iterated<\/p>\n<p>&lt;MARQUEE LOOP=2 BEHAVIOR=SLIDE&gt;This is my text&lt;\/MARQUEE&gt;<\/p>\n<p>e. Direction \u2013 this sets up the direction of movement for the text (right, left, up or down)<\/p>\n<p>&lt;MARQUEE DIRECTION=LEFT&gt;Here is my text&lt;\/MARQUEE&gt;<\/p>\n<p>&lt;MARQUEE DIRECTION=RIGHT&gt;My text&lt;\/MARQUEE&gt;<\/p>\n<p>&lt;MARQUEE DIRECTION=UP&gt;This is my text&lt;\/MARQUEE&gt;<\/p>\n<p>&lt;MARQUEE DIRECTION=DOWN&gt;Here is my text&lt;\/MARQUEE&gt;<\/p>\n<p>f. Background Color \u2013 this attribute defines the color of the background the text is moving onto<\/p>\n<p>&lt;MARQUEE BGCOLOR=Blue&gt;Scrolling text on blue background&lt;\/MARQUEE&gt;<\/p>\n<p>g. Scrollamount \u2013 the attribute refers to the speed at which the text is scrolling on the page. A higher amount relates to a speedier scrolling, while smaller values relate to a smoother scrolling movement.<\/p>\n<p>&lt;MARQUEE SCROLLAMOUNT=10&gt;Text moving at this speed&lt;\/MARQUEE&gt;<\/p>\n<p><em>Please note that this method (using the Marquee HTML tag) is deprecated and is not recommended for use in current websites. The information above is purely as a rough guide that should make you aware of what properties to follow when creating scrolling text.<\/em><\/p>\n<h3>4. Write the Code Yourself: Scrolling Text with CSS Animations<\/h3>\n<p>This is the best method to create scrolling text. It is compliant with the W3C standards; however, it takes a little more time and effort to write the code.<\/p>\n<p>We\u2019ll explain you how to create this code, by highlighting key aspects of the coding lines.<\/p>\n<p>The CSS marquees are formed using <strong>CSS animations and the @keyframes rule<\/strong>.<\/p>\n<p><u>a. CSS animations<\/u> have the following syntax:<\/p>\n<p>[&lt;animation-name&gt; || &lt;animation-duration&gt; || &lt;animation-timing-function&gt; || &lt;animation-delay&gt; || &lt;animation-iteration-count&gt; || &lt;animation-direction&gt; || &lt;animation-fill-mode&gt;]<\/p>\n<p>Where:<\/p>\n<p>animation-name = the name of the animation<\/p>\n<p>animation-duration = the length of time an animation takes to complete (one iteration)<\/p>\n<p>animation-timing-function = how an animation progresses between keyframes<\/p>\n<p>animation-delay = time when the animation begins<\/p>\n<p>animation-iteration-count = the number of iterations defined for an animation<\/p>\n<p>animation-direction = the direction an animation follows onto the webpage<\/p>\n<p>animation-fill-mode = defines the values applied by the animation outside the time it is playing.<\/p>\n<p><u>b. The @keyframes rule<\/u> (what it is and what it contains):<\/p>\n<p>First, the syntax of the @keyframes rule is as follows:<\/p>\n<p>@keyframes: name {<\/p>\n<p>keyframes selector {<\/p>\n<p>keyframes declaration<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>The <em>@keyframes<\/em> rule defines the style of the text, at different points throughout the animation, while this is playing.<\/p>\n<p>It contains selectors and declarations.<\/p>\n<p><em>Selectors<\/em> are used to define different points along the iteration, they can be from\/to keywords, or they can be expressed in percentages.<\/p>\n<p><em>Declarations<\/em> represent the set of properties and values specific to that @keyframes rule. They are marked by curly brackets.<\/p>\n<p>&nbsp;<\/p>\n<p>For the code to be created correctly, use translateX for a horizontal movement of the scrolling text, and translateY for a vertical movement of the scrolling text.<\/p>\n<p><u>Some particularities of CSS code<\/u><\/p>\n<p>In the coding lines, you will have to include:<\/p>\n<p>-moz-transform = it defines the transformation of the text<\/p>\n<p>-webkit-transform = it defines transformation of the text in two-dimensional or three-dimensional space<\/p>\n<h3>5. Manually Scrolling Text (Progress Bar)<\/h3>\n<p>When users land on a lengthy page, especially on blogs, it\u2019s worthwhile to include a <strong>progress bar<\/strong> that notifies them of the reading progress and hence, engages them further into browsing the page.<\/p>\n<p>This time, <strong>scrolling text is executed by people<\/strong>, and there\u2019s a visual \u201ccounter\u201d signalling them what amount of text they have been scrolled\/what amount of text still needs to be scrolled.<\/p>\n<p>For <strong>websites build on WordPress<\/strong>, there\u2019s a quick and easy way to add a progress bar to the lengthy pages you find useful for the readers to pass through. Again, it\u2019s a plugin, named Worth the Read.<\/p>\n<p>a. In the WordPress Admin dashboard, go to the Plugins -&gt; Add New section.<\/p>\n<p>b. Type Worth the Read in the search bar and search for the respective plugin.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1026 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/worth-the-read1-1024x302.png\" alt=\"\" width=\"1024\" height=\"302\" \/>c. Click Install Now.<\/p>\n<p>d. Click Activate.<\/p>\n<p>e. Check in the list of active plugins that Worth the Read has been properly installed and activated.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1027 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/worth-the-read2-1024x91.png\" alt=\"\" width=\"1024\" height=\"91\" \/>f. Installing the plugin adds a new section in the WordPress Admin menu, named as such: Worth the Read. Click on it and start setting the features that define the progress bar in the website pages.<\/p>\n<h4><em><u>Functionality tab<\/u><\/em><\/h4>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1028 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/worth-the-read3-1024x480.png\" alt=\"\" width=\"1024\" height=\"480\" \/><\/p>\n<h4><u>Where you\u2019ll display a progress bar<\/u><\/h4>\n<p>You can choose to display the progress bar on specific sections of the website: posts\/pages\/home page or all of them.<\/p>\n<h4><u>Placement of the progress bar<\/u><\/h4>\n<p>The plugin comes with several options as to the placement of the progress bar. Choose to set it in the upper part\/bottom of the screen, or on the left\/right side of the screen.<\/p>\n<p>A common rule is to place it at the bottom of the screen, and as users have got used to this practice, it\u2019s recommended that you choose this placement.<\/p>\n<h4><em><u>Style Tab<\/u><\/em><\/h4>\n<p>From here, you can set the look, colors, dimensions of the progress bar, as it is shown on the page on which it marks users\u2019 scrolling text.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1029 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/style-tab-1024x459.png\" alt=\"\" width=\"1024\" height=\"459\" \/><\/p>\n<h4><u>Thickness<\/u><\/h4>\n<p>This defines how thick the progress bar will be on the page where it measures the visit progress.<\/p>\n<h4><u>Foreground Color<\/u><\/h4>\n<p>The foreground is the part of the progress bar that moves when scrolling. You should set a contrasting color, for the progress to really be visible to users.<\/p>\n<h4><u>Foreground Opacity<\/u><\/h4>\n<p>If set to 100% opaque, the foreground of the progress bar will more efficiently mark the visit progress. However, more stylish effects are possible, when setting a different value of opacity of the foreground.<\/p>\n<h4><u>Background Color<\/u><\/h4>\n<p>The background refers to the static part of the progress bar, onto which the foreground moves on scroll. Its color can be adjusted to your liking.<\/p>\n<h4><u>Transparent Background<\/u><\/h4>\n<p>For practical purposes, there\u2019s an option of the plugin to set the progress bar background to transparent.<\/p>\n<h4><u>Muted Foreground Color<\/u><\/h4>\n<p>This option refers to the foreground when scrolling text is stopped. So, when users do not scroll down the page, the foreground will have the color defined from here.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1030 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/08\/progress-bar-1024x225.png\" alt=\"\" width=\"1024\" height=\"225\" \/><\/p>\n<h2>A wrapping word<\/h2>\n<p>Setting up such text into a page of your website is easy. Any of the above-mentioned methods will do, though we recommend you choose CSS animations or simpler, the Ditty News Ticker plugin (if your site is built using WordPress). And users\u2019 scrolling text can also be turned in a simple way to drive more engagement: by inserting a reading progress bar into the webpage. Thus, they will know exactly how they have read and how much they still have to read, and this will keep them on page, with a promise this will not consume much of their precious time.<\/p>\n<p>Happy usage of scrolling text!<\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is scrolling text? Scrolling text is text that moves onto a website page, by following the direction you define for it. It is dynamically displayed and has the properties you have set for this. Types of such text: Classic (the text is scrolling onto the page in an infinite number of iterations) &nbsp; See&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/scrolling-text\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[106],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to put scrolling text into your website pages - ColibriWP<\/title>\n<meta name=\"description\" content=\"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\u2019ll have scrolling text in the website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/scrolling-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to put scrolling text into your website pages - ColibriWP\" \/>\n<meta property=\"og:description\" content=\"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\u2019ll have scrolling text in the website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/scrolling-text\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-15T15:13:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-11T12:28:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"275\" \/>\n\t<meta property=\"og:image:height\" content=\"183\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iulian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg\",\"width\":275,\"height\":183},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/\",\"name\":\"How to put scrolling text into your website pages - ColibriWP\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/#primaryimage\"},\"datePublished\":\"2019-02-15T15:13:10+00:00\",\"dateModified\":\"2020-12-11T12:28:53+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\\u2019ll have scrolling text in the website.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/scrolling-text\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/scrolling-text\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scrolling Text Made Easy &#8211; 4 Ways to Set It Up\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\",\"name\":\"iulian\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"caption\":\"iulian\"},\"url\":\"https:\/\/colibriwp.com\/blog\/author\/iulian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to put scrolling text into your website pages - ColibriWP","description":"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\u2019ll have scrolling text in the website.","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:\/\/colibriwp.com\/blog\/scrolling-text\/","og_locale":"en_US","og_type":"article","og_title":"How to put scrolling text into your website pages - ColibriWP","og_description":"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\u2019ll have scrolling text in the website.","og_url":"https:\/\/colibriwp.com\/blog\/scrolling-text\/","og_site_name":"ColibriWP Blog","article_published_time":"2019-02-15T15:13:10+00:00","article_modified_time":"2020-12-11T12:28:53+00:00","og_image":[{"width":275,"height":183,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"iulian","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/scrolling-text\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2019\/02\/scrolling-text.jpg","width":275,"height":183},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/scrolling-text\/#webpage","url":"https:\/\/colibriwp.com\/blog\/scrolling-text\/","name":"How to put scrolling text into your website pages - ColibriWP","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/scrolling-text\/#primaryimage"},"datePublished":"2019-02-15T15:13:10+00:00","dateModified":"2020-12-11T12:28:53+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"4 methods to install scrolling text will take your technical skills a step further. Check these methods and you\u2019ll have scrolling text in the website.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/scrolling-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/scrolling-text\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/scrolling-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Scrolling Text Made Easy &#8211; 4 Ways to Set It Up"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e","name":"iulian","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","caption":"iulian"},"url":"https:\/\/colibriwp.com\/blog\/author\/iulian\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/32"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":0,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/3977"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}