Marquee Animation Without Marquee tag: Hi Friends, Today i will tell you how to create a marquee tag animation without using a marquee tag. As we know in some browser marquee is not working just like old safari browsers. To overcome that kind of problem we can use some code to create a animation like marqueee using some css and jquery.
We can create a animation in any direction using marquee tag but when it is not working we have to take help from css and jquery to create a same animation as marquee tag already have it.
I created a demo in which i have used <dl> and <dt> tags in the html and you can modify it as per your requirement.
See the live demo and download the code from below:
For creating a marquee animation you can follow some steps. These steps are
Open your webpage in any code editor.
Paste the below HTML, CSS and JQUERY codes to create a functionality like marquee tag.
In the below code i am using dl and dt tags with a class ticker and inside the dt you can write anything as per your website requirement. You can also see the syntax of the code to understand it quickly.
<dl id="ticker"> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> </dl> |
<dl id="ticker"> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> <dt> Write Anything you want to write in this animation like marquee...</dt> <br><br> </dl>
<dl id="ticker"> <dt> Your Marquee Animation Text</dt> </dl>
Below CSS code is necessary for hiding some text outside the box and you have to change the height as per your website requirement. You can modify all the tag apart from overflow:hidden.
#ticker{overflow: hidden; height:142px; color: #3D72A4; padding: 5px 20px; text-align: justify; font-size: 20px; line-height: 22px; font-weight: 100; border:2px solid #000;} |
#ticker{overflow: hidden; height:142px; color: #3D72A4; padding: 5px 20px; text-align: justify; font-size: 20px; line-height: 22px; font-weight: 100; border:2px solid #000;}
This Jquery code is giving the functionality to the marquee animation without below code, animation is not working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { //cache the ticker var ticker = $("#ticker"); //wrap dt:dd pairs in divs ticker.children().filter("dt").each(function() { var dt = $(this), container = $("<div>"); dt.next().appendTo(container); dt.prependTo(container); container.appendTo(ticker); }); //hide the scrollbar ticker.css("overflow", "hidden"); //animator function function animator(currentItem) { //work out new anim duration var distance = currentItem.height(); duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.015; //animate the first child of the ticker currentItem.animate({ marginTop: -distance }, duration, "linear", function() { //move current item to the bottom currentItem.appendTo(currentItem.parent()).css("marginTop", 0); //recurse animator(currentItem.parent().children(":first")); }); }; //start the ticker animator(ticker.children(":first")); //set mouseenter ticker.mouseenter(function() { //stop current animation ticker.children().stop(); }); //set mouseleave ticker.mouseleave(function() { //resume animation animator(ticker.children(":first")); }); }); </script> |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { //cache the ticker var ticker = $("#ticker"); //wrap dt:dd pairs in divs ticker.children().filter("dt").each(function() { var dt = $(this), container = $("<div>"); dt.next().appendTo(container); dt.prependTo(container); container.appendTo(ticker); }); //hide the scrollbar ticker.css("overflow", "hidden"); //animator function function animator(currentItem) { //work out new anim duration var distance = currentItem.height(); duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.015; //animate the first child of the ticker currentItem.animate({ marginTop: -distance }, duration, "linear", function() { //move current item to the bottom currentItem.appendTo(currentItem.parent()).css("marginTop", 0); //recurse animator(currentItem.parent().children(":first")); }); }; //start the ticker animator(ticker.children(":first")); //set mouseenter ticker.mouseenter(function() { //stop current animation ticker.children().stop(); }); //set mouseleave ticker.mouseleave(function() { //resume animation animator(ticker.children(":first")); }); }); </script>
After pasting all the codes, save it and check your website in the browser.
For any problem you can see the live demo and download the code from below.
Read About Other Interesting Things below.
I hope you will like Marquee Animation Without Marquee tag. If You found it useful please subscribe my blog.
Categories: Website Design
Leave a Reply