Написал на js дополнение, все работает пока не перейдешь по страницам и вернешься назад, т.к. страницы не перезагружаются то переменные уже изменили свое значение и страница перестает функционировать, мне нужно их вернуть в исходное значение при переходах. Как это сделать?
<script>
var screenOne = 0, cssparal,checkMove=false,heightSvg;
window.onload = function() {
if(document.querySelector('.fp-enabled')) {
heightSvg = document.body.clientHeight
if(!isTouchDevice) {
var mouseCoords = {
// x: 0,
y: 0,
set: function (e) {
if (e.pageX && e.pageY) {
// this.x = (e.pageX * -1 / 42).toFixed(2);
this.y = (e.pageY * -1 / 26).toFixed(2);
} else if (e.clientX && e.clientY) {
// this.x = e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
this.y = e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
} else {
// this.x = 0;
this.y = 0;
}
}
}
document.onmousemove = function (e) {
e = e || window.event;
mouseCoords.set(e);
cssparal = 'background-position: 0px ' + mouseCoords.y + 'px'
document.querySelector('.section.active').style.cssText += cssparal
}
}
window.addEventListener("wheel", function(e) {
if (e.deltaY < 0) {
// код, при прокрутке вверх
if(screenOne == 2 || screenOne == 0)
firstScreen()
}
else if(e.deltaY > 0) {
if(screenOne == 0) {
firstDown()
}
else if(screenOne == 2){
secondDown()
}
// код, при прокрутке вниз
}
});
}
}
function firstDown() {
var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
var mainPageMask = document.querySelector('.main_page-1_2')
mainPageMask.style.cssText += 'display: block';
setTimeout(function(){mainPageMask.classList.add('show-animate-1_2'); mainPageMask.style.cssText += 'visibility: visible'; document.querySelector('.svgmask').style.cssText += 'height: ' + heightSvg},200);
// //.show("slide", { direction: "right" }, 600).addClass('show-animate-1_2'); если нужно снизу-вверх
for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 0;transition: 0.6s'}
setTimeout(function() { screenOne = 2 },400);
}
function firstScreen() {
var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
var mainPageMask = document.querySelector('.main_page-1_2')
mainPageMask.classList.remove('show-animate-1_2'); // .hide("slide", { direction: "right" }, 400);
for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 1;transition: 1.2s'}
screenOne = 0;
}
function secondDown() {
screenOne = 3;
}
export default {
watch: {
$route() {
var screenOne = 0, cssparal,checkMove=false,heightSvg;
}
},
data() {
return {
options: {
onLeave: this.onLeave,
scrollingSpeed: 1200,
}
}
},
methods: {
onLeave: function(index, nextIndex, direction){
console.log(screenOne)
var elements = document.getElementsByClassName("section")
if(screenOne == 0){
return false
}
if(direction == 'up') {
for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("down","next","prev")}
var upDir = nextIndex.item; upDir.classList.add("up")
if(nextIndex.index === 0) {} else {upDir.previousElementSibling.classList.add("prev", "up")}
upDir.nextElementSibling.classList.add("next", "up")
} else {
for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("up","next","prev")}
var downDir = nextIndex.item; downDir.classList.add("animate-show","down")
downDir.previousElementSibling.classList.add("prev", "down")
if(nextIndex.index+1 >= elements.length) {} else {downDir.nextElementSibling.classList.add("next", "down")}
}
var logoDeerpfarm = document.querySelector('.logo-deerpfarm'), logoProduct = "<span class='logo-deerpfarm_txt color-white'>продукция</span>"
var jsPhoneblock = document.querySelector('.js-phone-block')
if (nextIndex.index === 1 || nextIndex.index === 2 || nextIndex.index === 3) {
logoDeerpfarm.classList.add('logo-deerpfarm-txt'); if(!document.querySelector('.logo-deerpfarm_txt')){logoDeerpfarm.innerHTML+=logoProduct};
if(jsPhoneblock.classList.contains('fadeInDown')){jsPhoneblock.classList.remove('fadeInDown')}; jsPhoneblock.classList.add('animated','fadeOutUp')
if(!isMobile){document.querySelector('.desc-deerpfarm').classList.add('animated','fadeOut')}
}
else {
logoDeerpfarm.classList.remove('logo-deerpfarm-txt')
if(document.querySelector('.logo-deerpfarm_txt')){document.querySelector('.logo-deerpfarm_txt').remove()}
if(jsPhoneblock.classList.contains('fadeOutUp')){
jsPhoneblock.classList.remove('fadeOutUp'); jsPhoneblock.classList.add('fadeInDown')
}
if(!isMobile && document.querySelector('.desc-deerpfarm').classList.contains('fadeOut')){
document.querySelector('.desc-deerpfarm').classList.remove('fadeOut')
}
}
if (nextIndex.index == 0) {
setTimeout(function() { screenOne = 0 },600);
}
removeClassWild(logoDeerpfarm,"bg-*");
switch (nextIndex.index + 1) {
case 1: case 5: logoDeerpfarm.classList.add('bg-green');break;
case 2: logoDeerpfarm.classList.add('bg-green-2');break;
case 3: logoDeerpfarm.classList.add('bg-grey-2');break;
case 4: logoDeerpfarm.classList.add('bg-grey-3');break;
case 6: logoDeerpfarm.classList.add('bg-green');document.querySelector('.desc-deerpfarm').classList.remove('fadeOut');break;
}
function removeClassWild (el, m) {
let re = new RegExp('\\b' + m.replace(/\*/g, '\\S+') + '', 'g');
el.className = Array.from(el.classList).filter(cl => !re.test(cl)).join(' ');
return el;
}
}
}
}
</script>
Средний
Средний