[Proto-Scripty] Re: Effect.Morph applied to background image
Hi all! So, what I've done in order to make it work is to use the "Protofade plugin" (you can test it there: http://cssrevolt.com/upload/files/protofade/). I modified a little bit my point of view by making two divs flying over the background. In those divs I put my pictures into unordered list. The Protofade plugin makes the morph transition between each pictures making a pretty cool result! So, that's the way I made it, it works great so don't hesitate to try it ;) Bye, Jinsa. On Apr 12, 2:53 am, Walter Lee Davis wrote: > In order to morph between two images, you need to have stacked both of > them, then fade the front one out. That gets you a perfect cross-fade > between the images. So to get behind your background image, if it's on > a DIV, just clone a div behind the background and fade out the > background. I think. As I write this, I'm thinking you can't change > the opacity of a background image, only of a "foreground" image. So > maybe clone two DIVs behind the original DIV, remove the background > image from the original, and do the cross-fade between the two clones. > And if you're trying to get behind the main page background, that's > going to be considerably harder 8-) > > Walter > > On Apr 11, 2010, at 4:20 PM,Jinsawrote: > > > Hey Junkshops :) > > > First I would thank you for your answer. The setStyle may solve the > > problem linked to the background image (what a shame that morph don't > > work with bgimage :/) but the problem is that I won't get the "morph" > > effect between the bakground change which is what I am searching for. > > I'm thinking of a clone appearing as the same time the real one > > disappears but it seems very complicated to solve a "tiny" problem > > right? > > > The size change is just a fact I've put in order to check the > > effect.morph was running, in real case I don't need it. > > > That sounds quite a deal to do some bgimage morphing, do you have some > > idea in order to make it? > > > Enjoy your night, > > >Jinsa;) > > > On 11 avr, 17:18, Junkshops wrote: > >> According to the > >> wiki:http://wiki.github.com/madrobby/scriptaculous/effect-morph > >> ...morph only works on length and color based attributes, so it won't > >> switch the background image for you. Why don't you just use setStyle > >> on the containing element and then use morph to change the size? > > >> Cheers, Junk > > >> On Apr 11, 7:48 am,Jinsa wrote: > > >>> Anyone may have a clue? :( > > > -- > > You received this message because you are subscribed to the Google > > Groups "Prototype & script.aculo.us" group. > > To post to this group, send email to > > prototype-scriptaculous@googlegroups.com > > . > > To unsubscribe from this group, send email to > > prototype-scriptaculous+unsubscr...@googlegroups.com > > . > > For more options, visit this group > > athttp://groups.google.com/group/prototype-scriptaculous?hl=en > > . -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Effect.Morph applied to background image
In order to morph between two images, you need to have stacked both of them, then fade the front one out. That gets you a perfect cross-fade between the images. So to get behind your background image, if it's on a DIV, just clone a div behind the background and fade out the background. I think. As I write this, I'm thinking you can't change the opacity of a background image, only of a "foreground" image. So maybe clone two DIVs behind the original DIV, remove the background image from the original, and do the cross-fade between the two clones. And if you're trying to get behind the main page background, that's going to be considerably harder 8-) Walter On Apr 11, 2010, at 4:20 PM, Jinsa wrote: Hey Junkshops :) First I would thank you for your answer. The setStyle may solve the problem linked to the background image (what a shame that morph don't work with bgimage :/) but the problem is that I won't get the "morph" effect between the bakground change which is what I am searching for. I'm thinking of a clone appearing as the same time the real one disappears but it seems very complicated to solve a "tiny" problem right? The size change is just a fact I've put in order to check the effect.morph was running, in real case I don't need it. That sounds quite a deal to do some bgimage morphing, do you have some idea in order to make it? Enjoy your night, Jinsa ;) On 11 avr, 17:18, Junkshops wrote: According to the wiki:http://wiki.github.com/madrobby/scriptaculous/effect-morph ...morph only works on length and color based attributes, so it won't switch the background image for you. Why don't you just use setStyle on the containing element and then use morph to change the size? Cheers, Junk On Apr 11, 7:48 am, Jinsa wrote: Anyone may have a clue? :( -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com . To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com . For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en . -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Effect.Morph applied to background image
If you're looking for a real morph effect, where one image slowly flows and changes into the next, there's no way scriptaculous or prototype could do that. Generally speaking, as I understand it, if you couldn't do the animation yourself by changing css/style tags and reloading over and over, scripty can't do it either. You'd have to use an anigif or flash or something. The opacity idea posted above seems like the best bet if you want to stick with JS based solutions. On Apr 11, 1:20 pm, Jinsa wrote: > Hey Junkshops :) > > First I would thank you for your answer. The setStyle may solve the > problem linked to the background image (what a shame that morph don't > work with bgimage :/) but the problem is that I won't get the "morph" > effect between the bakground change which is what I am searching for. > I'm thinking of a clone appearing as the same time the real one > disappears but it seems very complicated to solve a "tiny" problem > right? > > The size change is just a fact I've put in order to check the > effect.morph was running, in real case I don't need it. > > That sounds quite a deal to do some bgimage morphing, do you have some > idea in order to make it? > > Enjoy your night, > > Jinsa ;) > > On 11 avr, 17:18, Junkshops wrote: > > > According to the > > wiki:http://wiki.github.com/madrobby/scriptaculous/effect-morph > > ...morph only works on length and color based attributes, so it won't > > switch the background image for you. Why don't you just use setStyle > > on the containing element and then use morph to change the size? > > > Cheers, Junk > > > On Apr 11, 7:48 am, Jinsa wrote: > > > > Anyone may have a clue? :( -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Effect.Morph applied to background image
That is all i can think of. Quite heavy handed to have such a transition, but doable. Possibly always have a clone behind the transitioning element and just morph the opacity of the one on top anytime you want to change the background. Btw, the reason morph only effects what it does is that the only things that can easily calculate in between stages are effected. Ie, you cannot 'tween' the change of typesets, either. On Apr 11, 2010, at 1:20 PM, Jinsa wrote: > Hey Junkshops :) > > First I would thank you for your answer. The setStyle may solve the > problem linked to the background image (what a shame that morph don't > work with bgimage :/) but the problem is that I won't get the "morph" > effect between the bakground change which is what I am searching for. > I'm thinking of a clone appearing as the same time the real one > disappears but it seems very complicated to solve a "tiny" problem > right? > > The size change is just a fact I've put in order to check the > effect.morph was running, in real case I don't need it. > > That sounds quite a deal to do some bgimage morphing, do you have some > idea in order to make it? > > Enjoy your night, > > Jinsa ;) > > On 11 avr, 17:18, Junkshops wrote: >> According to the >> wiki:http://wiki.github.com/madrobby/scriptaculous/effect-morph >> ...morph only works on length and color based attributes, so it won't >> switch the background image for you. Why don't you just use setStyle >> on the containing element and then use morph to change the size? >> >> Cheers, Junk >> >> On Apr 11, 7:48 am, Jinsa wrote: >> >>> Anyone may have a clue? :( > > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to prototype-scriptacul...@googlegroups.com. > To unsubscribe from this group, send email to > prototype-scriptaculous+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Effect.Morph applied to background image
Hey Junkshops :) First I would thank you for your answer. The setStyle may solve the problem linked to the background image (what a shame that morph don't work with bgimage :/) but the problem is that I won't get the "morph" effect between the bakground change which is what I am searching for. I'm thinking of a clone appearing as the same time the real one disappears but it seems very complicated to solve a "tiny" problem right? The size change is just a fact I've put in order to check the effect.morph was running, in real case I don't need it. That sounds quite a deal to do some bgimage morphing, do you have some idea in order to make it? Enjoy your night, Jinsa ;) On 11 avr, 17:18, Junkshops wrote: > According to the > wiki:http://wiki.github.com/madrobby/scriptaculous/effect-morph > ...morph only works on length and color based attributes, so it won't > switch the background image for you. Why don't you just use setStyle > on the containing element and then use morph to change the size? > > Cheers, Junk > > On Apr 11, 7:48 am, Jinsa wrote: > > > Anyone may have a clue? :( -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Effect.Morph applied to background image
According to the wiki: http://wiki.github.com/madrobby/scriptaculous/effect-morph ...morph only works on length and color based attributes, so it won't switch the background image for you. Why don't you just use setStyle on the containing element and then use morph to change the size? Cheers, Junk On Apr 11, 7:48 am, Jinsa wrote: > Anyone may have a clue? :( -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Effect.Morph applied to background image
Anyone may have a clue? :( -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
