i create simple grid application using basic grid example in visual studio , this tutorial. expected animation work on item's, seems works on first one. question is, how can animate on item's? , if possible animate randomly(not @ once! example: windows 8 start menu).
item template:
<div class="itemtemplate" data-win-control="winjs.binding.template"> <div class="item"> <img class="item-image" src="#" data-win-bind="src: backgroundimage; alt: title" /> <img class="item-image-new" src="#" data-win-bind="src: backgroundimage; alt: title" /> <div class="item-overlay"> <h4 class="item-title" data-win-bind="textcontent: title"></h4> <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textcontent: subtitle"></h6> </div> </div> </div> js animation:
var darkgray = "data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcayaaaaffcsjaaaaaxnsr0iars4c6qaaaarnqu1baacxjwv8yquaaaajcehzcwaadsqaaa7eazurdhsaaaansurbvbhxy3b0cpopaanmacoba1blaaaaaelftksuqmcc"; var lightgray = "data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcayaaaaffcsjaaaaaxnsr0iars4c6qaaaarnqu1baacxjwv8yquaaaajcehzcwaadsqaaa7eazurdhsaaaansurbvbhxy7h4+cp/aahpa3h+andkaaaaaelftksuqmcc"; var mediumgray = "data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcayaaaaffcsjaaaaaxnsr0iars4c6qaaaarnqu1baacxjwv8yquaaaajcehzcwaadsqaaa7eazurdhsaaaansurbvbhxy5g8dcz/aay/asalwfq+aaaaaelftksuqmcc"; // play peek animation function peektile(tile1, tile2) { // create peek animation var peekanimation = winjs.ui.animation.createpeekanimation([tile1, tile2]); // reposition tiles desired post-animation position tile1.style.top = "-250px"; tile2.style.top = "0px"; // execute animation peekanimation.execute(); } function changeimage() { // 2 image elements var images = document.queryselector(".item-image"); var imagesnew = document.queryselector(".item-image-new"); // swap out old image source , choose new image source images.src = imagesnew.src; if (images.src == lightgray) imagesnew.src = mediumgray; else if (images.src == mediumgray) imagesnew.src = darkgray; else imagesnew.src = lightgray; // reset elements pre-animation position , trigger animation images.style.top = "0px"; imagesnew.style.top = "250px"; peektile(images, imagesnew); }; and interval, changes images(it written inside ready function):
setinterval(function () { changeimage() }, 4000);
when call document.queryselector return first matching element, in case first list item. if want animate random item, call document.queryselectorall(".item"), pick random item result list , call queryselector('.item-image') on it, proceeding do.
Comments
Post a Comment