How To Swing Div Texts Using CSS And JQuery Animations

admin_img Posted By Bajarangi soft , Posted On 22-10-2020

In JQuery we can swing specified text inside specified div .So today we discuss how to do it

How To Swing Div Texts Using CSS And JQuery Animations

Step 1: Create Index.php file and implement below html code :
 

<div id="bsoft" style="position:absolute;">BAJARANGI SOFT</div>

Step 2: Implement below jquery to swing text:
 
<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>


Complete Code To Swing Div Texts Using CSS And JQuery Animations
<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>

Related Post