Re: [css-d] Path style CSS animation
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/
Re: [css-d] Path style CSS animation
And the plot thickens... On Friday, June 19, 2015, Crest Christopher 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://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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | 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/
Re: [css-d] Path style CSS animation
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://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/
Re: [css-d] Path style CSS animation
Embed it as an html5 video. On Friday, June 19, 2015, Crest Christopher 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://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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | 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/
Re: [css-d] Path style CSS animation
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 mailto: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 __ 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/
Re: [css-d] Path style CSS animation
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/
Re: [css-d] Path style CSS animation
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/
Re: [css-d] Path style CSS animation
But this is getting OT for this list so I bow out gracefully here... Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Jun 19, 2015, at 7:50 PM, Karl DeSaulniers k...@designdrumm.com wrote: 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/
Re: [css-d] Path style CSS animation
I guess via JS or equal library, you could have the animation play speed, depend on the speed in which the user scrolls or swipes ? Eric Miner wrote: Yes, it's possible, very simple and easy easy to do this CSS animation/ You'll need to use the steps() function in your @keyframe. I strongly suggest you use an svg for your steps() 'sprite'. Here are some good resources to get you started: https://css-tricks.com/snippets/css/keyframe-animation-syntax/ http://jsfiddle.net/simurai/CGmCe/light/ http://alistapart.com/article/web-animation-at-work Hope this helps, Eric On June 19, 2015 at 10:45 AM Crest Christopher crestchristop...@gmail.com wrote: Is it possible to animate this http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php, top, right image using CSS animate, or if you know of a method. And to answer a question, SVG library animation won't do this effect, I've exhausted that avenue. Christopher __ 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/
Re: [css-d] Path style CSS animation
Masks don't function well with most browsers. I'm looking into an alternative route, if this gets accomplished, well, I'll have something to brag about. ;-) Christopher Karl DeSaulniers wrote: 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 Christophercrestchristop...@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 Christophercrestchristop...@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 Christophercrestchristop...@gmail.commailto: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.orghttp://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.orghttp://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.comhttp://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/ __ css-discuss
Re: [css-d] Path style CSS animation
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 Christophercrestchristop...@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 Christophercrestchristop...@gmail.commailto: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.orghttp://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.orghttp://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.comhttp://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/
Re: [css-d] Path style CSS animation
Thanks Eric, I was beginning to come up with how to do this with canvas. Eric Miner wrote: Yes, it's possible, very simple and easy easy to do this CSS animation/ You'll need to use the steps() function in your @keyframe. I strongly suggest you use an svg for your steps() 'sprite'. Here are some good resources to get you started: https://css-tricks.com/snippets/css/keyframe-animation-syntax/ http://jsfiddle.net/simurai/CGmCe/light/ http://alistapart.com/article/web-animation-at-work Hope this helps, Eric On June 19, 2015 at 10:45 AM Crest Christopher crestchristop...@gmail.com wrote: Is it possible to animate this http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php, top, right image using CSS animate, or if you know of a method. And to answer a question, SVG library animation won't do this effect, I've exhausted that avenue. Christopher __ 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-d] Path style CSS animation
Is it possible to animate this http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php, top, right image using CSS animate, or if you know of a method. And to answer a question, SVG library animation won't do this effect, I've exhausted that avenue. Christopher __ 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/
Re: [css-d] Path style CSS animation
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://www.evolt.org/help_support_evolt/
Re: [css-d] Path style CSS animation
On 6/19/15 7:45 AM, Crest Christopher wrote: Is it possible to animate this http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/exercises/vineMask.php, top, right image using CSS animate, or if you know of a method. And to answer a question, SVG library animation won't do this effect, I've exhausted that avenue. As that image is PHG, I doubt it. However, if you create an SVG, the answer is yes - there are several possibilities in fact. Check out this article, particularly relevant is the part about line drawing animation: http://blogs.adobe.com/dreamweaver/2015/06/the-state-of-svg-animation.html HTH -- Cordially, David __ 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/
Re: [css-d] Path style CSS animation
On 6/19/15 11:01 AM, 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 Sorry. Typo. (Damn these cataracts!) -- Cordially, David __ 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/
Re: [css-d] Path style CSS animation
David Hucklesby wrote: Are we seeing the same image at top-right ? I see : http://www.danfergusdesign.com/classfiles/oldClasses/VCB209-2Danim/thumbs/vine.png Philip Taylor Sorry. Typo. (Damn these cataracts!) OK, so we are seeing the same image, in which case can it not be animated programatically using the CSS opacity property coupled with multiple variant images in different layers ? 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://www.evolt.org/help_support_evolt/
