Today i am explain about how to create continuously scrolling image or text using javascript. The scrolling text or images will done by using html marquee tag.
Please download the file and view the full code i am not included javascript and jquery library here.
But one of the drawback in this marquee tag is it displays the biggest space after scrolling all the text or images that means it displays the blank space when scroll is repeat. So To Avoid this you can go with javascript.
Javascript is one of the programming language used to creates various effects with in the browser you can solve this using javascript.
For example i am using image to for continuous scrolling , You can use the images or text or anything based on your requirement.
This was very helpful in websites in various places such as portfolio display or flash messages or clients logo scrolling and etc...
Style:
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
}
.simply-scroll-list {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {
width: 576px;
height: 200px;
margin-bottom: 1em;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 200px;
}
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 290px;
height: 200px;
}
Html Code:
<ul id="scroller">
<li><img src="images/disable-tab-key.jpg" width="290" height="200"></li>
<li><img src="images/load pdf file in iframe.jpg" width="290" height="200"></li>
<li><img src="images/marquee-text.jpg" width="290" height="200"></li>
</ul>
0 Comments