Задать вопрос

sofer233

Комментарии

  • Как сделать mixin меняющий размер круга при уменьшении экрана?

    @sofer233 Автор вопроса
    Ankhena, Ну, кому как удобнее. Я оптимизирую почти готовый проект, там используется высота и ширина в px и media запросы, как вы понимаете, это всё не очень плавно работает, ваш метод, определенно хорош, не спорю. Но переписывать под это версту, считаю не очень оправданно
    Написано

  • Как сделать mixin меняющий размер круга при уменьшении экрана?

    @sofer233 Автор вопроса
    Ankhena, Если в проекте используется много кругов с разным контендом внутри круга и разными размерами, то не совсем удобно
    Написано

  • Как сделать mixin меняющий размер круга при уменьшении экрана?

    @sofer233 Автор вопроса
    Смог сам решить, немного по колхозному, но вроде работает, если кто-то предложит более элегантное решения, буду благодарен !
    $maxWidth: 1920;

@mixin adaptiv($pcSize, $mobSize) {
 $addSize: $pcSize - $mobSize;
 $maxWidth: $maxWidth - 320;
 $width: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
 width:$width;
 height:$width;
}
    Написано

  • Как сделать mixin меняющий размер круга при уменьшении экрана?

    @sofer233 Автор вопроса
    Ankhena, Спасибо, но не подходит, нужно что бы динамически изменялась высота и ширина как отдельные переменные
    Написано

  • Как устранить ошибку barba.js и locomotive-scroll?

    @sofer233 Автор вопроса
    Уже, не помогло, вот мой код, может я где-то ошибку допустил ? 
    import barba from '@barba/core';
import LocomotiveScroll from 'locomotive-scroll';
import gsap from 'gsap';

document.addEventListener('DOMContentLoaded', () => {
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    smoothMobile: true,
    offset: ['3%', 100],
    lerp: 0.09,
    smartphone: {
      smooth: true
    }
  });


  function pageIn() {
    gsap.to('#content', {});
  }

  function pageOut() {
    gsap.to('#content', {});
  }

  function pageDelay(num) {
    return new Promise((resolve) => {
      setTimeout(resolve, num);
});
  }



  

  barba.init({
    transitions: [{
      name: 'transition',
      async leave(data) {
        pageIn();
        await pageDelay(1500);
      },

      enter(data) {
        pageOut();
        // Set <body> classes for 'next' page
        const nextHtml = data.next.html;
        const response = nextHtml.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', nextHtml);
        const bodyClasses = $(response).filter('notbody').attr('class');
        $('body').attr('class', bodyClasses);
      },

      async once(data) {
        pageIn();
        await pageDelay(1000);
        pageOut();
      }

    }]
  });



 console.log(scroll);
 

  barba.hooks.beforeLeave(() => {
    scroll.scrollTo('top');
  });

  gsap.set('.cursor', {
    force3D: true
  });

  document.addEventListener('mousemove', (e) => {
    const x = e.clientX;
    const y = e.clientY;

    gsap.to('.cursor', {
      x: x - 16,
      y: y - 16,
      ease: 'power3'
    });
  });

  document.body.addEventListener('mouseleave', () => {
    gsap.to('.cursor', {
      scale: 0,
      duration: 0.1,
      ease: 'none'
    });
  });

  document.body.addEventListener('mouseenter', () => {
    gsap.to('.cursor', {
      scale: 1,
      duration: 0.1,
      ease: 'none'
    });
  });

  const hoverCursor = document.querySelectorAll('a');

  hoverCursor.forEach((cursor) => {
    cursor.addEventListener('mouseenter', () => {
      gsap.to('.cursor', {
        scale: 2
      });
    });

    cursor.addEventListener('mouseleave', () => {
      gsap.to('.cursor', {
        scale: 1
      });
    });
  });
});





// 






const options = {
  rootMargin: "0px",
  threshold: buildThresholdList()
};

function buildThresholdList() {
  let thresholds = [];
  let numSteps = 10;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}

// ADD DATA ATTRIBUTE TO NAVIGATION ON SCROLL

let colorChangeCallback = entries => {
  const header = document.querySelector("header");
  entries.forEach(entry => {

    if (entry.isIntersecting) {
      let sectionColor = entry.target.getAttribute("data-background");
      let viewport = window.innerHeight;
      let visibleHeight = entry.intersectionRect.height;
      if (visibleHeight / viewport >= 0.85) {
        console.log(entry.target)
        //intersection ratio bigger than 90%
        //-> set header according to target
        header.setAttribute("data-nav-color", sectionColor);
      } else {
        //-> check if element is coming from top or from bottom into view
        if (entry.target.getBoundingClientRect().top < 0) {
          header.setAttribute("data-nav-color", sectionColor);
        }
      }
    }
  });
};

let colorObserver = new IntersectionObserver(colorChangeCallback, options);

document.querySelectorAll("section").forEach(section => {
  colorObserver.observe(section);
  // colorObserver.root.style.border = "2px solid #44aa44";
});
    Написано