Insert creeping line into html. Web design and search engine optimization. How to insert an image into the creeping line
And everyone is running, running! And the line runs. Stop! Which line is running? Of course, running and, of course, in front of the eyes of users on someone else's site. And you want one for yourself? It doesn't matter, now we will learn how to make a creeping line on our own.
Who is running and where?
A creeping line is a text of a certain length that makes a translational or uniform movement to either side on a certain area of the page. Variations on the theme of the rhythm of the movement of the text in the scrolling line are also possible.
It sounds boring, but it looks a lot more fun.
The running line for the site was popular a few years ago. Then it was used as a news feed or to display advertising texts. The main problem such a line was its constancy, which soon became boring.
The point is that to replace the running text, it was often necessary to climb into the html code of the site and change it to a new one. It is clear that they did not do this very often.
Today, the whole process has become much easier. If we talk about CMS, many specialized plugins have been written for them that greatly simplify the implementation of the creeping line.
Nowadays, most of the animation on the Internet is created using flash technology, and crawling text in web design is considered almost "vintage". But all the same, the words running before our eyes have not lost their primordial beauty.
Creeping line can be used as a signboard for the name of the site or its section. It is also ideal for posting some clever thought, which can be another way to attract attention from site visitors.
Creeping line written in html
Running line on the html site is the easiest way to implement it with wide range for creativity.
The tag is responsible for the movement of text in html
< marquee >text
This tag has many meanings and attributes:
1) direction - sets the direction of movement of the text. Possible attribute values:
- left- to the right side;
- right - left;
- up - up;
- down - down;
2) behavior - is responsible for the type of scrolling. Accepted values:
- scroll - movement of the text in one direction;
- slide - one-time movement followed by a stop ( pop-up text);
- alternate - in the given direction and back.
3) loop - determines the number of loop repetitions. Possible values:
- infinite - an infinite number of cycles ( default value).
- Integer.
4) scrollamount - sets the speed of the creeping line. Accepts an integer value.
5) width - the length of the moving area is set.
6) height - the height of the moving area is set.
7) scrolldelay - sets the delay time between cycles in milliseconds.
The rest of the tag attributes are common style for all elements of the hypertext language.
The tag was created specifically for Internet browser Explorer. Until recently, it was not accepted by some other browsers, but now everyone sees it.
And if you play around with the code a little, you can make not only the text move, but also the picture. And this is already First level animation, gentlemen!
Here's the code for this example:
Creeping line for Joomla
For CMS-based site owners, the above example will not work. More precisely, it will do, but you need to know where you can "stick" this example into the html code. And this is not easy.
All CMS are built on php based which is a server-side programming language. It is on it that the code responsible for generating the site pages is written. That is, each element of the site page ("footer", "header") is generated during the execution of the code. So edit php code your site on the CMS is not worth it.
Running line for joomla can be implemented by installing special plugins. One of them is called Moving Text. Let's consider its installation step by step:
1. Go to your Joomla control panel. Through the top menu item "Extensions" go to " Extension manager».
2. On the "Installation" tab of the manager, select the download option and click on the "Install" button:
3. Then go to " Plugin manager».
4. In the list below we find the required plugin. We mark it and click on the "Change" button at the top. Next to it is the "Enable" button, which is used to activate the extension:
5. In the next window in the fields " main parameters»Set the parameters for displaying the creeping line ( length, speed and interval between cycles). After making changes, do not forget to click on the "Save" button (top right).
6. Then through the main menu item "Materials" go to " Material manager". In the lower list, tick the required material and click on the "Change" button ( circle with a pencil).
7. In the editor, click on the "html" button. The code editor window will open on the screen. Insert there (text = Desired text). Instead of "Required text", write what we need, and click on "Update":
After that, a creeping line will appear in the edited material:
Other creeping line implementations
Running text can be implemented not only with using html and installing plugins. A javascript implementation is considered a good option. Here's an example of how it works:
Here is a piece of code that goes into the tag
:And here is a piece of script that needs to be placed in the place where the scrolling line is displayed:
You can also implement running text using the jquery library:
The example code is shown in full. If desired, css, jquery and html can be split into separate files:
What's the bottom line?
As you can see from the examples, of all the creeping line implementations, the html version is the most "lightweight" one. And its functionality is much easier to understand and master. But this implementation is not suitable for CMS sites. There are only plugins left for them.
Ticker
Ticker formed with an opening tag (closing tag is required).
width = ″… ″ - the width of the scrolling line in pixels or as a percentage of the screen width.
Height = ″… ″ - the height of the creeping line in pixels or percent. (If you make a creeping line in one line, then you can not specify the height, it itself is selected to the size of the letters).
bgcolor = ″… ″ - defines the background color of the crawl line.
behavior = ″… ″ specifies the type of movement (behavior) of the scrolling line and has the following values
scroll - cyclic scrolling of the text from one end to the other
slide - the text appears at one edge and stops at the other.
alternate - the text moves from one edge to the other and back.
direction = ″… ″ - defines the direction of movement of the scrolling line. Has the following meanings:
left - the text moves to the left along the line
right - the text moves to the right along the line
up - the entire line moves from bottom to top
down - the line moves from top to bottom
scrollamount = ″… ″ - step of movement in a line in pixels, by which the text is moved within a specified time interval. For example
scrollamount = ″ 1 ″
scrollamount = ″ 2 ″
scrollamount = ″ 3 ″
scrolldelay = ″… ″ - This attribute sets the time interval between the steps of the scrolling line in milliseconds. For example
scrolldelay = ″ 100 ″
scrolldelay = ″ 200 ″
scrolldelay = ″ 300 ″
loop = ″… ″ - sets the number of scrolling text passes. By default, or when set to -1 (infinite), the browser will scroll the text an infinite number of times.
hspace = ″… ″ - This attribute sets the margin in pixels to the right and left of the crawl line.
hspace = ″ 10 ″
hspace = ″ 0 ″
vspace = ″… ″ - This attribute sets the indentation in pixels above and below the crawl line.
hspace = ″ 0 ″
hspace = ″ 10 ″
HTML - creeping line codes
Insert your text here
Your text
Your text
THANKS for your subscription!
your running text
your running text
your message here
your running text
your running text
your running text
your running text
your running text
your text here
your exciting message here
Thank you for visiting the site!
YOUR TEXT article comments
<
Often when writing your site, or managing it, there is a need to install a creeping line on the site. Such a design element draws the attention of visitors to the necessary sections of the site, and can also highlight certain information in the foreground, which will make it possible to first view the desired topic. 
Use creeping line for various purposes, for example, for advertising messages, news, promotions, announcements, images, emoticons, banners, etc. 
Creating a creeping line on a website is as easy as shelling pears.
To create a creeping line, use this special "marquee" tag, which will help you make a creeping line. Initially it only worked in the browser Internet Explorer, but now in almost all browsers. (I did not check only in Google Chrome), in the rest it works fine.
1. The STANDARD TRACKING LINE is as follows -:
Running text
Insert a headline, greeting, announcement, between these tags (INSTEAD OF MY WORDS "FLOWING TEXT"), and you will get a creeping line. It will look like this.
WE DO A RUNNING LINE
Creeping line can be not only text, but also a picture and a link to some site. It can be any text that you create on sites that create beautiful inscriptions. Like the "burning text" in the previous post.
The text can be formatted in the same way as in a simple post. For example, let's make it big, bold, colored, italic, and so on.
And by showing imagination, or by defining goals for using texts in your diary, you can come up with some pretty incredible options for writing creeping lines for your posts.
I will try to show you the most common ones.
2. The width and height of the creeping line can be set with certain parameters, that is, set the line width and height... Now the formula will look like this.
Specified row block sizes
Where width = ""- block width for a line
height = ""- block height for a line
It will look like this.
The height and width of the line is specified.
3. CHANGE THE BACKGROUND OF THE BACKGROUND. Change the background of the LINE
The background of the creeping stitch can be set to whatever you need. This is the formula. The line sizes can be omitted. I put them in the first formula, not in the second.
where bgcolor = ""- attribute setting the background color parameter
It looks like this
change the background of the LINE
change the background of the LINE, without specifying the width and length
4. LEFT TO RIGHT MOVEMENT.
Since by default the line moves, from right to left, then to do the opposite, we apply this formula.
Left to right movement
Where left- movement from right to left (default)
right- movement from left to right
It will look like this
LEFT TO RIGHT MOVEMENT.
5. CONSTANT MOVEMENT IN BOTH SIDES.
You can set the movement of the line constantly, that is, it will move alternately in both directions .. This is the formula.
where alternate
It will look like this
CONSTANT MOVEMENT IN BOTH SIDES
6. MOVING BOTTOM UP. > bottom to top
A line, or an image, can move not only in different directions, but also from bottom to top. It is better to put a limit on the line, (especially the height) or pictures, otherwise it will run all over the page and take up a lot of space. This is the formula.
Where up- movement from bottom to top
It will look like this
STITCH OR PICTURE MOVEMENT BOTTOM UP
7. MOVING UP AND DOWN. Top down
You can make the text move and vice versa FROM UP AND DOWN. This is the formula.
Where down- movement from top to bottom
It will look like this
MOVEMENT OF THE STITCH OR PICTURE FROM UP AND DOWN
8. CHANGE THE MOVING SPEED TO A SLOWER. Change the speed to slow
The sewing speed can also be changed, made faster, or slower. To do this, use the following formula.
Where behavior = ""- attribute setting the line type
alternate- reciprocating motion
direction = ""- attribute setting direction
scrollAmount = "1"
It will look like this
SLOW STITCHING SPEED
9. SLOW STITCHING UP AND DOWN AND VERSA. Slow text movement from bottom to top and vice versa
You can also adjust the sewing speed up and down. To do this, use the following formula.
Where alternate- reciprocating motion
direction = ""- an attribute that sets the direction (in our case, from top to bottom and vice versa)
scrollAmount = "1"- sets the line speed. The speed figure can be changed.
It will look like this
slow movement of the text from bottom to top and vice versa
11. TROLLEY WITH IMAGE.
As I already wrote, not only a line can move, but also any picture. All of the above formulas are also applicable to pictures. Only instead of WORDS, the HTML code of the picture is inserted. This is the formula to which you can add any motion parameters.
Original picture. 
Let's add a creeping line formula, and it will look like this
These are simple examples of creeping lines, and with your imagination, you can come up with some pretty incredible options for writing creeping lines for your sites.
I will write ALL THESE FORMULAS ONCE AGAIN, ALREADY with all the parameters. (that is, a new value is added to each new formula, and therefore the formula becomes longer and longer. If you do not need ALL PARAMETERS, then take the formulas above, each parameter is there separately)
SIMPLE LINE - DEFAULTDEFINED LINE SIZESCHANGE THE BACKGROUND OF THE BREAKING LINELEFT RIGHT MOVEMENTCONSTANT MOVEMENT IN BOTH SIDES
UPWARDSTOP DOWNSLOW STITCHING SPEEDSLOW MOVEMENT OF THE TEXT UP AND DOWN AND VERSALINE WITH A LINK TO THE SITE LINK TO THE SITE (NAME)
You can remove any of these parameters yourself. For example, you do not need a separate background for each line, then you just carefully erase this parameter. 
Or erase the stitch sizes. Just remember that the formula should be in the angular QUOTATION MARK, so don't remove them. 
Try boldly and you will succeed.
Create creeping line on the site - as easy as shelling pears.
Use the creeping line for various purposes, for example, for advertising messages, news, promotions, announcements, etc.
To create a running line, use the tag:
Crawl attributes
width = "..." - the width of the scrolling line (in pixels or percent).
Example:
height = "..." - creeping line height (in pixels or percent).
Example:
bgcolor = "..." - the background color of the crawl line (the color is set by a code or word).
Example:
behavior = "..." creeping line behavior. Has the following meanings:
scroll - normal scrolling (default);
slide - the line begins its path from one edge and stops at the other;
alternate - the line will move from edge to edge
Example:
direction = "..." - the direction of the scrolling line. Has the following meanings:
left - movement of the text to the left (default);
right - movement of the text to the right;
up - movement of the text from bottom to top;
down - movement of the text from top to bottom
Example:
scrollamount = "..." - line speed (in pixels).
Example:
scrolldelay = "..." - time interval between steps (in milliseconds).
Example:
loop = "..." - how many times the scrolling line will run. If the value is set to "0" (Default), the running timeline will scroll the text an infinite number of times, if the value is set to "2", then the text will scroll 2 times.
Example:
hspace = "..." - indent from the left and right edges of the creeping line (in pixels).
Example:
If you put it all together creeping line code in HTML will look like this:
Running image
Since we moved the text in the creeping line, so you can move the image.
Enough between tags insert picture:
Addition
You can set the text with the link to the scrolling line. To do this, you need to write the following code in HTML: