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

      Hey,

       

      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.

       

      www.digitalhands.net

       

      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.

           

          http://forums.adobe.com/message/5112330#5112330

           

          Hope that helps!

           

          -Elaine

          • 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.

             

            Example:

            www.timjaramillo.com/code/edge/parallax_mouseMove

             

            Source:

            www.timjaramillo.com/code/edge/_source/parallax_mouseMove.zip

             

             

            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");

                      console.log('boatPosX'+boatPosX);

             

             

                      // move sunset

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

                      sym.$("sunset").css({left:sunsetRequestPosX});

            }

             

             

             

             

            // utility function

            /*

                      @param

                      * 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;

            }