javascript Yandex的-示例-Perfectoin.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Yandex的-示例-Perfectoin.js相关的知识，希望对你有一定的参考价值。
{
// РАНДОМНОЕ ЗНАЧЕНИ от min до max
const getRandomFloat = (min, max) => { return Math.random() * (max - min) + min };
// ФИГУРА КОНЕЧНОЙ ТРАНСФОРМАЦИИ
const pointsBig = "M500.82 226.5C497.504 61.805 384.828-1.664 228.2.984 71.57 3.633-11.899 91.934 2.417 236.804 16.734 381.675 120.839 483 262.503 483c141.659 0 241.634-91.805 238.317-256.5z";
// ЛЕКСИЧЕСКОЕ ОКРУЖЕНИЕ
const DOM = {};
DOM.scene = document.querySelector('.bubble_bg');
DOM.gElems = Array.from(document.querySelectorAll('.bubble_bg'));
// РОДИТЕЛЬСКИЙ БЛОКГДЕ ЛЕТЕАЮТ ШАРИКИ
var parentBubble = ".promo__content";
// Promise экземпляр
var promise;
// ОБЪЕКТ НАЧАЛЬНЫХ ТОЧЕК (формируется при загрузке скрипта) id: path.attr('d')
var objSvgPath = {};
$('.small-bubble').each( function (i, el) {
// запрет на изминение свойств объекта в котором хранятся значения path.attr(p)
Object.defineProperty(objSvgPath, el.id, { // ообъект, свойство, параметры свойства
value: $(el).find('.small-bublle-path').attr('d'),
writable: false, // запретить присвоение
configurable: false // запретить удаление
});
}); // return objSvgPath.['small-bubble-`index`'] = "M500.82 226.5C497.504..."
if ( !msieversion() ) {
$('.random__bubble').children('div').children('div').css('transition', '0.3s all');
}
// ОТРКЫВАЕМ ШАРИК НА АКТИВНОМ СЛАЙДЕ
function slideChangeBubbleOpen () {
let r = $('.random__bubble').eq(mySwiper.activeIndex), // random__bubble который открыт на данный момент
el = r.find('.small-bubble-open');
el.trigger('click'); // включаем срабатываение клика и шарик увеличивается
DOM[el[0].id].move(true);
}
// ДОБАВЛЯЕМ ССЫЛКУ В ОБОЛОЧКУ bubble
function addLinkBubble (el, trigger) {
let a = el.closest('a'),
href = a.attr('data-href');
if (!trigger) {
a.attr('href', href);
} else {
a.attr('href', '#');
}
}
// ПОЗИЦИОНИРОВАНИЕ ШАРИКА
function setFixedPositionBubble ( elem ) {
let el = elem.parent().parent();
let venue = $('.bubble_venue').offset();
let top = venue.top - el.offset().top,
left = venue.left - el.offset().left;
if (!msieversion() ) {
el.css('transform', '');
el.css({ 'transform': `translate( ${left}px, ${top}px ) ` });
} else {
// el.css({'left': '', 'top': ''});
el.css({ 'left': `${left}px`, 'top': `${top}px` });
}
}
// УВЕЛИЧЕНИЕ УМЕНЬШЕНИЕ ШАРИКОВ
function snapMorph (el) {
var svg = el[0],
s = Snap(svg),
small = s.select('.small-bublle-path'),
mask1 = s.select('.small-bublle-mask1'),
mask2 = s.select('.small-bublle-mask2'),
pointsSmall = objSvgPath[el.attr('id')],
isThisBubbleClass = el.hasClass('small-bubble-active'),
duration = 300;
// Ф-ия ТРАНСФОРМАЦИИ
var morph = function (points) {
small.animate({ d: points,}, duration, mina.bounce);
mask1.animate({ d: points,}, duration, mina.bounce);
mask2.animate({ d: points,}, duration, mina.bounce);
};
if ( !isThisBubbleClass ) {
if ( !msieversion() ) {
promise = function () {
return new Promise ( (resolve, reject) =>{
setFixedPositionBubble ( $(el) );
setTimeout(() => { resolve(); }, 300); // 300ms это время transform transition css SVG
});
}
promise().then ( ()=> {
morph(pointsBig);
})
.then ( ()=> {
animeInBounce(el);
$(el).addClass('small-bubble-active'); })
.then ( ()=> {
addLinkBubble (el, isThisBubbleClass); })
.catch ( (error)=> { console.error(error) })
} else {
console.log('IE Открылся');
//////////////
setFixedPositionBubble ( $(el) );
setTimeout(() => {
addLinkBubble (el, isThisBubbleClass);
}, 100);
morph(pointsBig);
el.addClass('small-bubble-active');
animeInBounce(el);
////////////////
}
} else {
if ( !msieversion() ) {
promise = function () {
return new Promise ( (resolve, reject) =>{
$(el).removeClass('small-bubble-active');
morph(pointsSmall);
setTimeout(() => { resolve(); }, 300);
});
}
promise().then ( ()=> {
$(el).parent().parent().css('transform', ''); })
.then ( ()=> {
addLinkBubble (el, isThisBubbleClass); })
.catch ( (error)=> { console.error(error) });
} else {
//////////
//console.log('IE Закрылся');
setFixedPositionBubble ( $(el) );
addLinkBubble (el, isThisBubbleClass);
el.removeClass('small-bubble-active');
morph(pointsSmall);
$(el).closest('.bubble_bg').css({'left': '', 'top': ''});
//////////
}
}
} // end_func
// АНИМАЦИЯ ВНУТРИ ШАРИКОВ ПРИ ЕГО УВЕЛИЧЕНИИ
function animeInBounce (el) {
var title = $(el).find('.bubble__title'),
desc = $(el).find('.bubble__text');
TweenMax.from(title, 1, {
x: 150,
y: 60
});
TweenMax.from(desc, 1.3, {
x: 170,
y: 70
});
};
// FROM https://davidwalsh.name/javascript-debounce-function.
const debounce = (func, wait, immediate) => {
let timeout;
return function () {
let context = this;
var args = arguments;
let later = () => {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
class Bacteria {
constructor(el) {
this.DOM = {};
this.DOM.el = el;
this.CONFIG = {
motionIncrement: [300, 600]
};
this.init();
this.initEvents();
}
init() {
this.getSizes();
this.transform = { tx: 0, ty: 0, rz: 0, sx: 0, sy: 0 }; // Current values for the transform.
this.step = 0; // Current step.
// this.DOM.el.style.transformOrigin = '50% 50%'; // Set Origin.
this.move(); // Start the transforms animation.
}
initEvents() {
window.addEventListener('resize', debounce(() => this.getSizes(), 10));
}
getSizes() {
this.domrect = {
scene: document.querySelector(parentBubble).getBoundingClientRect(),
el: this.DOM.el.getBoundingClientRect()
};
}
getTransform(prop) {
let val;
if (prop === 'rz') {
val = anime.random(-30, 30);
}
else if (prop === 'sx' || prop === 'sy') {
val = getRandomFloat(0.8, 1.2);
}
else {
const inc = anime.random(this.CONFIG.motionIncrement[0], this.CONFIG.motionIncrement[1]) * (anime.random(0, 1) ? -1 : 1);
const vSize = prop === 'tx' ? 'width' : 'height';
const position = prop === 'tx' ? 'left' : 'top';
val = this.transform[prop] + inc;
// Out of viewport.
if (val > 0 && val > this.domrect.scene[vSize] - this.domrect.el[position] || val < 0 && Math.abs(val) > this.domrect.el[position] + this.domrect.el[vSize]) {
val -= 2 * inc;
}
}
return val;
}
move(stop = false) {
this.step++;
this.transform.tx = this.getTransform('tx');
this.transform.ty = this.getTransform('ty');
this.transform.rz = this.getTransform('rz');
let delay = anime.random(0, 1) ? 0 : anime.random(0, 1000);
var duration = 30000;
const easing = 'linear';
anime.remove(this.DOM.el);
if (msieversion()) { // Если IE
var animbubbleRandom = anime({
targets: this.DOM.el,
duration: duration,
easing: easing,
delay: delay,
translateX: this.transform.tx,
translateY: this.transform.ty,
//rotate: this.transform.rz,
complete: () => {
// console.log(123)
this.move()}
})
} else {
var animbubbleRandom = anime({
targets: this.DOM.el,
duration: duration,
easing: easing,
delay: delay,
left: this.transform.tx,
top: this.transform.ty,
// rotate: this.transform.rz,
complete: () => this.move()
})
} // end_if
if (stop) {
animbubbleRandom.pause();
return
}
}
}; // end_class
/*
* ************************************* ИНИЦИАЛИЗАЦИЯ **********************
*
* на мобильных не показывать
* */
if ((DOM.scene != null) && ( document.body.clientWidth >= 980 ) ) {
DOM.gElems.forEach( (gElem) => {
try {
let id = gElem.querySelector('svg').id;
DOM[id] = new Bacteria(gElem); // экземпляры класса будут в этом объекте
} catch (e) {
new Bacteria(gElem);
console.log("У random bubbl[ов] нет id и проверьте есть ли контент");
}
}
)}
/*
* ************************************* МАНИПУЛЯЦИЯ **********************
*
* УСЕНЬШАЕМ АКТИВНЫЙ ШАРИК И ПРОДОЛЖАЕМ ДВИЖЕНИЕ / УВЕЛИЧИВАЕМ ШАРИК НА КОТОРЫЙ КЛИКНУЛИ
* */
$('.small-bubble').off('click').on('click', function() {
if ($(this).closest('a').attr('href') !== "#") {
window.location.href = $(this).closest(a).attr('href');
};
DOM[$(this)[0].id].move(true); // останавливаем движение например DOM['small-bubble-1'].move(true)
if ( $('.small-bubble-active').length ) {
// уменьшаем
DOM[$('.small-bubble-active')[0].id].init(); // продолжить движение шарика
snapMorph ( $('.small-bubble-active') );
}
// увеличиваем
snapMorph ( $(this) );
// $(this).closest('.bubble_bg').removeClass('bubble_bg');
});
// ПРИ ЗАГРУЗКЕ ПОЯВЛЯЕТСЯ ПЕРВЫЙ ШАРИК
$(document).ready(function () {
slideChangeBubbleOpen();
});
// СОБЫТИЯ ПЕРЕКЛЮЧЕНИЯ СЛАЙДЕРА (открываем шарики отмеченные)
mySwiper.on('slideChange', function() {
/**
* Без обещания не будет корректно отрабатывать анимация
*/
if ( !msieversion() ) {
let promise = () => {
return new Promise ( (resolve, reject)=>{
// Когда закончится переключение swiper
mySwiper.on('transitionEnd', function() {
resolve();
});
});
}
promise().then ( ()=> {
slideChangeBubbleOpen();
});
} else {
// Когда закончится переключение swiper
mySwiper.off('transitionEnd').on('transitionEnd', function() {
slideChangeBubbleOpen();
});
}
});
function svgMultilineTextIe () {
var $set = $('text.data-bubble-set');
$set.css('opacity', '0'); // Убираем из виду длинный текст с сервеар
let countChar = 30;
}
$(document).ready(function () {
svgMultilineTextIe () ;
});
// ЕСЛИ IE
if ( msieversion() ) {
console.log('hello');
$('foreignObject.bubble__description').hide();
} else {
$('text.data-bubble-get').hide();
}
} // end global Object
以上是关于javascript Yandex的-示例-Perfectoin.js的主要内容，如果未能解决你的问题，请参考以下文章
javascript Yandex的-metrica-404.js