�
�
â–ª â–ª2015-10-15 19:04:49
JavaScript
â–ª â–ª, 2015-10-15 19:04:49

How to stop the execution of this script?

Hello. I have a script that reproduces the 3d parallax effect (or whatever it's more correct to call it). Made a one-page business card website. When you click on the button, a detailed description appears. At the same time, I would like parallax not to interfere with reading. Can it be stopped somehow?
Here is the script itself:

jQuery(document).ready(function($){
  //check media query
  var mediaQuery = window.getComputedStyle(document.querySelector('.cd-background-wrapper'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, ""),
    //define store some initial variables
    halfWindowH = $(window).height()*0.5,
    halfWindowW = $(window).width()*0.5,
    //define a max rotation value (X and Y axises)
    maxRotationY = 5,
    maxRotationX = 3,
    aspectRatio;


  
  //detect mouse movement
  $('.cd-background-wrapper').on('mousemove', function(event){
    if( mediaQuery == 'web' && $('html').hasClass('preserve-3d') ) {
      window.requestAnimationFrame(function(){
        moveBackground(event);
      });
    }
  });

  //on resize - adjust .cd-background-wrapper and .cd-floating-background dimentions and position
  $(window).on('resize', function(){
    mediaQuery = window.getComputedStyle(document.querySelector('.cd-background-wrapper'), '::before').getPropertyValue('content').replace(/"/g, '').replace(/'/g, "");
    if( mediaQuery == 'web' && $('html').hasClass('preserve-3d') ) {
      window.requestAnimationFrame(function(){
        halfWindowH = $(window).height()*0.5,
        halfWindowW = $(window).width()*0.5;
        initBackground();
      });
    } else {
      $('.cd-background-wrapper').attr('style', '');
      $('.cd-floating-background').attr('style', '').removeClass('is-absolute');
    }
  });

  function initBackground() {
    var wrapperHeight = Math.ceil(halfWindowW*2/aspectRatio), 
      proportions = ( maxRotationY > maxRotationX ) ? 1.1/(Math.sin(Math.PI / 2 - maxRotationY*Math.PI/180)) : 1.1/(Math.sin(Math.PI / 2 - maxRotationX*Math.PI/180)),
      newImageWidth = Math.ceil(halfWindowW*2*proportions),
      newImageHeight = Math.ceil(newImageWidth/aspectRatio),
      newLeft = halfWindowW - newImageWidth/2,
      newTop = (wrapperHeight - newImageHeight)/2;

    //set an height for the .cd-background-wrapper
    $('.cd-background-wrapper').css({
      'height' : wrapperHeight,
    });
    //set dimentions and position of the .cd-background-wrapper		
    $('.cd-floating-background').addClass('is-absolute').css({
      'left' : newLeft,
      'top' : newTop,
      'width' : newImageWidth,
    });
  }

  function moveBackground(event) {
    var rotateY = ((-event.pageX+halfWindowW)/halfWindowW)*maxRotationY,
      rotateX = ((event.pageY-halfWindowH)/halfWindowH)*maxRotationX;

    if( rotateY > maxRotationY) rotateY = maxRotationY;
    if( rotateY < -maxRotationY ) rotateY = -maxRotationY;
    if( rotateX > maxRotationX) rotateX = maxRotationX;
    if( rotateX < -maxRotationX ) rotateX = -maxRotationX;

    $('.cd-floating-background').css({
      '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
    });
  }
});

/* 	Detect "transform-style: preserve-3d" support, or update csstransforms3d for IE10 ? #762
  https://github.com/Modernizr/Modernizr/issues/762 */
(function getPerspective(){
  var element = document.createElement('p'),
      html = document.getElementsByTagName('html')[0],
      body = document.getElementsByTagName('body')[0],
      propertys = {
        'webkitTransformStyle':'-webkit-transform-style',
        'MozTransformStyle':'-moz-transform-style',
        'msTransformStyle':'-ms-transform-style',
        'transformStyle':'transform-style'
      };

    body.insertBefore(element, null);

    for (var i in propertys) {
        if (element.style[i] !== undefined) {
            element.style[i] = "preserve-3d";
        }
    }

    var st = window.getComputedStyle(element, null),
        transform = st.getPropertyValue("-webkit-transform-style") ||
                    st.getPropertyValue("-moz-transform-style") ||
                    st.getPropertyValue("-ms-transform-style") ||
                    st.getPropertyValue("transform-style");

    if(transform!=='preserve-3d'){
      html.className += ' no-preserve-3d';
    } else {
    	html.className += ' preserve-3d';
    }
    document.body.removeChild(element);

})();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vyacheslav Ovchinnikov, 2015-10-16
@kingdomofcrooked

As far as I understood from the script, the parallax movement is carried out by the moveBackground method.
Accordingly, we first add a check to it - "parallax" or not.

function moveBackground(event) {
   if($(foo).hasClass('bar')) return false;
   ...
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question