jquery animate - Move the background image of the div element with purely CSS -
i'm trying move background image of div element purely css. here i'm taking input background-image url user, thats why can't declare in css. cannot declare image position fixed or absolute affect rest of css. there way write css background of div element?
fiddle- jsfiddle.net/ztsg9
html:
<div class="view" style="background-image: url('http://css3slideshow.remabledesigns.com/1.jpg')">according new report anandtech, samsung might fibbing way more favorable galaxy s4 benchmarks. has device come crawl? of course hasn’t; benchmarks shouldn’t change perception of flagship powerful s4. still, it’s embarrassing samsung resort such technical tactics, allegedly using code dubbed “benchmarkbooster.” yes, device takes steroids.</div>
css:
.view { position:relative; height:100%; width:100%; top:0; left:0; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* safari , chrome */ } @keyframes mymove { { left:0px; } { left:200px; } } @-webkit-keyframes mymove /* safari , chrome */ { { leftp:0px; } { left:200px; } }
the following trick seems work: make background image twice wide element , change horizontal part of background-position 0 -200%
(edited fiddle):
.view { height:100%; width:100%; animation:mymove 5s linear infinite; background-size: 200% 100%; /* horizontal scale 200% */ } @keyframes mymove { { background-position: 0% 0px; } { background-position: -200% 0px; /* shifting image right full width */ } }
the arithmetic moves image when background-position
negative percentage explained in answer.
Comments
Post a Comment