Keith, Just saw your post. The transitions library was a proof of concept. I think it could work but there are some limitations that you need to be aware of. It's Friday, I've had a few drinks. I'll follow up tomorrow.
nwhite On Fri, Feb 20, 2009 at 7:24 PM, ksq08 <[email protected]> wrote: > > Hi Daniel [and all readers] > > Many grateful thanks for the advice you gave me. And for pointing out > Nathan White's "transitions" API: > > http://www.nwhite.net/category/mootools/image-manipulation/ > > Thus far I've used it to this extent: > > http://www.ksqdesign.com/signature/ForwardHo/transone.html > > All I've done so far is remove Nathan's images and put two of my own > in, and resized the CSS elements for the slideshow boxes to y-452 px > so it fits the larger of the two images I've put into the "transitions- > site.js". Having taken it this far, I thought it would be wise to ask > your advice rather than spend days tinkering and getting nowhere. I > have three questions standing between me and what I hope to do with > this VERY useful script. > > 1. Can I remove the animation options and just keep one specific cross- > fade transition? [I assume by commenting out the superfluous code in > "transitions-site.js", and the other two .js files if required. Though > I realise one of the other two .js files being the MooTools library, I > that I don't touch that one.] > > 2. I want to get two, three, or four transition examples on a page set > up. Can I apply a "Before" and an "After" button bottom left of each > example so that users can apply the transition? This means I disable > its present time-based transition and replace with a JS "on-click" > function. But can it be applied to what Nathan has written? > > 3. Can the "Before" and "After" states re-size? Or are you limited to > a static DIV and just applying "no-repeat" to prevent the background > image toggling? Nathan refers to implementing "add-ons". But, as > you've already guessed, my JS/MooTools is limited and I don't know if > this kind of manipulation of Nathan's very sexy work is possible. > > Some guidance on how and where to apply the code for what I want to do > with Nathan's "TRANSITIONS" would be gratefully received but feel free > to say "Hey, we're not here to hold your hand dude, do some > studying!". I know I'm sitting on Nathan's shoulders and getting a > free ride on his JS skills. And I DO want to learn. But your guidance, > as ever, is saving me A LOT of time. As we all know, this stuff is as > much about "work smart" as it is about "work hard". One without the > other is less than ideal, oh wise ones! > > What I want is to be able to have two or three examples of "Before" > and "After" (each example a transition between a BEFORE and an AFTER > image actioned by the user clicking on the "Before" and "After" > buttons) on each page. So users can see an image BEFORE I've done > something with it. And then AFTER being what I'd like them to spend > their money on, i.e. - my Photoshop and Illustrator skills. This idea > started with images I sexed up for my family for Christmas. Then I > printed them and framed them. Because I'm hoping to sell an idea to > the public that is basically about users spending money on their own > enjoyment - PRESENTATION is everything. And two static "before" and > "after" images on a page is not very engaging. Whereas, to me, this > kind of transition is, if I can make it work for my needs. > > I'm doing this as a generic Moo Tools post as well. > > Many thanks for pointing me in the right direction, Daniel. Hope > you're well. Any and all comments from Moo Tools readers welcome and > gratefully received. > > Keith > > On Jan 27, 5:43 am, csuwldcat <[email protected]> wrote: > > Ok so here is what is wrong (I am sarcastic and make attempts at > > humor, be warned), > > > > As echoed in above posts, the largest problem is that you are not > > actually including the library in your page (FF is like Son of a > > Bitch, where is mootools1.2.1-core???). Think of it this way, here is > > a quote from the few lines of Moo that are actually in your page with > > a few comments: > > > > Fx.Morph = Fx.Styles.extend({ // The browser is like WTF is 'Fx' or > > 'extend' > > > > start: function(className){ // The browser is again like WTF! > is > > 'start' > > > > var to = {}; > > > > $each(document.styleSheets, function(style){ // Here > the browser > > again curses and says WTF!?! is '$each' > > > > The point: these comments higlight kjey words and functions that are > > not inherently magical - they need the core lib to have any meaning to > > the code, so go ahead and include that so your browser stops throwing > > up on itself. > > > > You have about 1.4 kb of mootools code that was directly copied from > > the old 1.1 version demos. > > > > 1. You need the lib to do this:http://mootools.net/download - > > download a copy here > > > > 2. You are using old methods (Fx.Styles was depreciated). > > > > 3. Try this on domready grab all the styles you want to mess with like > > this: > > > > window.addEvent('domready', function(){ > > > > var originalStyles = $('myElement').getStyles({'styleProperty1' : > > 'styleValue1', 'styleProperty2' : 'styleValue2', 'styleProperty3' : > > 'styleValue3'}); //as many as you want to record > > var myEffect = new Fx.Morph('myElement', {duration: 'long', > > transition: Fx.Transitions.Sine.easeOut, > > onComplete: function{ this.toggleClass('morphed'); } > > }); > > > > $('myElement').addEvent('click', function(e){ > > > > if(this.hasClass('morphed') == false){ > > $('MyElement').start({'styleProperty1' : 'yourNewValue1', > > 'styleProperty2' : 'yourNewValue2', 'styleProperty3' : > > 'yourNewValue3'});} > > > > else{ > > $('MyElement').start({'styleProperty1' : 'originalStyles[0]', > > 'styleProperty2' : 'originalStyles[1]', 'styleProperty3' : > > 'originalStyles[2]'}); > > > > } > > }); > > > > So dude, here is what the above does: > > > > 1. The first var grabs the initial CSS style values and records them > > to an array. > > 2. The next Fx instantiation creates a Morph object with an onComplete > > function that fires when the effect is done that toggles on and off a > > class we have chosen to call morphed' to record its state (FYI this > > could just as well be Big Bird, for the love of god, it doesn't > > matter) > > 3. In the click event you then check to see what state the element is > > by checking if our arbitrary class 'morphed' is there, if it is there > > it morphs the element back using the values array we recorded on > > domready, if it is not present it morphs them to whatever new values > > you choose to put in there. > > > > Get all that? > > > > Now here is the kicker: In your first post you wanted to "morph" the > > bk image, this cannot happen in a 'fade' or artsy manner by just > > morphing to another background image path, here is why: > > > > assume my start height is 100, that is a number btw, and the computer > > can mathematically count it down in the browser via script 100, 99, > > 98, 97...etc. that is what makes it look morphish, the transition > > from one numerical value over a given duration over time. > > > > Now how does the browser transition this: myImage.png to > > BigBird.gif???? Hmmm If I am FF or and browser I would just switch > > it to the other image because there is no way to mathematically > > transition an image like this, you get me? > > > > AHHH, lastly, you can do this type of effect though, go herehttp:// > www.nwhite.net/2008/09/29/transitions-for-mootools/(i<http://www.nwhite.net/2008/09/29/transitions-for-mootools/%28i>posted > > this the first time above) and watch and stand in awe. This is what > > you want i assume if you want to transition a bk image. Let the force > > be with you JS dude. > > > > - Daniel > > >
