No examples this time. sry. you got to roll your own. If you want the limbs, I suggest Flash or emulate what flash does with divs. Placing little divs behind the mask at specific coordinates on a javascript timer.
GL Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 19, 2015, at 7:24 PM, Crest Christopher <crestchristop...@gmail.com> wrote: > The limbs is what I'll also need :-) > Do you have an example ? ;-) > > Karl DeSaulniers wrote: >> You can do something similar in jQuery and css. >> >> You need a png that had the same color as the background of your site as its >> background. >> Then tree needs to be cut out of it and then saved as a transparent png. >> So that it is transparent where the tree is. >> >> Then you put that png in a div with another div inside with that png behind >> it that has the background color of the tree. >> Make the parent div of the png and the second div overflow:hidden; >> >> For illustration purposes only: >> >> <div style="overflow:hidden; height:1em;"> >> <img style="z-index: 1;"PNG /> >> <div style="top:2em;z-index:0;background-color:green;"></div><!-- >> animate top:0em; with jQuery or in css if you know how --> >> </div> >> >> Then you just animate the div behind the tree PNG from bottom to top. >> Wont get the nice effect on the limbs as in Flash though.. >> >> HTH, >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> >> >> On Jun 19, 2015, at 6:39 PM, Crest Christopher <crestchristop...@gmail.com> >> wrote: >> >>> I was going to do this with HTML Canvas, as I was suggested, working with >>> Canvas to create the effect I want to create, isn't as pleasing as I >>> originally thought. >>> >>> Tom Livingston wrote: >>>> And the plot thickens... >>>> >>>> >>>> >>>> On Friday, June 19, 2015, Crest Christopher <crestchristop...@gmail.com >>>> <mailto:crestchristop...@gmail.com>> wrote: >>>> >>>> You can't add interactivity with HTML 5 video, for example >>>> scrolling or swiping to cause the video to do something. >>>> >>>> Tom Livingston wrote: >>>>> Embed it as an html5 video. >>>>> >>>>> >>>>> >>>>> On Friday, June 19, 2015, Crest Christopher >>>>> <crestchristop...@gmail.com >>>>> <javascript:_e(%7B%7D,'cvml','crestchristop...@gmail.com');>> wrote: >>>>> >>>>> SVG animation can't do varying line widths, I've exhausted >>>>> that avenue already. >>>>> >>>>> Christopher >>>>> >>>>> Philip Taylor wrote: >>>>> >>>>> David Hucklesby wrote: >>>>> >>>>> As that image is PHG, I doubt it. >>>>> >>>>> >>>>> Are we seeing the same image at top-right ? I see : >>>>> >>>>> >>>>> http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/thumbs/vine.png >>>>> >>>>> Philip Taylor >>>>> >>>>> ______________________________________________________________________ >>>>> 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://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://evolt.org> -- >>>>> http://www.evolt.org/help_support_evolt/ >>>>> >>>>> >>>>> >>>>> -- >>>>> Tom Livingston | Senior Front End Developer | Media Logic | >>>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >>>>> <http://medialogic.com> >>>>> >>>>> >>>>> #663399 >>>>> >>>> >>>> -- >>>> >>>> Tom Livingston | Senior Front End Developer | Media Logic | >>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >>>> <http://medialogic.com> >>>> >>>> >>>> #663399 >>>> >>> ______________________________________________________________________ >>> 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/
