// prettier-ignore
. Но нужно ли? Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас
если я перейду на визуализатор pixi то будет ли существенное повышение производительности?
__DEV__
:export function setExtraStackFrame(stack: null | string): void {
if (__DEV__) {
currentExtraStackFrame = stack;
}
}
__DEV__
был true, условие было опущено, т.к. оно всегда выполняется, а скобки остались как артефакт. Скорее всего транспилятор TS не проверяет весь контекст, и чтобы ничего не сломать случайно, оставляет скобки на своих местах. В codepen я нашел интересный проект...
moment(String)
) эта самая строка должна соответствовать одному из форматов ISO 8601. В случае если строка стандарту не соответствует - работа во всех браузерах не гарантируется. Там есть специальное предупреждение по этому поводу и примеры строк, которые будут соответствовать. Вероятнее всего вы столкнулись именно с этим - ваши даты не парсятся в определенных браузерах. var video = document.querySelector('video');
Плагин Dimensions замеряет расстояния через canvas. Реализация выглядит достаточно сложно...
scene.add(gltf.scene);
const model = new THREE.Mesh( loader, material );
scene.add(model);
курсор смещается внутри квадрата(нужно чтобы он оставался в центре)
// Там, где в двух местах есть работа с --x и --y
target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
// нужна еще пара значений
target.style.setProperty('--new-x', e.clientX - rect.left + 'px');
target.style.setProperty('--new-y', e.clientY - rect.top + 'px');
.image-zoom-block {
/*
left: var(--x);
top: var(--y);
transform: translateX(calc(var(--x) * -1)) translateY(calc(var(--y) * -1));
*/
left: var(--new-x);
top: var(--new-y);
transform: translateX(-50%) translateY(-50%);
}
Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?
<div class='swiper' id='my-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>Slide 1</div>
<div class='swiper-slide' id='youtube-slide'>
<div id='player'></div>
</div>
<div class='swiper-slide'>Slide 3</div>
<div class='swiper-slide'>Slide 4</div>
</div>
</div>
<style>
#player {
pointer-events: none;
}
</style>
const youtubeScriptTag = document.createElement('script');
youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(youtubeScriptTag);
window.onYouTubeIframeAPIReady = () => {
const player = new YT.Player('player', {
videoId: 'orbr-C3gYKk',
playerVars: {
controls: 0
},
events: {
onReady: (event) => {
const youtubeSlide = document.getElementById('youtube-slide');
let isVideoPlaying = false;
youtubeSlide.addEventListener('click', () => {
if (isVideoPlaying) {
event.target.stopVideo();
} else {
event.target.playVideo();
}
isVideoPlaying = !isVideoPlaying;
});
}
}
});
}
const swiper = new Swiper('#my-slider', {});
// Тут, конечно, лучше какие-нибудь id сделать для однозначности
const circle = document.querySelector('.circle');
const arrow = document.querySelector('.arrow');
document.addEventListener('mousemove', (e) => {
const circleRect = circle.getBoundingClientRect();
const circleCenterX = circleRect.left + circle.offsetWidth / 2;
const circleCenterY = circleRect.top + circle.offsetHeight / 2;
const deltaX = e.clientX - circleCenterX;
const deltaY = e.clientY - circleCenterY;
const angleInRadians = Math.atan2(deltaY, deltaX) - Math.PI / 2;
const angleInDegrees = 180 * angleInRadians / Math.PI;
const angleFrom0To360 = (angleInDegrees + 360) % 360;
const shouldEffectBeApplied = deltaY < 0;
if (shouldEffectBeApplied) {
arrow.style.transform = `rotate(${angleFrom0To360}deg)`;
}
});
.arrow {
transition: transform .1s linear;
}