This post contains copy/paste codes for scrolling images.
The HTML tag was used to create the scrolling images. You can use this tag to make your images scroll vertically (from top to bottom, or bottom to top) or horizontally (from right to left, left to right).
Although the majority of contemporary browsers can recognize it, keep in mind that the <marquee> tag is not an official HTML tag. For a marquee that complies with standards, see CSS marquees.
Right to Left (RTL)
The image in this section scrolls horizontally from left to right, right to left, or both. The direction attribute, which shifts the image from right to left or left to right as needed, is used to accomplish the horizontal scroll.
Slide-In Images
From the right, this image slides in and then stops. To see the effect once more, you will need to reload this page.
<marquee behavior="slide" direction="left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
</marquee>
Background HTML code
PDF file in blog post
HTML Bold Text
Read also: How to insert an image link in blogger website?
Continuous Image Scroll (RTL)
We only need to set the behavior attribute's value to scroll (i.e., behavior="scroll") to make the image scroll continuously.
<marquee behavior="scroll" direction="left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
</marquee>
Faster Scrolling
This example uses scrollamount="30" to increase the scroll speed.
<marquee behavior="scroll" direction="left" scrollamount="30"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
</marquee>
Image bouncing back and forth:
Normal Speed
This image bounces at the default speed.
<marquee behavior="alternate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="33" height="34" alt="Bashtec">
</marquee>
Faster Bounce
This example uses scrollamount="30" to speed up the scrolling/bouncing image.
<marquee behavior="alternate" scrollamount="30">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="33" height="34" alt="Bouncing ball">
</marquee>
Image Scrolling Up:
This image scrolls vertically, beginning at the bottom and working its way up. The scrollamount attribute allows you to change the scroll speed, just like in some of the earlier examples. Alternatively, you could use behavior="slide" to create a vertical slide.
<marquee behavior="scroll" direction="up">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="72" height="79" alt="Bashtec">
</marquee>
Images Scrolling Down:
There is a vertical scroll in this image as well, but it begins at the top and descends.
<marquee behavior="scroll" direction="down">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="72" height="79" alt="Bashtec">
</marquee>
Different Scrolling Speeds:
This example illustrates 3 different scrolling speeds.
<marquee behavior="scroll" direction="right" scrollamount="10">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="72" height="79" alt="Bashtec">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="94" height="88" alt="Bashtec">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="30">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="125" height="82" alt="Bashtec">
</marquee>
Jumping Images
The scrolldelay property is used in the example below to slow down the scrolling image and give the impression that it is jumping across the screen. Actually, to make each jump larger, the example also makes use of the scrollamount attribute.
<marquee behavior="scroll" direction="left" scrolldelay="800" scrollamount="100">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ymrFVkUr7YQwBbFcpcmzlutZBzCsX0xkdbAxS5Bjb75NPhSpClPK2bMpbWkfSW6rCuIewZDfw9Knsm8n7oZNPDgU1hMD7aNX8ylt0DRLR615rAdc-DOluEDt-8dC3_MBjlVPj6qBuHvSYpjxb35aDJLpUKW07L4Ve-6k2UlcVYndhECUrTEEdPG3v_w/s960/Bashtec_20250303_063603_0001.gif" width="150" height="108" alt="Bashtec">
</marquee>
Browser Compatibility
Some browsers don't render the jumping effect. Instead, the image will scroll smoothly.
Marquee Attributes
Several attributes are supported by the <marquee> tag; some of these are shown in the examples above. You can play around with these settings to see how they affect your scrolling images. The complete list of qualities is as follows:
That is Great! You have an image scroller that will appear in your post to be viewed when your blog is visited. Please feel free to leave any constructive feedback, suggestions or questions in the comments and I'll get back to you as quick as I can with concrete solutions. Want to know more about blog writing, please mention. I will make a tutorial on.
thankyou
BashTec
Bashtec
ReplyDelete