javascript - Scrolling tile images with css -

-

i wish have row of 3 images contain around 10 images per row.

the image dimensions 270x270px , should animate you'd imagine clouds floating right left on screen.

i'd top row of images go right left, middle opposite direction , bottom same top @ different intervals.

i'm not 100% sure on how accomplish , i'm new css animations.

i've tried floating list items inside of browser appears clip ul inside of window , doesn't let float off screen.

see image details

the images should loop , continue show flow of images without interruption in animation or placement.

any getting started appreciated.

g

do mean jsfiddle ?

html

<div class="container">     <div class="rowcontainer">         <div class="row rtl">             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             </div>     </div>     <div class="rowcontainer">         <div class="row ltr">             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             </div>     </div>     <div class="rowcontainer">         <div class="row rtl">             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             <div class="cell">1</div>             <div class="cell">2</div>             <div class="cell">3</div>             <div class="cell">4</div>             <div class="cell">5</div>             <div class="cell">6</div>             <div class="cell">7</div>             <div class="cell">8</div>             <div class="cell">9</div>             <div class="cell">10</div>             </div>     </div> </div>

css

* {     margin: 0;     padding: 0; } @-webkit-keyframes scrollrtl {     0% { transform: translate(0, 0); }     100% { transform: translate(-50%, 0); } } @keyframes scrollrtl {     0% { transform: translate(0, 0); }     100% { transform: translate(-50%, 0); } } @-webkit-keyframes scrollltr {     0% { transform: translate(-50%, 0); }     100% { transform: translate(0, 0); } } @keyframes scrollltr {     0% { transform: translate(-50%, 0); }     100% { transform: translate(0, 0); } } html, body, .container {     overflow: hidden;     width: 100%;     height: 100%; } .rtl {     -webkit-animation: scrollrtl 5s linear infinite;     animation: scrollrtl 5s linear infinite; } .ltr {     -webkit-animation: scrollltr 5s linear infinite;     animation: scrollltr 5s linear infinite; } .rowcontainer {     position: relative;     height: 280px; } .row {     position: absolute;     white-space: nowrap;     font-size: 0; } .cell {     font-family: verdana;     display: inline-block;     font-size: 36px;     width: 270px;     height: 270px;     background-color: red;     color: white;     margin: 5px; }

only problem had place elements twice in row looks infinite scroll...


Comments

Post a Comment

Popular posts from this blog

java - Unable to make sub reports with Jasper -

-
i using jaspersoft studio create reports. having sub report in jasper main report. problem unable make work, because if add sub report detail band of main report, sub report generated number of times, row row, entire sub report repeated in number of pages. can't put in summery band due same reason. i unable put in column footer band or other footers because displays below error net.sf.jasperreports.engine.jrexception: net.sf.jasperreports.engine.jrruntimeexception: subreport overflowed on band not support overflow. @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler.fillreport(reportcontroler.java:467) @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler.access$18(reportcontroler.java:442) @ com.jaspersoft.studio.editor.preview.view.control.reportcontroler$4.run(reportcontroler.java:334) @ org.eclipse.core.internal.jobs.worker.run(worker.java:54) caused by: net.sf.jasperreports.engine.jrruntimeexception: subreport overflowe...
Read more

scala - play framework: Modules were resolved with conflicting cross-version suffixes -

-
i want use elastic search play framework followed this guide here build.sbt file name := """es-with-play""" version := "1.0-snapshot" lazy val root = (project in file(".")).enableplugins(playscala) scalaversion := "2.11.1" librarydependencies ++= seq( jdbc, anorm, cache, ws, "com.clever-age" % "play2-elasticsearch" % "1.4-snapshot" ) resolvers += "sonatype oss snapshots" @ "https://oss.sonatype.org/content/repositories/snapshots" and in play console when compile code gives following errors [error] modules resolved conflicting cross-version suffixes in {file:/media/sara/new%20volume/programs/programs/play/es-with-play/}root: [error] com.jsuereth:scala-arm _2.11, _2.10 [error] com.typesafe.play:play-functional _2.11, _2.10 [error] com.typesafe.akka:akka-actor _2.11, _2.10 [error] com.typesafe.play:play-json _2.11, _2.10 [error] com.type...
Read more

sql - The object name contains more than the maximum number of prefixes. The maximum is 2 -

-
i facing similar issue many others error message "the object name contains more maximum number of prefixes. maximum 2." my scenario is, create procedure dbo.[usp_procedure] begin declare @loadtime datetme2(7) set @loadtime = (select loadtime [linkedservername].[databasename].[schemaname].[tablename] tablename = 'xxxxxx') insert [currentserver].[schemaname].[tablename] select column1, column2, .... tablename join tablename1 on .... ... ... end the table containing loadtime present in linked server/database , important value utilized further in clause of procedure via @loadtime . query select loadtime .... works fine when try on present server individually. when run part of procedure, procedure fails above mentioned error. linked server connection set , working fine. , procedure needs run on present server, removes scope of creating procedure on linked server. hope scenario articulate. replies welcome. in advance. the line : insert [currentser...
Read more