Prosellers Shell V2.0

Editing: sp-animateeffects.js

Cancel

"use strict";

var animationElementPosition = function animationElementPosition(idClass) {
  var element = jQuery(idClass);
  var offset = element.offset();
  return {
    'top': offset.top,
    'right': offset.left + element.outerWidth(),
    'bottom': offset.top + element.outerHeight(),
    'left': offset.left
  };
};

function check_animation_classes(item) {
  var wintop = jQuery(window).scrollTop();
  var checkscrollbottom = wintop + jQuery(window).outerHeight();
  var parenttop = animationElementPosition(item).top;
  var parentbottom = animationElementPosition(item).bottom;
  var transformcss = '';

if (jQuery(item).children('.sp-animation-translatey-up').length) {
    var default_value = 50;
    var default_speed = 1;
    default_speed = jQuery(item).children('.sp-animation-translatey-up').attr("data-vertical-scroll-speed");
    var animate_value = default_value * default_speed;
    var max_animate_value = -animate_value;
    var combineheight = parenttop + wintop; //console.log("checkscrollbottom" + checkscrollbottom + "parenttop" + parenttop + "wintop" + wintop + "combineheight" + combineheight);

if (checkscrollbottom > combineheight) {
      //console.log("this is top one");
      animate_value = animate_value * .1;
      var differnce_val = wintop * (default_speed * .2);
      animate_value = animate_value - differnce_val;

if (animate_value <= max_animate_value) {
        animate_value = max_animate_value;
      }
    } else {
      if (checkscrollbottom > parenttop) {
        var difference = (checkscrollbottom - parenttop) * (default_speed * .2); //console.log("variable value = " + difference);

animate_value = animate_value - difference;

if (animate_value <= max_animate_value) {
          animate_value = max_animate_value;
        }
      }
    }

jQuery(item).children('.sp-animation-translatey-up').css("--translateY", animate_value + "px");
    transformcss = transformcss + " translateY(var(--translateY))";
  }

if (jQuery(item).children('.sp-animation-translatey-down').length) {
    var _default_value = 50;
    var _default_speed = 1;
    _default_speed = jQuery(item).children('.sp-animation-translatey-down').attr("data-vertical-scroll-speed");

var _animate_value = _default_value * _default_speed;

var _max_animate_value = _animate_value;
    _animate_value = -_animate_value;

var _combineheight = parenttop + wintop;

if (checkscrollbottom > _combineheight) {
      //console.log("this is top one");
      _animate_value = _animate_value * .1;

var _differnce_val = wintop * (_default_speed * .2);

_animate_value = _animate_value + _differnce_val;

if (_animate_value >= _max_animate_value) {
        _animate_value = _max_animate_value;
      }
    } else {
      if (checkscrollbottom > parenttop) {
        var difference = (checkscrollbottom - parenttop) * (_default_speed * .2); //console.log("variable value = " + difference);

_animate_value = _animate_value + difference;

if (_animate_value >= _max_animate_value) {
          _animate_value = _max_animate_value;
        }
      }
    }

jQuery(item).children('.sp-animation-translatey-down').css("--translateY", _animate_value + "px");
    transformcss = transformcss + " translateY(var(--translateY))";
  }

if (jQuery(item).children('.sp-animation-translatex-left').length) {
    var _default_value2 = 50;
    var _default_speed2 = 1;
    _default_speed2 = jQuery(item).children('.sp-animation-translatex-left').attr("data-horizotal-scroll-speed");

var _animate_value2 = _default_value2 * _default_speed2;

var _max_animate_value2 = -_animate_value2;

var _combineheight2 = parenttop + wintop;

if (checkscrollbottom > _combineheight2) {
      //console.log("this is top one");
      _animate_value2 = _animate_value2 * .1;

var _differnce_val2 = wintop * (_default_speed2 * .125);

_animate_value2 = _animate_value2 - _differnce_val2;

if (_animate_value2 <= _max_animate_value2) {
        _animate_value2 = _max_animate_value2;
      }
    } else {
      if (checkscrollbottom > parenttop) {
        var difference = (checkscrollbottom - parenttop) * (_default_speed2 * .125); //console.log("variable value = " + difference);

_animate_value2 = _animate_value2 - difference;

if (_animate_value2 <= _max_animate_value2) {
          _animate_value2 = _max_animate_value2;
        }
      }
    }

jQuery(item).children('.sp-animation-translatex-left').css("--translateX", _animate_value2 + "px");
    transformcss = transformcss + " translateX(var(--translateX))";
  }

if (jQuery(item).children('.sp-animation-translatex-right').length) {
    var _default_value3 = 50;
    var _default_speed3 = 1;
    _default_speed3 = jQuery(item).children('.sp-animation-translatex-right').attr("data-horizotal-scroll-speed");

var _animate_value3 = _default_value3 * _default_speed3;

var _max_animate_value3 = _animate_value3;
    _animate_value3 = -_animate_value3;

var _combineheight3 = parenttop + wintop;

if (checkscrollbottom > _combineheight3) {
      //console.log("this is top one");
      _animate_value3 = _animate_value3 * .1;

var _differnce_val3 = wintop * (_default_speed3 * .125);

_animate_value3 = _animate_value3 + _differnce_val3;

if (_animate_value3 >= _max_animate_value3) {
        _animate_value3 = _max_animate_value3;
      }
    } else {
      if (checkscrollbottom > parenttop) {
        var difference = (checkscrollbottom - parenttop) * (_default_speed3 * .125); //console.log("variable value = " + difference);

_animate_value3 = _animate_value3 + difference;

if (_animate_value3 >= _max_animate_value3) {
          _animate_value3 = _max_animate_value3;
        }
      }
    }

jQuery(item).children('.sp-animation-translatex-right').css("--translateX", _animate_value3 + "px");
    transformcss = transformcss + " translateX(var(--translateX))";
  }

if (jQuery(item).children('.sp-animation-transparency-fadein').length) {
    var _default_value4 = .1;
    var _default_speed4 = 1;
    _default_speed4 = jQuery(item).children('.sp-animation-transparency-fadein').attr("data-transparency-scroll-speed");

var _animate_value4 = _default_value4 * (10 - _default_speed4);

var start_val = _animate_value4;
    var _max_animate_value4 = 1;

if (checkscrollbottom > parenttop) {
      var transparencyspeed = _default_speed4; //var difference = (checkscrollbottom - parenttop) * (start_val * .0035);

var difference = (checkscrollbottom - parenttop) * (.000125 * transparencyspeed);
      _animate_value4 = _animate_value4 + difference;

if (_animate_value4 >= _max_animate_value4) {
        _animate_value4 = _max_animate_value4;
      }
    }

jQuery(item).children('.sp-animation-transparency-fadein').css("opacity", _animate_value4);
  }

if (jQuery(item).children('.sp-animation-transparency-fadeout').length) {
    var _default_value5 = .1;
    var _default_speed5 = 1;
    _default_speed5 = jQuery(item).children('.sp-animation-transparency-fadeout').attr("data-transparency-scroll-speed");
    var _animate_value5 = 1;
    var _start_val = _animate_value5;

var _max_animate_value5 = _default_value5 * (10 - _default_speed5); //default_value * default_speed;

if (checkscrollbottom > parenttop) {
      var _transparencyspeed = _default_speed5; //var difference = (checkscrollbottom - parenttop) * (max_animate_value * .0050);

var difference = (checkscrollbottom - parenttop) * (.000125 * _transparencyspeed);
      _animate_value5 = _animate_value5 - difference;

if (_animate_value5 <= _max_animate_value5) {
        _animate_value5 = _max_animate_value5;
      }
    }

jQuery(item).children('.sp-animation-transparency-fadeout').css("opacity", _animate_value5);
  }

if (jQuery(item).children('.sp-animation-blur-fadein').length) {
    var _default_value6 = 1;
    var _default_speed6 = 1;
    _default_speed6 = jQuery(item).children('.sp-animation-blur-fadein').attr("data-blur-scroll-speed");

var _animate_value6 = _default_value6 * _default_speed6;

var _start_val2 = _animate_value6;
    var _max_animate_value6 = 0;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_start_val2 * .0014);
      _animate_value6 = _animate_value6 - difference;

if (_animate_value6 <= _max_animate_value6) {
        _animate_value6 = _max_animate_value6;
      }
    }

jQuery(item).children('.sp-animation-blur-fadein').css("--blur", _animate_value6 + "px");
  }

if (jQuery(item).children('.sp-animation-blur-fadeout').length) {
    var _default_value7 = 1;
    var _default_speed7 = 1;
    _default_speed7 = jQuery(item).children('.sp-animation-blur-fadeout').attr("data-blur-scroll-speed");
    var _animate_value7 = 0;

var _max_animate_value7 = _default_value7 * _default_speed7;

var _start_val3 = _max_animate_value7;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_start_val3 * .0014);
      _animate_value7 = _animate_value7 + difference;

if (_animate_value7 <= _max_animate_value7) {
        _animate_value7 = _max_animate_value7;
      }
    }

jQuery(item).children('.sp-animation-blur-fadeout').css("--blur", _animate_value7 + "px");
  }

if (jQuery(item).children('.sp-animation-rotate-toleft').length) {
    var _default_value8 = 50;
    var _default_speed8 = 1;
    _default_speed8 = jQuery(item).children('.sp-animation-rotate-toleft').attr("data-rotate-scroll-speed");

var _animate_value8 = _default_value8 * _default_speed8;

var _max_animate_value8 = -_animate_value8;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_default_speed8 * 0.120); //console.log("variable value = " + difference);

_animate_value8 = _animate_value8 - difference;

if (_animate_value8 <= _max_animate_value8) {
        _animate_value8 = _max_animate_value8;
      }
    }

jQuery(item).children('.sp-animation-rotate-toleft').css("--rotateZ", _animate_value8 + "deg");
    transformcss = transformcss + " rotateZ(var(--rotateZ))";
  }

if (jQuery(item).children('.sp-animation-rotate-toright').length) {
    var _default_value9 = 50;
    var _default_speed9 = 1;
    _default_speed9 = jQuery(item).children('.sp-animation-rotate-toright').attr("data-rotate-scroll-speed");

var _animate_value9 = _default_value9 * _default_speed9;

var _max_animate_value9 = _animate_value9;
    _animate_value9 = -_animate_value9;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_default_speed9 * 0.120); //console.log("variable value = " + difference);

_animate_value9 = _animate_value9 + difference;

if (_animate_value9 >= _max_animate_value9) {
        _animate_value9 = _max_animate_value9;
      }
    }

jQuery(item).children('.sp-animation-rotate-toright').css("--rotateZ", _animate_value9 + "deg");
    transformcss = transformcss + " rotateZ(var(--rotateZ))";
  }

if (jQuery(item).children('.sp-animation-scale-up').length) {
    var _default_value10 = 1;
    var _default_speed10 = 1;
    _default_speed10 = jQuery(item).children('.sp-animation-scale-up').attr("data-scale-scroll-speed");
    var _animate_value10 = _default_value10;

var _max_animate_value10 = _default_value10 + _default_speed10 * .1;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_default_speed10 * 0.00014); //console.log("variable value = " + difference);

_animate_value10 = _animate_value10 + difference;

if (_animate_value10 >= _max_animate_value10) {
        _animate_value10 = _max_animate_value10;
      }
    }

jQuery(item).children('.sp-animation-scale-up').css("--scale", _animate_value10);
    transformcss = transformcss + " scale(var(--scale))";
  }

if (jQuery(item).children('.sp-animation-scale-down').length) {
    var _default_value11 = 1;
    var _default_speed11 = 1;
    _default_speed11 = jQuery(item).children('.sp-animation-scale-down').attr("data-scale-scroll-speed");

var _animate_value11 = _default_value11 + _default_speed11 * .1;

var _max_animate_value11 = _default_value11;

if (checkscrollbottom > parenttop) {
      var difference = (checkscrollbottom - parenttop) * (_default_speed11 * 0.00014); //console.log("variable value = " + difference);

_animate_value11 = _animate_value11 - difference;

if (_animate_value11 <= _max_animate_value11) {
        _animate_value11 = _max_animate_value11;
      }
    }

jQuery(item).children('.sp-animation-scale-down').css("--scale", _animate_value11);
    transformcss = transformcss + " scale(var(--scale))";
  }
}

function check_mouse_animation_classes(item, event) {
  if (jQuery(item).children('.sp-mouse-track-opposite').length) {
    //window.addEventListener('mousemove', event => {
    var absMaxX = window.innerWidth / 2;
    var absMaxY = window.innerHeight / 2;
    var maxDistance = Math.sqrt(Math.pow(absMaxX, 2) + Math.pow(absMaxY, 2));
    var mouseX = event.clientX;
    var mouseY = event.clientY;
    var directionX = mouseX - absMaxX >= 0 ? -1 : 1;
    var directionY = mouseY - absMaxY >= 0 ? -1 : 1;
    var distance = Math.sqrt(Math.pow(mouseX - absMaxX, 2) + Math.pow(mouseY - absMaxY, 2));
    var translation = distance / maxDistance * 50;
    var distancex = Math.sqrt(Math.pow(mouseX - absMaxX, 2));
    var translationx = distancex / absMaxX * 50;
    var distancey = Math.sqrt(Math.pow(mouseY - absMaxY, 2));
    var translationy = distancey / absMaxY * 50;
    var default_speed = 5;
    default_speed = jQuery(item).children('.sp-mouse-track-opposite').attr("data-mouse-track-speed");
    var translationxspeed = directionX * translationx * default_speed;
    var translationyspeed = directionY * translationy * default_speed; //console.log("translationxspeed" + translationxspeed + "translationyspeed" + translationyspeed);

var transformval = jQuery(item).children('.sp-mouse-track-opposite').get(0).style.transform;

if (jQuery(item).children('.sp-mouse-track-opposite').get(0).style.transform) {
      if (transformval.indexOf('translateX') == -1) {
        transformval = transformval + " translateX(var(--translateX)) ";
      }

if (transformval.indexOf('translateY') == -1) {
        transformval = transformval + " translateY(var(--translateY)) ";
      }
    } else {
      transformval = " translateX(var(--translateX))   translateY(var(--translateY)) ";
    }

jQuery(item).children('.sp-mouse-track-opposite').css("--translateX", "".concat(translationxspeed, "px"));
    jQuery(item).children('.sp-mouse-track-opposite').css("--translateY", "".concat(translationyspeed, "px")); //console.log(transformval);

jQuery(item).children('.sp-mouse-track-opposite').css("transform", transformval); //});
  }

if (jQuery(item).children('.sp-mouse-track-direct').length) {
    //window.addEventListener('mousemove', event => {
    var _absMaxX = window.innerWidth / 2;

var _absMaxY = window.innerHeight / 2;

var _maxDistance = Math.sqrt(Math.pow(_absMaxX, 2) + Math.pow(_absMaxY, 2));

var _mouseX = event.clientX;
    var _mouseY = event.clientY;

var _directionX = _mouseX - _absMaxX >= 0 ? 1 : -1;

var _directionY = _mouseY - _absMaxY >= 0 ? 1 : -1;

var _distance = Math.sqrt(Math.pow(_mouseX - _absMaxX, 2) + Math.pow(_mouseY - _absMaxY, 2));

var _translation = _distance / _maxDistance * 50;

var _distancex = Math.sqrt(Math.pow(_mouseX - _absMaxX, 2));

var _translationx = _distancex / _absMaxX * 50;

var _distancey = Math.sqrt(Math.pow(_mouseY - _absMaxY, 2));

var _translationy = _distancey / _absMaxY * 50;

var _default_speed12 = 1;
    _default_speed12 = jQuery(item).children('.sp-mouse-track-direct').attr("data-mouse-track-speed");

var _translationxspeed = _directionX * _translationx * _default_speed12;

var _translationyspeed = _directionY * _translationy * _default_speed12; //console.log("translationxspeed" + translationxspeed + "translationyspeed" + translationyspeed);

var _transformval = jQuery(item).children('.sp-mouse-track-direct').get(0).style.transform;

if (jQuery(item).children('.sp-mouse-track-direct').get(0).style.transform) {
      if (_transformval.indexOf('translateX') == -1) {
        _transformval = _transformval + " translateX(var(--translateX)) ";
      }

if (_transformval.indexOf('translateY') == -1) {
        _transformval = _transformval + " translateY(var(--translateY)) ";
      }
    } else {
      _transformval = " translateX(var(--translateX))   translateY(var(--translateY)) ";
    }
    /*
    if (false === transformval.includes("translateX(") && false === transformval.includes("translateX(")) {
    	transformval = transformval + ` translateX(var(--translateX))   translateY(var(--translateY)) `;
    	//console.log("if");
    } else if (false === transformval.includes("translateX(")) {
    	transformval = transformval + ` translateX(var(--translateX)) `;
    	//jQuery(item).children('.sp-mouse-track-opposite').css("--translateX", `${translationxspeed}px`);
    	//console.log("else if");
    } else if (false === transformval.includes("translateY(")) {
    	transformval = transformval + `  translateY(var(--translateY)) `;
    	//jQuery(item).children('.sp-mouse-track-opposite').css("--translateY", `${translationyspeed}px`);
    	//console.log("else");
    }*/

jQuery(item).children('.sp-mouse-track-direct').css("--translateX", "".concat(_translationxspeed, "px"));
    jQuery(item).children('.sp-mouse-track-direct').css("--translateY", "".concat(_translationyspeed, "px")); //console.log(transformval);

jQuery(item).children('.sp-mouse-track-direct').css("transform", _transformval); //jQuery(item).children('.sp-mouse-track-direct').css("transform", `translateX(-${directionX * translationx}px) translateY(-${directionY * translationy}px)`);
    //});
  }

if (jQuery(item).children('.sp-mouse3d-opposite').length) {
    //window.addEventListener('mousemove', event => {
    var _absMaxX2 = window.innerWidth / 2;

var _absMaxY2 = window.innerHeight / 2;

var _maxDistance2 = Math.sqrt(Math.pow(_absMaxX2, 2) + Math.pow(_absMaxY2, 2));

var _mouseX2 = event.clientX;
    var _mouseY2 = event.clientY;

var _directionX2 = _mouseX2 - _absMaxX2 >= 0 ? -1 : 1;

var _directionY2 = _mouseY2 - _absMaxY2 >= 0 ? 1 : -1;

var _distance2 = Math.sqrt(Math.pow(_mouseX2 - _absMaxX2, 2) + Math.pow(_mouseY2 - _absMaxY2, 2));

var _translation2 = _distance2 / _maxDistance2 * 5;

var _distancex2 = Math.sqrt(Math.pow(_mouseX2 - _absMaxX2, 2));

var _translationx2 = _distancex2 / _absMaxX2 * 5;

var _distancey2 = Math.sqrt(Math.pow(_mouseY2 - _absMaxY2, 2));

var _translationy2 = _distancey2 / _absMaxY2 * 5;

var _default_speed13 = 1;
    _default_speed13 = jQuery(item).children('.sp-mouse3d-opposite').attr("data-mouse3d-track-speed");
    var rotatexspeed = _directionX2 * _translationx2 * _default_speed13;
    var rotateyspeed = _directionY2 * _translationy2 * _default_speed13;
    var _transformval2 = jQuery(item).children('.sp-mouse3d-opposite').get(0).style.transform;

if (jQuery(item).children('.sp-mouse3d-opposite').get(0).style.transform) {
      if (_transformval2.indexOf('rotateX') == -1) {
        _transformval2 = _transformval2 + " rotateX(var(--rotateX)) ";
      }

if (_transformval2.indexOf('rotateY') == -1) {
        _transformval2 = _transformval2 + " rotateY(var(--rotateY)) ";
      }
    } else {
      _transformval2 = " rotateX(var(--rotateX)) rotateY(var(--rotateY)) ";
    }
    /*
    if (false === transformval.includes("rotateX(") && false === transformval.includes("rotateY(")) {
    	transformval = transformval + ` rotateX(var(--rotateX)) rotateY(var(--rotateY)) `;
    } else if (false === transformval.includes("rotateX(")) {
    	transformval = transformval + ` rotateX(var(--rotateX)) `;
    } else if (false === transformval.includes("rotateY(")) {
    	transformval = transformval + `  rotateY(var(--rotateY)) `;
    }*/

jQuery(item).children('.sp-mouse3d-opposite').css("--rotateX", "".concat(rotateyspeed, "deg"));
    jQuery(item).children('.sp-mouse3d-opposite').css("--rotateY", "".concat(rotatexspeed, "deg"));
    jQuery(item).children('.sp-mouse3d-opposite').css("transform", _transformval2); //jQuery(item).children('.sp-mouse-track-direct').css("transform", `translateX(-${directionX * translationx}px) translateY(-${directionY * translationy}px)`);
    //});

/*
    const card = document.querySelector("body");
    	const tiltEffectSettings = {
    	reverse: true,
    	max: 50, // max tilt rotation (degrees (deg))
    	perspective: 1000, // transform perspective, the lower the more extreme the tilt gets (pixels (px))
    	scale: 1, // transform scale - 2 = 200%, 1.5 = 150%, etc..
    	speed: 500, // speed (transition-duration) of the enter/exit transition (milliseconds (ms))
    	easing: "cubic-bezier(.03,.98,.52,.99)" // easing (transition-timing-function) of the enter/exit transition
    };
    	window.addEventListener('mousemove', event => {
    		const cardWidth = card.offsetWidth;
    	const cardHeight = card.offsetHeight;
    	const centerX = card.offsetLeft + cardWidth / 2;
    	const centerY = card.offsetTop + cardHeight / 2;
    	const mouseX = event.clientX - centerX;
    	const mouseY = event.clientY - centerY;
    	const mouseReverse = tiltEffectSettings.reverse ? -1 : 1;
    	const mouseReverseNeg = -(mouseReverse);
    		const rotateXUncapped = (mouseReverse) * tiltEffectSettings.max * mouseY / (cardHeight / 2);
    	const rotateYUncapped = (mouseReverseNeg) * tiltEffectSettings.max * mouseX / (cardWidth / 2);
    	const rotateX = rotateXUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max :
    		(rotateXUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateXUncapped);
    	const rotateY = rotateYUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max :
    		(rotateYUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateYUncapped);
    			jQuery(item).children('.sp-mouse3d-opposite').css("--rotateX", `${rotateX}deg`);
    	jQuery(item).children('.sp-mouse3d-opposite').css("--rotateY", `${rotateX}deg`);
    		//rotateY
    	jQuery(item).children('.sp-mouse3d-opposite').css("transform", `perspective(${tiltEffectSettings.perspective}px) rotateX(var(--rotateX)) rotateY(var(--rotateY))
    				  scale3d(${tiltEffectSettings.scale}, ${tiltEffectSettings.scale}, ${tiltEffectSettings.scale})`);
    	});
    */
  }

if (jQuery(item).children('.sp-mouse3d-direct').length) {
    //window.addEventListener('mousemove', event => {
    var _absMaxX3 = window.innerWidth / 2;

var _absMaxY3 = window.innerHeight / 2;

var _maxDistance3 = Math.sqrt(Math.pow(_absMaxX3, 2) + Math.pow(_absMaxY3, 2));

var _mouseX3 = event.clientX;
    var _mouseY3 = event.clientY;

var _directionX3 = _mouseX3 - _absMaxX3 >= 0 ? -1 : 1;

var _directionY3 = _mouseY3 - _absMaxY3 >= 0 ? 1 : -1;

var _distance3 = Math.sqrt(Math.pow(_mouseX3 - _absMaxX3, 2) + Math.pow(_mouseY3 - _absMaxY3, 2));

var _translation3 = _distance3 / _maxDistance3 * 5;

var _distancex3 = Math.sqrt(Math.pow(_mouseX3 - _absMaxX3, 2));

var _translationx3 = _distancex3 / _absMaxX3 * 5;

var _distancey3 = Math.sqrt(Math.pow(_mouseY3 - _absMaxY3, 2));

var _translationy3 = _distancey3 / _absMaxY3 * 5;

var _default_speed14 = 1;
    _default_speed14 = jQuery(item).children('.sp-mouse3d-direct').attr("data-mouse3d-track-speed");

var _rotatexspeed = _directionX3 * _translationx3 * _default_speed14;

var _rotateyspeed = _directionY3 * _translationy3 * _default_speed14;

var _transformval3 = jQuery(item).children('.sp-mouse3d-direct').get(0).style.transform;

if (jQuery(item).children('.sp-mouse3d-direct').get(0).style.transform) {
      if (_transformval3.indexOf('rotateX') == -1) {
        _transformval3 = _transformval3 + " rotateX(var(--rotateX)) ";
      }

if (_transformval3.indexOf('rotateY') == -1) {
        _transformval3 = _transformval3 + " rotateY(var(--rotateY)) ";
      }
    } else {
      _transformval3 = " rotateX(var(--rotateX)) rotateY(var(--rotateY)) ";
    }
    /*
    if (false === transformval.includes("rotateX(") && false === transformval.includes("rotateY(")) {
    	transformval = transformval + ` rotateX(var(--rotateX)) rotateY(var(--rotateY)) `;
    } else if (false === transformval.includes("rotateX(")) {
    	transformval = transformval + ` rotateX(var(--rotateX)) `;
    } else if (false === transformval.includes("rotateY(")) {
    	transformval = transformval + `  rotateY(var(--rotateY)) `;
    } 
    */

jQuery(item).children('.sp-mouse3d-direct').css("--rotateX", "".concat(_rotatexspeed, "deg"));
    jQuery(item).children('.sp-mouse3d-direct').css("--rotateY", "".concat(_rotateyspeed, "deg"));
    jQuery(item).children('.sp-mouse3d-direct').css("transform", _transformval3); //jQuery(item).children('.sp-mouse-track-direct').css("transform", `translateX(-${directionX * translationx}px) translateY(-${directionY * translationy}px)`);
    //});

/*
    const card = document.querySelector("body");
    const tiltEffectSettings = {
    	reverse: true,
    	max: 50, // max tilt rotation (degrees (deg))
    	perspective: 1000, // transform perspective, the lower the more extreme the tilt gets (pixels (px))
    	scale: 1, // transform scale - 2 = 200%, 1.5 = 150%, etc..
    	speed: 500, // speed (transition-duration) of the enter/exit transition (milliseconds (ms))
    	easing: "cubic-bezier(.03,.98,.52,.99)" // easing (transition-timing-function) of the enter/exit transition
    };
    	window.addEventListener('mousemove', event => {
    		const cardWidth = card.offsetWidth;
    	const cardHeight = card.offsetHeight;
    	const centerX = card.offsetLeft + cardWidth / 2;
    	const centerY = card.offsetTop + cardHeight / 2;
    	const mouseX = event.clientX - centerX;
    	const mouseY = event.clientY - centerY;
    	const mouseReverse = tiltEffectSettings.reverse ? -1 : 1;
    	const mouseReverseNeg = -(mouseReverse);
    		const rotateXUncapped = (mouseReverse) * tiltEffectSettings.max * mouseY / (cardHeight / 2);
    	const rotateYUncapped = (mouseReverse) * tiltEffectSettings.max * mouseX / (cardWidth / 2);
    	const rotateX = rotateXUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max :
    		(rotateXUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateXUncapped);
    	const rotateY = rotateYUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max :
    		(rotateYUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateYUncapped);
    		jQuery(item).children('.sp-mouse3d-direct').css("transform", `perspective(${tiltEffectSettings.perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) 
    				  scale3d(${tiltEffectSettings.scale}, ${tiltEffectSettings.scale}, ${tiltEffectSettings.scale})`);
    	});
    */
  }
}

function animation_mouse_tranform(item) {
  var transformcss = '';

if (jQuery(item).children('.sp-animation-translatey-up').length) {
    transformcss = transformcss + " translateY(var(--translateY))";
  }

if (jQuery(item).children('.sp-animation-translatey-down').length) {
    transformcss = transformcss + " translateY(var(--translateY))";
  }

if (jQuery(item).children('.sp-animation-translatex-left').length) {
    transformcss = transformcss + " translateX(var(--translateX))";
  }

if (jQuery(item).children('.sp-animation-translatex-right').length) {
    transformcss = transformcss + " translateX(var(--translateX))";
  }

if (jQuery(item).children('.sp-animation-rotate-toleft').length) {
    transformcss = transformcss + " rotateZ(var(--rotateZ))";
  }

if (jQuery(item).children('.sp-animation-rotate-toright').length) {
    transformcss = transformcss + " rotateZ(var(--rotateZ))";
  }

if (jQuery(item).children('.sp-animation-scale-up').length) {
    transformcss = transformcss + " scale(var(--scale))";
  }

if (jQuery(item).children('.sp-animation-scale-down').length) {
    transformcss = transformcss + " scale(var(--scale))";
  }

jQuery(item).children('.sp-animation-effects').css("transform", "".concat(transformcss));
  var transformtransparencycss = '';

if (jQuery(item).children('.sp-animation-transparency-fadein').length) {
    transformtransparencycss = transformtransparencycss + "opacity";
  }

if (jQuery(item).children('.sp-animation-transparency-fadeout').length) {
    transformtransparencycss = transformtransparencycss + "opacity";
  } //if (transformtransparencycss != '') {

jQuery(item).children('.sp-animation-effects').css("will-change", "".concat(transformtransparencycss)); //}

var transformblurcss = '';

if (jQuery(item).children('.sp-animation-blur-fadein').length) {
    transformblurcss = transformblurcss + " blur(var(--blur))";
  }

if (jQuery(item).children('.sp-animation-blur-fadeout').length) {
    transformblurcss = transformblurcss + " blur(var(--blur))";
  }

jQuery(item).children('.sp-animation-effects').css("filter", "".concat(transformblurcss));
  return transformcss;
}

function animation_mouseover_tranform(item) {
  var transformcss = '';

if (jQuery(item).children('.sp-mouse-track-opposite').length) {
    transformcss = transformcss + " scale(var(--scale))"; //jQuery(item).children('.sp-mouse-track-direct').css("transform", `translateX(-${directionX * translationx}px) translateY(-${directionY * translationy}px)`);
  }

if (jQuery(item).children('.sp-mouse-track-direct').length) {}

if (jQuery(item).children('.sp-mouse3d-direct').length) {}

if (jQuery(item).children('.sp-mouse3d-opposite').length) {}

return transformcss;
}

function check_entrance_animation_classes(item) {
  var wintop = jQuery(window).scrollTop();
  var checkscrollbottom = wintop + jQuery(window).outerHeight();
  var parenttop = animationElementPosition(item).top;
  var parentbottom = animationElementPosition(item).bottom;
  var transformcss = ''; //if (jQuery(item).hasClass('sp-entrace-animation')) {

if (checkscrollbottom > parenttop) {
    var default_animation = jQuery(item).attr("data-entrance-animation");
    jQuery(item).addClass('sp-animation-time');
    jQuery(item).addClass(default_animation);
  } //}

}

function entrance_animation_effects() {
  var entranceanimationLoadParents = document.querySelectorAll(".sp-entrace-animation");

for (var i = 0; i < entranceanimationLoadParents.length; i++) {
    var entranceitemload = entranceanimationLoadParents[i];
    check_entrance_animation_classes(entranceitemload);
  }
}

jQuery(document).ready(function ($) {
  var animationLoadParents = document.querySelectorAll(".sp-animation-parent");

for (var i = 0; i < animationLoadParents.length; i++) {
    var itemload = animationLoadParents[i];
    check_animation_classes(itemload);
  }

entrance_animation_effects();
  jQuery(window).scroll(function () {
    var wintop = jQuery(window).scrollTop();
    var checkscrollbottom = wintop + jQuery(window).outerHeight();
    var checkelem;
    var animationParents = document.querySelectorAll(".sp-animation-parent");

for (var _i = 0; _i < animationParents.length; _i++) {
      var item = animationParents[_i];
      check_animation_classes(item);
    }

entrance_animation_effects();
  });
  var animationParentsCss = document.querySelectorAll(".sp-animation-parent");

for (var _i2 = 0; _i2 < animationParentsCss.length; _i2++) {
    var item = animationParentsCss[_i2];
    var mouse_css = animation_mouse_tranform(item); //jQuery(item).children('.sp-animation-effects').css("transform", `${mouse_css}`);
  }

var animationParents = document.querySelectorAll(".sp-mouse-parent");

if (animationParents.length >= 1) {
    window.addEventListener('mousemove', function (event) {
      for (var _i3 = 0; _i3 < animationParents.length; _i3++) {
        var _item = animationParents[_i3];
        check_mouse_animation_classes(_item, event);
      }
    });
  } //sp-animation-time

});

Editing: sp-animateeffects.js

Upload Files

Create New

Change Permissions

Change Date

Rename Item

Confirm Delete