javascript - JQuery Parallax Background moving with mouseover

I have implemented horizontal parallax background following this tutorial.

I want to have the same effect vertically . Please Help.

This is my code so far,

<html xmlns="">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src=".min.js" type="text/javascript"></script>
        <script>
            var currentX = '';
            var movementConstant = .015;
            $(document).mousemove(function(e) {
                if(currentX == '') currentX = e.pageX;
                var xdiff = e.pageX - currentX;
                currentX = e.pageX;
                $('.parallax div').each(function(i, el) {
                    var movement = (i + 1) * (xdiff * movementConstant);
                    var newX = $(el).position().left + movement;
                    $(el).css('left', newX + 'px');
                });
            });
        </script>
        <style>
            .parallax {
                position: absolute;
                width: 100%;
                height: 800px;
                overflow: hidden;
                left: 0;
            }
            .water {
                position: absolute;
                width: 100%;
                height: 800px;
                left:0;
                background-repeat: no-repeat;
                background-position: top center;
            }
            .water-layer1 {
                background-image: url(water-layer-1.png);
            }
            .water-layer2 {
                background-image: url(water-layer-2.png);
            }
            .water-layer3 {
                background-image: url(water-layer-3.png);
            }
            .water-layer4 {
                background-image: url(water-layer-4.png);
            }
        </style>


    </head>

    <body>
        <div class="parallax">
            <div class="water water-layer4"></div>
            <div class="water water-layer3"></div>
            <div class="water water-layer2"></div>
            <div class="water water-layer1"></div>
        </div>
    </body>
</html>

I have implemented horizontal parallax background following this tutorial.

I want to have the same effect vertically . Please Help.

This is my code so far,

<html xmlns="http://www.w3/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="http://code.jquery./jquery-latest.min.js" type="text/javascript"></script>
        <script>
            var currentX = '';
            var movementConstant = .015;
            $(document).mousemove(function(e) {
                if(currentX == '') currentX = e.pageX;
                var xdiff = e.pageX - currentX;
                currentX = e.pageX;
                $('.parallax div').each(function(i, el) {
                    var movement = (i + 1) * (xdiff * movementConstant);
                    var newX = $(el).position().left + movement;
                    $(el).css('left', newX + 'px');
                });
            });
        </script>
        <style>
            .parallax {
                position: absolute;
                width: 100%;
                height: 800px;
                overflow: hidden;
                left: 0;
            }
            .water {
                position: absolute;
                width: 100%;
                height: 800px;
                left:0;
                background-repeat: no-repeat;
                background-position: top center;
            }
            .water-layer1 {
                background-image: url(water-layer-1.png);
            }
            .water-layer2 {
                background-image: url(water-layer-2.png);
            }
            .water-layer3 {
                background-image: url(water-layer-3.png);
            }
            .water-layer4 {
                background-image: url(water-layer-4.png);
            }
        </style>


    </head>

    <body>
        <div class="parallax">
            <div class="water water-layer4"></div>
            <div class="water water-layer3"></div>
            <div class="water water-layer2"></div>
            <div class="water water-layer1"></div>
        </div>
    </body>
</html>

Share Improve this question edited Dec 29, 2013 at 12:11 Trojan 2,25429 silver badges40 bronze badges asked Dec 29, 2013 at 11:43 Suman.hassan95 4,0158 gold badges28 silver badges24 bronze badges

edited js fiddle jsfiddle/q8Z6m/1 – Suman.hassan95 Commented Dec 29, 2013 at 12:15
I'm on mobile so I can't test... but did you try just changing the x positions to y and the left syntax calls to top? You may have to tinker with image sizes but I think that will work. – Phlume Commented Dec 29, 2013 at 12:23
Already tried that, didn't work – Suman.hassan95 Commented Dec 29, 2013 at 12:28
what did you try that didn't work? – Phlume Commented Dec 29, 2013 at 13:04

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

I'm on mobile so I can't test... try this:

<script>
  var currentY = ''; 
  var movementConstant = .015;

  $(document).mousemove(function(e) { if(currentY == '') currentY = e.pageY; 

  var ydiff = e.pageY - currentY; 
  currentY = e.pageY;

  $('.parallax div').each(function(i, el) { var movement = (i + 1) * (ydiff * movementConstant); 

  var newY = $(el).position().top + movement; $(el).css('top', newY + 'px'); }); });     
 </script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - JQuery Parallax Background moving with mouseover - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)