javascript - Force strips with % width to moves like in marquee without blank space -

-

i have 5 strips 20% of full width , different background-colors of each 1 , want animate in way: 1) strips moves left right, 2) after ^ animation want keep moving in "marquee" case want avoid blank space , glitches after repeats (something infinite horizontal scrolling).

i've tried use http://aamirafridi.com/jquery/jquery-marquee-plugin#examples plugin, it's doesn't work in case because of width , different background colors.

maybe there way use pure css3? here's sketch: http://jsfiddle.net/sbgrhtqv/

<div class="strips">     <div class="strip"></div>     <div class="strip"></div>     <div class="strip"></div>     <div class="strip"></div>     <div class="strip"></div> </div>  .strips {     width:100%;     -webkit-animation-name: slide;     -webkit-animation-duration: 4s;     -webkit-animation-iteration-count: infinite; }  .strip {     height: 5px;     width:20%;     float: left; } .strip:nth-child(1) {background: red;} .strip:nth-child(2) {background: purple;} .strip:nth-child(3) {background: grey;} .strip:nth-child(4) {background: green;} .strip:nth-child(5) {background: blue;}  @-webkit-keyframes slide {     0%{         -webkit-transform:translatex(-100%);     }     100%{         -webkit-transform:translatex(0);     } }

do have solutions? i'll greatful :)

for animation infinite, you'll need duplicate strips because cannot disappear right , fill blank space on left @ same time. added container hide overflow , not infinite horizontal scroll:

#container {      position: relative;      overflow: hidden;      width: 100%; height: 5px;  }    .strips {      position: absolute; left: -100%; top: 0;      width: 200%; height: 100%;      -webkit-animation: slide 4s linear infinite;      -moz-animation:    slide 4s linear infinite;      animation:         slide 4s linear infinite;  }    .strip { height: 5px; width: 10%; float: left; }    .strip:nth-child(1), .strip:nth-child(6) { background: red;    }  .strip:nth-child(2), .strip:nth-child(7) { background: purple; }  .strip:nth-child(3), .strip:nth-child(8) { background: grey;   }  .strip:nth-child(4), .strip:nth-child(9) { background: green;  }  .strip:nth-child(5), .strip:nth-child(10){ background: blue;   }    @-webkit-keyframes slide {      0%   { -webkit-transform: translatex(0);   }      100% { -webkit-transform: translatex(50%); }  }  @-moz-keyframes slide {      0%   { -moz-transform: translatex(0);   }      100% { -moz-transform: translatex(50%); }  }  @keyframes slide {      0%   { transform: translatex(0);   }      100% { transform: translatex(50%); }  }
<div id="container">      <div class="strips">          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>          <div class="strip"></div>      </div>  </div>


Comments

Post a Comment

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

-
i want check scene image against 2 train images. that, detect features , compute descriptors of both training images. before detecting, computing , matching scene image, delete matches of train1 , train2. because these matches won't facilitate matching of scene image train1 , train2. so, match train1 train2 , vector of matches trainidx , queryidx. how can delete these matches in keypoints-vector , descriptor matrix of train1 , train2? best regards, dwi i have done below: std::vector<cv::keypoint> keypoints[2]; cv::mat descriptor[2]; std::vector< cv::dmatch > matches; /* write code generate keypoints, descriptors , matches here... keypoint[0] -> train image 1 keypoints keypoint[1] -> train image 2 keypoints descriptor[0] -> train image 1 descriptors descriptor[1] -> train image 2 descriptors matches -> matched between train image 1 , 2 */ // logic keep unmatched keypoints , corresponding descriptor
Read more

java - Could not locate OpenAL library -

-
i writing game using slick2d library, uses lwjgl. lwjgl version 2.9.3. using netbeans 8. i tried adding sounds game, example music track on main menu. problem is, exception when run game, despite game still compiling , running except sound of course: sat mar 21 01:23:57 edt 2015 error:could not locate openal library. org.lwjgl.lwjglexception: not locate openal library. @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:102) @ org.lwjgl.openal.al.create(al.java:206) @ org.newdawn.slick.openal.soundstore$1.run(soundstore.java:295) @ java.security.accesscontroller.doprivileged(native method) @ org.newdawn.slick.openal.soundstore.init(soundstore.java:292) @ org.newdawn.slick.music.<init>(music.java:156) @ org.newdawn.slick.music.<init>(music.java:75) @ view.mainmenu.init(mainmenu.java:58) i didn't include rest of error states error happens in game code. the
Read more

sorting - opencl Bitonic sort with 64 bits keys -

-
i used nvidia sdk bitonic sort , works great me. 32 bits (uint) need ulong keys. have typically 2^14 keys @ time , power of 2. searched on not find kernel designed ulong. i tried modified nvidia sdk bitonic sort using ulong keys not work. kernel not crash after de call clenqueuendrangekernel got error : cl_invalid_command_queue can tell me how modify bitonic sort or radixsort, or can sort ulong keys? i running nvidia quadro 4000 opencl 1.1 cuda 6.5.20 full_profile used original nvidia sdk bitonicsort.cl i used"ulong" keys , value input , ouput instead of "uint" thanks helping i made work-around suit need. used 30 bits of key , 18 high bits of value sorting. changed comparators (2 lines): '#define mask 0xffffc000 // suit need from this: if( (*keya > *keyb) == dir ) this: if(((*keya > *keyb)||((*keya == *keyb)&&((*vala & mask)> (*valb & mask)))) == dir ) it works fine. but, still, it's work-a
Read more