safyann / portfolio Goto Github PK

Выравнивай код так будет легче его читать например не
const x = 12313
const yxs = 3124142
const affffffff = 9218981

а например вот так

const x = 12313
const yxs = 3124142
const affffffff = 9218981

и вот так лучше не делать

var x=1,
y=2,
z=3

например если будет написанно где нибудь не в начале а в середине другой человек который посмотрит в твой код не поймет обьявляется ли переменная или присваивается к ней значение или переприсваевается )

лучше вот так
const a = 1
const b = 3
const x = 1

и запятых ненадо ставить и более понятно что переменная тут впервый раз и не переприсваеваеться

если расширить на большие экраны то картинка не на весь экран

лучше будет оберуть картинку в блок дать блоку абсолют и расширеть на весь экран а внутри картинку расширеть на всю высоту и ширину блока и тогда будет смотреться нормально

вот примерчик
.comments__bg {
position: absolute;
left: 0;
right: 0;
height: 100%;
min-width: 900px;
&-img {
width: 100%;
height: 100%;
display: block;
z-index: -100;
}
}

ты считаешь высоту и ширину от от главного это не правильно потому что на нем может стоять или display flex или width 100% из за этого картинка при уменьшении экрана будет уменьшаться и блюр работать граммотно не будет лучше отсчитывать от блока самого блюра

функция почему то не правльно высчитывает позицию и высоту из за того что он ресайз почему то выполняется почему я пока не увидел но возможно с версткой связанно решил пока эту проблему вот так

module.exports = function() {
var blur = (function() {
const wrapper = document.querySelector(".comments__bg");
const blur = document.querySelector(".contact-form__wrapper");
const bg = document.querySelector(".contact-form__blur");

return {
  set(flag) {
    
    let bgHeight, posTop

    const bgWidth  = wrapper.offsetWidth  
    const posLeft  = -blur.offsetLeft     
    const blurCSS  = bg.style             

    if (flag==true) {
      bgHeight = wrapper.offsetHeight
      posTop   = -blur.offsetTop
    } else {
      bgHeight = wrapper.offsetHeight - 89 
      posTop   = -blur.offsetTop      + 89 
    }
    console.log('!');
    blurCSS.backgroundSize     = bgWidth + "px" + " " + bgHeight + "px";
    blurCSS.backgroundPosition = posLeft + "px" + " " + posTop   + "px";
  }
};

})();

window.onresize = function () { blur.set(true) }
blur.set(false);
};

там где по скролу замедли бэкграунд немножко 70 будет достаточно)

а то при скроле вниз видно как картинка заканчивается

паралакс по мышке и по скроллу можно обьединить в один скрипт и пользоваться разными функциями они делают один и тот же эффект и излишне будет разделять их

Добавь анимацию)