Result
jQuery
//PARALLAXY by roXondistance = 70;sensitivity = 7;var distHalf = distance / 2;var parW = $('#par').width(), parH = $('#par').height();$('.layer').each(function() { var layer = $(this); pixPos = distance * (layer.index() + 1); pixPosHalf = distHalf * (layer.index() + 1); layer.width('+=' + pixPos); layer.height('+=' + pixPos); layer.animate({left: '-' + pixPosHalf }, 0); layer.animate({top: '-' + pixPosHalf}, 0); wDiff1 = $('#par').width(); hDiff1 = $('#par').height(); wDiff2 = layer.width(); hDiff2 = layer.height(); var wDiff = ((wDiff2 / wDiff1) - 1).toFixed(2); var hDiff = ((hDiff2 / hDiff1) - 1).toFixed(2); $('#par').mousemove(function(mousEv) { parOffset = $(this).offset(); mouseX = (mousEv.pageX - parOffset.left); mouseY = (mousEv.pageY - parOffset.top); }); var parWhalf = parW / 2, parHhalf = parH / 2; var mouseX = parWhalf, mouseY = parHhalf; var posX = parWhalf, posY = parHhalf; setInterval(function() { posX += (mouseX - posX) / sensitivity; posY += (mouseY - posY) / sensitivity; layer.css({ left: '-' + Math.round(posX * wDiff) + 'px', top: '-' + Math.round(posY * hDiff) + 'px' }); }, 30);});$('.box').click(function() { $(this).toggleClass('green');}); |
css
#par{ position:relative; /*overflow:hidden;*/ margin:150px auto; width:400px; height:200px; background:#fff;}.layer{ position:absolute; width:100%; height:100%; border:1px solid #000;} |
html
<div id="par"> <div class="layer l1"> <div class="box" style="margin-left:100px;">1</div> </div> <div class="layer l2"> <div class="box" style="margin-left:200px;">2</div> </div> <div class="layer l3"> <div class="box" style="margin-left:300px;">3</div> </div></div> |
via
jQuery; Parallax page – Get the click event go through DIV layers
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
