19 Replies Latest reply on Sep 17, 2013 7:27 AM by ariedge13

    y-position scrolling

    ariedge13

      Hi Zaxist,

       

      Hope all is well! I'm trying to make a parrallax animation that the stage y position (Vertical Scroll) stays constant but you still can scroll and the animation in controlled by the scroll.

       

      I already know the coding for the parallax part but the issue I have is I would to set the stage hieght to %100 with overflow hidden so you can't scroll but at the same time when you scroll

       

      the next frame of animation will play and the stage stays where it is and does not move down.

       

      I really appriciate it!

       

      Thank you!

       

      ariedge

        • 1. Re: y-position scrolling
          Zaxist Level 4

          it's not so hard but did you thought about disadvantage of this work ?

           

          if user's mouse doesnt have the wheel or if user's laptop was old and doesnt have the scroll option on his touch pad then user cannot see your website's parallax effect, is that ok with you ?

           

          Zaxist

          • 2. Re: y-position scrolling
            ariedge13 Level 1

            yeah that's fine, this is only one the pages not all!

             

            Thanks,

             

            ariedge13

            • 3. Re: y-position scrolling
              Zaxist Level 4

              i read your question more than 20 times but i couldnt get undrestand what you really want to do, so i thought this way that you want to set your stage height to 100% but using your stage's width to make animations work and also you want to hide that width scroll

               

              here is the sample i made for you, if you had any question feel free to ask

               

              i hope this is what you wanted

               

              http://www.mediafire.com/download/uo1gi7b17cufjgg/Parallax-Effect-Vertical-noScrollbar.rar

               

              Zaxist

              • 4. Re: y-position scrolling
                ariedge13 Level 1

                Actually no I want o hide the scroll on the height (y axis) and I want the animation to be controlled bt parallax. I know thw coding for parallax but not the rest.

                 

                A very good exmaple is on Apple's webiste for the new iphone 5C. Here is the link:

                 

                http://www.apple.com/ca/iphone-5c/

                 

                 

                Thanks,

                 

                ariedge13

                • 5. Re: y-position scrolling
                  Zaxist Level 4

                  actually i saw the link and this is not Parallax effect !!

                   

                  they used scrollTo() function, and you can hide the scroll bar like in the sample i made for you

                   

                  and also you can replace the EdgeCommons.js file in my sample with orginal one to make it work for y position of parallax effect

                   

                  Zaxist

                  1 person found this helpful
                  • 6. Re: y-position scrolling
                    ariedge13 Level 1

                    is it possible to combine that effect with parallax, so I can hide the scroll bar and have the animation fully controlled as you scroll and I dont's want the stage to move at all

                     

                    since I wanna have the page at the %100 height for responsive design.

                     

                     

                    Thanks,

                     

                    ariedge13

                    • 7. Re: y-position scrolling
                      Zaxist Level 4

                      i cant undrestand what are you talking about !!

                       

                      Parallax effects are based on moving stage !! what do you mean by not moving stage ?

                       

                      and also in the link in your previous post Stage is moving !!!

                       

                      can you send me the works you want to do so i can better undrestand what you want to achive,,,!!

                       

                       

                       

                      Zaxist

                      • 8. Re: y-position scrolling
                        ariedge13 Level 1

                        you know when you have the stage moving, the height can not be adjusted to 100% then the problem is according to different screen resolutions the scroll to() function will not

                         

                        scroll to the exact desired location, I mean if I design it according to 1920 X 1080 which here the height is set at 1080 the on a resolution with a height of something else the effect

                         

                        will not be what I want.

                         

                         

                        Thanks,

                         

                        ariedeg13

                        • 9. Re: y-position scrolling
                          Zaxist Level 4

                          creating Parallax effect with based on 100% width and height is impossible unless you find a trick to do that !!

                           

                          the trick is you just can have one side in percentage not both side !! and hide the scrollbar for that side

                           

                          if you want to make height 100% then you should have width in px and also you can change the width of screen for diffrent resolution to make your animation looks the way you want (increase or decrease the size of scrollbar) !!

                           

                          i hope that i coud helped you with this

                           

                          Zaxist

                          • 10. Re: y-position scrolling
                            ariedge13 Level 1

                            but the problem is my parallax is set on y axis (height scrolling) and when I set the height at %100 then the stage does not move, so my parallax is worthless.

                             

                            Even if I set the width to px.

                             

                             

                            Thanks,

                             

                            ariedge13

                            • 11. Re: y-position scrolling
                              Zaxist Level 4

                              the fact that you cant do that is you have no scroll to change the value to move your timeline by that value !! when you change your height to 100%

                               

                              and if your animation is based on y axis i'm afraid that there is no way but just to make your height size change with screen resolution with some simple lines codes and set your height to px

                               

                              Zaxist

                              • 12. Re: y-position scrolling
                                ariedge13 Level 1

                                Thaks alot for your time and help and I'll give it a try to your example since it sounds that it's more closer to what I'm looking for.

                                 

                                Kind Regards,

                                 

                                ariedge13

                                • 13. Re: y-position scrolling
                                  ariedge13 Level 1

                                  Hi Zaxist,

                                   

                                  Actually your example does not work. The code only scrolls the stage but it does not control the anmation so only an empty stage scrolls down nicely.

                                   

                                  Can you tell me about how to do the scroll to () function and also the amount of vertical scroll per scroll?

                                   

                                  So when someone scrolls once it goes to a specific frame and scroll also controls the animation.

                                   

                                  Thanks,

                                   

                                  ariedge13

                                  • 14. Re: y-position scrolling
                                    Zaxist Level 4

                                    Hi ariedge13

                                     

                                    Actually my example works perfect, and you just cant see your animation moving, cause your animation is in y axis and you move your div in x axis and so your animation will play out of the screen, to fix that you should change your animation axis from y to x and that would take much time for you to doing this !!

                                     

                                    you can also see that moving animation in my sample that you can control it !!

                                     

                                     

                                    Zaxist

                                    • 15. Re: y-position scrolling
                                      ariedge13 Level 1

                                      Hi Zaxist,

                                       

                                      What I meant by it's not working is that how does the scroll take the stage t the next level?

                                       

                                      I want it it work in this order: So when I scroll once I want it to go to a specific frame, then when you scroll the second time then to the next specific frame.

                                       

                                      is that fesiable?

                                       

                                       

                                      Thanks,

                                       

                                      ariedge13

                                      • 16. Re: y-position scrolling
                                        SEIF BH

                                        scroll function

                                         

                                         

                                        $(window).scroll(function () {

                                        // play the timeline from the given position (ms or label)

                                        sym.play("P1");

                                         

                                         

                                            sym.stop($(window).scrollTop() );

                                        });

                                        1 person found this helpful
                                        • 17. Re: y-position scrolling
                                          ariedge13 Level 1

                                          Hi Seif BH,

                                           

                                          Thank you for your reply, I have two questions:

                                           

                                          1- Do I put this fucntion under Scroll property of the stage?

                                           

                                          2- How can I go to the next label of the animation on the next scroll? So everytime I scroll once, the stage goes to the next specific frame or lable.

                                           

                                           

                                          Thank you,

                                           

                                          ariedge13

                                          • 18. Re: y-position scrolling
                                            SEIF BH Level 2

                                            Hi Ariedge,

                                             

                                            1- Copy that in compositionReady

                                             

                                            2- You need onther other labes contains other animation , just change the label name

                                             

                                            $(window).scroll(function () {

                                            // play the timeline from the given position (ms or label)

                                            sym.play("Label Name");

                                             

                                             

                                                sym.stop($(window).scrollTop() );

                                            });

                                             

                                             

                                             

                                            SEIF - BH

                                            • 19. Re: y-position scrolling
                                              ariedge13 Level 1

                                              Hi Seif,

                                               

                                              I don't think you understood me correctly.

                                               

                                              What I asked was how do you go to the next label by scrolling the second time. so you have the above code and on the first scroll it takes you to

                                               

                                              that labled frame. How abou about when you scroll for the second time and it takes you to another labled frame and so on. Like a slideshow but by scrolling.

                                               

                                               

                                              Thanks,

                                               

                                              ariedge13