2 Replies Latest reply on Mar 4, 2013 3:20 PM by TimJaramillo

    Can this be re-created in Edge? (Moving Images)

    AdrianBibby Level 1



      Notice how the liquid moves around the page on the website with your mouse, can this be re-created in Edge and if so, how? I'm not too fussed about the text, its just the moving images on top of eachother that I want to try and recreate.




      Thanks for your help in advance.

        • 1. Re: Can this be re-created in Edge? (Moving Images)
          elainecc Adobe Employee

          Hi, Adrian-


          I recently posted a link to a project that Ume-san posted in our preview, which I think reflects what you want it to do.  Instructions on how to use the animation is in the forum link.




          Hope that helps!



          • 2. Re: Can this be re-created in Edge? (Moving Images)
            TimJaramillo Level 4

            Hi Adrian, here is an example of parallax, reacting to the user's mouse position.









            Code on Stage.mousemove event:


            sym.onMouseMove(e.pageX, e.pageY);




            Code on Stage.compositionReady event:




            var stageWidth = $('#Stage').width();

            var stageHeight = $('#Stage').height();



            // boat

            var boatMinPosX = -58;

            var boatMaxPosX = 50;

            var boatMinPosY = 400;

            var boatMaxPosY = 420;



            // sunset

            var sunsetMinPosX = -180;

            var sunsetMaxPosX = 0;



            sym.onMouseMove = function( pageX, pageY ){

                      // move boat

                      var boatRequestPosX = sym.getTranslation(0, stageWidth, boatMinPosX, boatMaxPosX, pageX);

                      var boatRequestPosY = sym.getTranslation(0, stageHeight, boatMinPosY, boatMaxPosY, pageY);

                      sym.$("boat").css({left:boatRequestPosX, top:boatRequestPosY});



                      // testing

                      var boatPosX = sym.$("boat").css("left");




                      // move sunset

                      var sunsetRequestPosX = sym.getTranslation(0, stageWidth, sunsetMinPosX, sunsetMaxPosX, pageX);







            // utility function



                      * minInput                              minimum Number of  input scale

                       * maxInput                              maximum Number of  input scale

                      * minOutput                              minimum Number of  output scale

                      * maxOutput                              maximum Number of  output scale

                      * inputNumber                    Number in input scale to be translated


            sym.getTranslation = function(minInput, maxInput, minOutput, maxOutput, inputNumber) {

                      var translatedVal = ((inputNumber - minInput) * (maxOutput -minOutput)/(maxInput - minInput) ) + minOutput;

                      return translatedVal;