jquery - Javascript animation ontop of a image -


is possible javascript animation ontop of image? if so, how?

this image, want add multiple stickmen walking around departments in map. tried using css , javascript failed, not able add stickmen ontop of picture.

the approach tried creating div elements stickmen pictures inside of them in img tags. tried using javascript animate specific divs. did not work.

enter image description here

there many ways this. here's simple example shows 2 ways:

  1. blue dot: using absolute positioning , jquery's animate()
  2. red dot: using css keyframe animations

function doanimate() {    $("#animate").css({top: "76px", left: "204px"}).animate({top: "110px", left: "208px"}, 1000).animate({top: "110px", left: "97px"}, 1500).animate({top: "76px", left: "104px"}, 1000).animate({top: "76px", left: "204px"}, 1500);  };    doanimate();  setinterval(doanimate, 5100);
#image {    height: 200px;    width: 300px;  }    #animate {    position: absolute;    top: 100px;    background-color: blue;    height: 5px;    width: 5px;    border-radius: 50%;  }      #animatecss {    position: absolute;    background-color: red;    height: 5px;    width: 5px;    border-radius: 50%;    animation: testanimation 5.1s infinite;   }    @keyframes testanimation {    0% { top: 110px; left: 97px; }      20% { top: 76px; left: 104px; }     50% { top: 76px; left: 204px; }      70% { top: 110px; left: 208px; }      100% { top: 110px; left: 97px; }   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <img id="image" src="http://i.stack.imgur.com/egt7s.jpg" />  <div id="animate"></div>  <div id="animatecss"></div>


Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

javascript - Solution fails to pass one test with large inputs? -

function birthdaycakecandles(n, ar) { // complete function ar.sort(); var biggestno = ar[(ar.length - 1)]; var total = 0; (var = 0; < ar.length; i++) { if (ar[i] === biggestno) total++; } return total; } here's problem - https://www.hackerrank.com/challenges/birthday-cake-candles/problem there no need sort array, can problem in o(n) times function birthdaycakecandles(arr, n) { var total = 0; var len = arr.length; (var = 0; < len; i++) { if (ar[i] === n) total++; } return total;
Read more