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

Parallax Help

  • February 3, 2019
  • 3 replies
  • 3463 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
Community Expert
Nancy OSheaCommunity Expert
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_
    Legend
    February 3, 2019

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

      ALsp
      ALsp
      Legend
      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
        Community Expert
        BenPleysierCommunity Expert
        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
          Legend
          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

            O
            osgood_
            Legend
            February 3, 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

            That's something I addressed in this forum a few days ago - most of those errors relate to the front-end js framework that Ben is using as I'm sure you know. It would be the same for Vue and I think React and Angular, although I think Vue does have a way you can make any page with Vue directives validate, but I havent explored that yet.

            As you probably also know I was never a great follow of validation and have always expressed that in this forum over a number of years. My 2 pence on the subject of validation is know your own code and why it doesnt validate 100%. The bit that irks me most is people who religiously suggested validation was important now obvioulsy think its not, because they have found 'convienient' workflow which is currently suitable to their needs, go figure.

            Similary it was always said the less html used in your page the better and cleaner and more managable, until css frameworks appeared and then the same people that religioulsy followed that line of thought suddenly changed their minds.

            You could'nt make this shite up if you tried.

            Going back to validation should the W3C be held responsible for NOT keeping up with progress and only allowing the the 'data-' attribute for html elements or have they just given up, considering the amount of new and up-coming frameworks released practically every day.

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