10 Replies Latest reply on Feb 25, 2014 8:04 AM by iCurioso

    How enable Parallax.js?

    iCurioso

      Hello

      How connect parallax.js with adobe edge?

      https://github.com/wagerfield/parallax

       

      I want this effect: http://wagerfield.github.com/parallax/

        • 1. Re: How enable Parallax.js?
          iCurioso Level 1

          Help!

          • 2. Re: How enable Parallax.js?
            heathrowe Most Valuable Participant

            I had a look at it but I could not get it to work.

             

            I believe it has something to do with the way this library utilizes data-depth=" " on the individual elements.

             

            Darrell

            • 3. Re: How enable Parallax.js?
              resdesign Adobe Community Professional & MVP

              I have use it and have it working.

              Below was my code at the time:

               

               

              yepnope(

              {

                  nope:[

                    'js/parallax.js',

                    'js/requestAnimationFrame.js'

                   ],

                  complete: init

              }

              );

               

               

              function init() {

               

               

                        sym.$('scene').html('<ul id="scene" data-scalar-x="2"  data-scalar-y="5"  data-friction-x="0.1"  data-friction-y="0.1">'

               

               

                        + '<li class="layer" data-depth="0.20"><img src="images/layer_0009_trees.png"></li>'

                        //+' <li class="layer" data-depth="0.50"><img src="images/layer_0010_field3.png"></li>'

                        +' <li class="layer" data-depth="0.50"><img src="images/layer_0008_field2.png"></li>'

                        +'<li class="layer" data-depth="0.60"><img src="images/layer_0007_hucleberries.png"></li>'

                        +'<li class="layer" data-depth="0.50"><img src="images/layer_0006_blueberries.png"></li>'

                        +'<li class="layer" data-depth="0.40"><img src="images/layer_0005_field1.png"></li>'

                        +'<li class="layer" data-depth="0.50"><img src="images/layer_0004_strawberies.png"></li>'

                        +'<li class="layer" data-depth="0.30"><img src="images/layer_0003_flowers.png"></li>'

                        +'<li class="layer" data-depth="0.50"><img src="images/woman.png"></li>'

                        +'<li class="layer" data-depth="0.20"><img src="images/layer_0002_treeFront.png"></li>'

                 +'<li class="layer" data-depth="0.50"><img src="images/layer_0001_birds.png"></li></ul>'

                 );

               

               

                        var scene = document.getElementById('scene');

                        var parallax = new Parallax(scene);

              }

              1 person found this helpful
              • 4. Re: How enable Parallax.js?
                iCurioso Level 1

                What this - requestAnimationFrame?

                • 5. Re: How enable Parallax.js?
                  iCurioso Level 1

                  I don't have SCENE. A have a stage and many objects on stage.

                  I using timeline - offset left. And using TweenMax: sym.stop(frameNumber). And it's working.

                  • 6. Re: How enable Parallax.js?
                    resdesign Adobe Community Professional & MVP

                    I am just providing this sample for you to see if you can adapt to your composition. i currently do not have time to look at your files.

                    https://app.box.com/s/i75ijbjcbpz89ctwgpw8

                    • 7. Re: How enable Parallax.js?
                      resdesign Adobe Community Professional & MVP

                      You do not need requestAnimationFrame and I adapted the new file with the script loading included in Animate version 3.

                      Code was an adaptation of a sample provided on the plugin site.

                       

                      Anyway, if it is working, then why the question?

                      • 8. Re: How enable Parallax.js?
                        heathrowe Most Valuable Participant

                        Nice example Marie

                         

                        I mangaged to work something out by injecting the attributes;

                         

                        Sample: http://www.heathrowe.com/edge/parallax/

                        Download: http://www.heathrowe.com/edge/parallax/parallax.zip

                         

                        -----------------------------------------------

                         

                        What I did - you will see in the example download.

                        - create a scene element

                        - import images and nest them into the scene element

                        - select those images and add a class to these called 'layer' (without the quotes).

                        - Edge Animate 3 use the Library import script from harddrive option

                         

                        Then in compositionReady event handler I have the following

                         

                        //////////// compositionReady /////////////////////////////

                        // scene element

                        // be sure to set the child elements of scene class to 'layer'

                            var element = sym.$("scene");

                        // inject scene element attributes

                                element.attr("id","scene");

                                element.attr("data-scalar-x","25");

                                element.attr("data-scalar-y","15");

                                element.attr("data-friction-x","0.1");

                                element.attr("data-friction-y","0.1");

                        // set/inject children of scene elements data-depth values

                        // add as many elements to this scene with matching lookup selector and desired data-depth

                                sym.$("cloud").attr("data-depth","0.70");

                                sym.$("cloud2").attr("data-depth","0.70");

                                sym.$("cloud3").attr("data-depth","0.90");

                                sym.$("lighthouse").attr("data-depth","0.20");

                        // call script function parallax

                        element.parallax();

                        ////////////////////// End Script //////////////////////////////////////

                         

                        hth

                        Darrell

                        • 9. Re: How enable Parallax.js?
                          resdesign Adobe Community Professional & MVP

                          Thanks!

                          Great job Darrell! Always fun to play with new toys!

                          • 10. Re: How enable Parallax.js?
                            iCurioso Level 1

                            It's great! Thank you!!!