Move div randomly around page using jQuery in ASP.Net

ROHIT

SOLVED CLOSED ACTIVE ANSWERED
User: ROHIT
Posted: on May 10, 2016 01:53 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 7795
Sample Code: Download

vb.net webpage having 5 editable test buttons there is any way to move or animate those buttons from up to down or left to right randonlly with infinte loop automatically but don't go out from the desktop

  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Response.Redirect("http://www.Google.com/")
    End Sub

<html>
<head>
<style> 
div {
    width: 100px;
    height: 50px;
    background: white;
    color: white;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    animation: mymove 12s infinite;
}

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

#div1 {animation-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 1500px;}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div1"><asp:Button ID="Button1" runat="server" Text="A" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div2"><asp:Button ID="Button2" runat="server" Text="B" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div3"><asp:Button ID="Button3" runat="server" Text="C" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div4">
    <asp:Button ID="Button4" runat="server" Text="D" Height="100px" Width="100px" /></div>
    <br />
    <br />
    <br />
<div id="div5">
    <asp:Button ID="Button5" runat="server" Text="E" Height="100px" Width="100px" /></div>
</form>
</body>
</html>

ROHIT

0 2

Reply
User: ROHIT
Replied: on May 10, 2016 02:31 AM
Modified: on May 10, 2016 02:33 AM
Report

When you run my code,you can see 5 buttons in and out animation. but i don't want any out animation,i want it like bubbles screensaver on windows 7 buttons starts animate left to right and then bounce back then bounce all buttons on up down i mean to say any direction randomally like a game like in a box.

dharmend...

0 3

Reply
User: dharmendr
Replied: on May 10, 2016 03:06 AM
Report

Check with the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    div {
        width: 100px;
        height: 50px;
        background: white;
        color: white;
        font-weight: bold;
        position: relative;
        -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
        animation: mymove 12s infinite;
    }
 
    /* Chrome, Safari, Opera */
    #div1 {-webkit-animation-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

    #div1 {animation-timing-function: cubic-bezier(0,0,0.25,1);}
    #div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
    #div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
    #div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
    #div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
 
    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove     
    {
        from {left: 0px;}    
        to {left: 440px;} 
    }
 
    @keyframes mymove     
    {
        from {left: 0px;}    
        to {left:440px;} 
    }    
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="outer" style="max-width: 500px">
        <div id="inner">
            <div id="div1">
                <input type="submit" name="Button1" value="A" id="Button1" style="height: 100px;
                    width: 100px;" /></div>
            <br />
            <br />
            <br />
            <div id="div2">
                <input type="submit" name="Button2" value="B" id="Button2" style="height: 100px;
                    width: 100px;" /></div>
            <br />
            <br />
            <br />
            <div id="div3">
                <input type="submit" name="Button3" value="C" id="Button3" style="height: 100px;
                    width: 100px;" /></div>
            <br />
            <br />
            <br />
            <div id="div4">
                <input type="submit" name="Button4" value="D" id="Button4" style="height: 100px;
                    width: 100px;" /></div>
            <br />
            <br />
            <br />
            <div id="div5">
                <input type="submit" name="Button5" value="E" id="Button5" style="height: 100px;
                    width: 100px;" /></div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

ROHIT

0 4

Reply
User: ROHIT
Replied: on May 10, 2016 03:55 AM
Report

it is not working ,may be i am using visual studio 2005

because buttons are not moving,they are standing on the same position

dharmend...

0 5

Reply
User: dharmendr
Replied: on May 10, 2016 04:04 AM
Report

Have you checked with chrome and mozilla?

ROHIT

0 6

Reply
User: ROHIT
Replied: on May 10, 2016 04:15 AM
Report

It is working same like my code i want it like bubbles screensaver on windows 7 buttons starts animate left to right and then bounce back from right to left then bounce all buttons on up down

Move div randomly around page using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us