logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Marquee Animation Without Marquee tag

Marquee Animation Without Marquee tag

July 25, 2016 No comments Article SEO Website Designing

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.

Marquee Animation Without Marquee tag Live Demo:

See the live demo and download the code from below:

SEO Website Designing Live Demo      SEO Website Designing Download

How to Create Marquee Animation Without Marquee tag:

For creating a marquee animation you can follow some steps. These steps are

Step1:

Open your webpage in any code editor.

Step2:

Paste the below HTML, CSS and JQUERY codes to create a functionality like marquee tag.

HTML Code:

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>

Syntax of above HTML Code:
<dl id="ticker">
 <dt>
 Your Marquee Animation Text</dt>
 </dl>

CSS Code:

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;}

JQUERY Code:

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>


Step3:

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.

SEO Website Designing Live Demo      SEO Website Designing Download

Now you know how to create a Marquee Animation Without Marquee tag.

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

I hope you will like Marquee Animation Without Marquee tag. If You found it useful please subscribe my blog.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: CSS, CSS3, How to Get Marquee Feature Without Marquee Tag, HTML, HTML5, javascript - Marquee in HTML without, jquery, Marquee Animation Without Marquee tag

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.