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/
