Skip to main content
F
fadia77241875
Inspiring
February 3, 2019
Question

Parallax Help

  • February 3, 2019
  • 3 replies
  • 3390 views

Hello all;

I found this website showing mouse-over effect written in J Query.

jQuery Mouseover Effect with Parallax Style Tutorial - freshDesignweb

I don't know where to start, how do I design an image in a way that the scripts are able to move those parts in the image independently in different direction as you move the mouse within image boundary?

I also found another demo "see screen shot below", when you move the mouse over an image, the shoe will move closer toward me and the text on the left just moves around as you move the mouse inside the image.

Can you please explain.

Thanks.

This topic has been closed for replies.

3 replies

F
fadia77241875Author
Inspiring
February 3, 2019

Thank you each one of you for your valuable input!! and thanks to Nancy OShea​​ for pointing out the the feature in Firefox.

I understand the effect would not work on tables and phones, which is fine as long as it would not render the website buggy.

Nancy OShea
Nancy OShea
Community Expert
February 3, 2019

fadia77241875  wrote

I don't know where to start, how do I design an image in a way that the scripts are able to move those parts in the image independently in different direction as you move the mouse within image boundary?

Right click on page in Firefox and select View Page Info > Media tab.  You'll see that the jQuery Mouseover effect uses 5  transparent PNGs (balloons) over a repeating background image (sky).

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/bg.png

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/balloons-1.png

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/balloons-2.png

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/balloons-3.png

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/balloons-4.png

https://freshdesignweb.com/demo/jquery-mouse-hover-effect-with-parallax-style-tutorial/images/balloons-5.png

Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Brainiac
    February 3, 2019

    Its very, very poor, doesn't do anything in mobile.

      ALsp
      ALsp
      Brainiac
      February 3, 2019

      Yeah. There are some serious problems with the approach and the script. A good case for how bad programmers can misuse jQuery.

        BenPleysier
        BenPleysier
        Community Expert
        February 3, 2019

        I use this extension for Dreamweaver https://www.dmxzone.com/go/32826/app-connect-animate-css/ to get this effect https://pleysier.com.au/klarity/parallax.php

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          ALsp
          ALsp
          Brainiac
          February 3, 2019

          I'm not sure where they came from, but there are quite a few errors on that page:

          Showing results for https://pleysier.com.au/klarity/parallax.php - Nu Html Checker

          Here is an alternative approach to complex animations:

          BSE Animation Test

            ALsp
            ALsp
            Brainiac
            February 4, 2019

            ALsp  wrote

            I'm not sure where they came from, but there are quite a few errors on that page:

            Showing results for https://pleysier.com.au/klarity/parallax.php - Nu Html Checker

            Yes, I can see how a gullible person could view this as a problem. More informed persons would have read

            This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change

            Very nice, Ben. You are obviously a gentleman and a scholar - and a remarkable coder, too. How many personal attacks do you get to make before someone from Adobe pulls their head out of the sand?

            You are one nasty, despicable human being. We have many pages that don't validate for silly reasons, but when I present an example page to a customer I always make sure it validates. You say, DMX is forward thinking. That may be true, but it has nothing to do with your rudeness. We need to get options from our UIs into the markup, too. We chose to use data attributes and spend the time building more logic into our scripts and interfaces to handle that particular method. You are not in a position to make the claims you do, especially since I was not attacking you personally. What is your problem?

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices