Hey Kuzeko, For the css part, you could try putting your text into a UL.. <ul id="scroller"> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolor doloremque consectetur nam fugit nostrum facilis delectus corrupti adipisci sit perferendis suscipit deleniti beatae nobis officia impedit eius soluta eum?</li> </ul>
Then just animate the UL. Here is a nice jQuery substitute though. Original code here: http://logicbox.net/jquery/simplyscroll/#dl I put together a test example using what you provided here: http://designdrumm.com/jquery-simplyscroll-example.zip It's called simplyScroll_vert.html inside the zip file. There is a slue of other examples in the test folder. Have fun.. :) HTH, Best, Karl PS: To all, sorry if I am leading away from css topic with the javascript, just saw a void to fill and so I did. On Aug 27, 2013, at 9:58 PM, Karl DeSaulniers wrote: > You don't. You use JavaScript or even better. jQuery. IMO. > > jQuery would handle what your wanting very nicely. I for one avoid animations > with CSS. But that is just me I assume. > > Best, > Karl > > Sent from losPhone > > On Aug 27, 2013, at 4:38 PM, Kuzeko Web Design - Matteo Lissandrini > <w...@kuzeko.com> wrote: > >> Ok, thank you. >> But then, the question becomes: how do I accomplish that effect with only >> CSS? >> I.e., text of different length scrolling vertically from end to end without >> hardcoding px or a predefined height?? >> >> Thanks >> >> >> ------------------ >> >> Kuzeko >> >> >> >> On 27 August 2013 22:30, Eric <e...@minerbits.com> wrote: >> >>> ** >>> It's more of a misbehavior than a bug. The Moz engineering team probably >>> just decided not to go back and change it after the spec was finalized. >>> It's sort of like how they're the only UA that doesn't support display: >>> run-in. Back int he '90s a bug was opened on it and loads of note by senior >>> engineers stating why they should support (one saying that it's >>> embarrassing for FF to be the only UA not to support) it's still sitting >>> there unassigned over 15yrs later. That's just how engineering teams work. >>> >>> I would suggest that you don't use percentage as a unit of measure in CSS >>> animations. >>> >>> Eric >>> >>> >>>> On August 27, 2013 at 8:09 AM Kuzeko Web Design - Matteo Lissandrini < >>> w...@kuzeko.com> wrote: >>>> >>>> >>>> Thank you all for the answers, but now I am really confused. >>>> So is this supposed to do so or is a bug? >>>> >>>> Can you fork my example and show me how to have this work properly if >>> this >>>> is possible? >>>> >>>> >>>> >>>> ------------------ >>>> >>>> Kuzeko >>>> >>>> >>>> >>>> On 27 August 2013 08:28, Philippe Wittenbergh <e...@l-c-n.com> wrote: >>>> >>>>> >>>>> Le 27 août 2013 à 14:52, "L. David Baron" <dba...@dbaron.org> a écrit >>> : >>>>> >>>>>> Many of the other references in the CSS spec to things that are >>>>>> based on the height of the containing block explicitly say that if >>>>>> the containing block's computed height is 'auto', then the >>>>>> percentage is as well. See, for example: >>>>>> http://www.w3.org/TR/CSS2/visudet.html#the-height-property >>>>>> http://www.w3.org/TR/CSS2/visudet.html#min-max-heights >>>>>> >>>>>> http://www.w3.org/TR/CSS21/visuren.html#position-props , however, >>>>>> does not say that, and you shouldn't infer it from the same thing >>>>>> being stated elsewhere. >>>>>> >>>>>> The working group explicitly decided *not* to change this in 2009; >>>>>> see: >>>>>> http://wiki.csswg.org/spec/css2.1#issue-134 >>>>>> http://lists.w3.org/Archives/Public/www-style/2009Jun/0056.html >>>>>> http://lists.w3.org/Archives/Public/www-style/2009Aug/0092.html >>>>> >>>>> Oh :-(. I had forgotten about that resolution (which I find >>> inconsistent >>>>> with the way height and min-max-height work). Thing is, no browser >>> released >>>>> as of today, including Presto-Opera, implement this, even for a very >>> basic >>>>> test case [*] (I can't test IE 11beta, though). But Presto based Opera >>> and >>>>> Gecko manage to animated it. Bizarre. >>>>> >>>>> [*] http://dev.l-c-n.com/_temp/top-perc.html >>>>> >>>>> Gecko bug report is here: >>>>> https://bugzilla.mozilla.org/show_bug.cgi?id=260348 >>>>> >>>>> Philippe >>>>> -- >>>>> Philippe Wittenbergh >>>>> http://l-c-n.com >>>>> >>>>> >>>>> >>>>> >>>>> ______________________________________________________________________ >>>>> css-discuss [css-d@lists.css-discuss.org] >>>>> http://www.css-discuss.org/mailman/listinfo/css-d >>>>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>>>> List policies -- http://css-discuss.org/policies.html >>>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >>>> ______________________________________________________________________ >>>> css-discuss [css-d@lists.css-discuss.org] >>>> http://www.css-discuss.org/mailman/listinfo/css-d >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>>> List policies -- http://css-discuss.org/policies.html >>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
