Answer the question
In order to leave comments, you need to log in
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
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 questionAsk a Question
731 491 924 answers to any question