dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scroll animation ___ i am noob.

  1. #1
    Join Date
    Dec 2014
    Posts
    2

    Question Scroll animation ___ i am noob.

    I have this VERY simple HTML doc. New to Jquery and have managed to animate this <div> (.pong) to go left and right on screen..(Pretty damn cool!)
    BUUT.. I need to know how I can activate this animation via scrolling.. IE: How do I make it go left when crolling down and right when scrolling up. I know this might seem simple but I have tried looking for a simple solution and I don't think there is one.

    Basically I want to create a scrollable 'Pong' type game. Using the scroll as a paddle hahah

    <!DOCTYPE html>
    <html>
    <head>
    <title>
    Pong
    </title>
    <style type="text/css">
    .pong{
    position: relative;
    border-radius:100%;
    top:250px;
    float:left;
    z-index: 1;
    width: 100px;
    height: 100px;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    background-color:#FFF700;
    }
    #stage{
    min-height:500px;
    min-width:500px;
    background-size:cover;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">


    $(document).ready(function () {
    move();
    });

    function move() {
    $(".pong").animate({
    left: 900
    }, {
    duration: 5000,
    complete: function () {
    $(".pong").animate({ left: 40 }, { duration: 5000,
    complete: function () {
    move();
    }
    });
    }

    });
    }
    </script>
    <script type="text/javascript">

    </script>
    </head>
    <body>
    <div class id="stage">
    <div class="pong">
    </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    755
    See if anything here will help you
    http://bit.ly/1uAQA0o

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles