Step 1: Create Index.php file and implement below html code :
<div id="bsoft" style="position:absolute;">BAJARANGI SOFT</div>
<script type="text/javascript"> $(document).ready(function() { function beeLeft() { $("#bsoft").animate({left: "-=300"}, 1500, "swing", beeRight); } function beeRight() { $("#bsoft").animate({left: "+=300"}, 1500, "swing", beeLeft); } beeRight(); }); </script>
<html> <head> <title>How To Swing Div Texts Using CSS And JQuery Animations</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <style> body { background: black; } </style> <body> <div class="container"> <br><br><br> <div class="text-center"> <h1 id="color" style="color: White;">Swing Div Texts Using CSS And JQuery Animations</h1> </div> <br> <div class="col-md-12"> <div class="well"> <div id="bsoft" style="position:absolute;">BAJARANGI SOFT</div> </div> </div> <br> </div> </body> </html> <script type="text/javascript"> $(document).ready(function() { function beeLeft() { $("#bsoft").animate({left: "-=300"}, 1500, "swing", beeRight); } function beeRight() { $("#bsoft").animate({left: "+=300"}, 1500, "swing", beeLeft); } beeRight(); }); </script>