Tilt.js на iframe

312
25 апреля 2017, 07:55

Вопрос не только относительно данной библиотеки, а и относительно самого iframe. Добавил google карту на сайт и думал добавить на нее интересный эффект с помощью tilt.js, а оказалось это не так просто сделать, так как iframe почему-то блокирует трансформации библиотеки.

Есть какой-то способ сделать задумку с рабочим iframe? Я полагаю можно, например, заблокировать iframe пока не кликнуть на него или.. ну в общем я варианты и спрашиваю..

В примере я прикрепил трансформацию к родителю и самому iframe. При трансформации iframe я получаю ошибку:

Uncaught TypeError: Cannot read property 'x' of undefined
    at HTMLDivElement.getValues (tilt.jquery.js:91)
    at HTMLDivElement.updateTransforms (tilt.jquery.js:106)
getValues @ tilt.jquery.js:91
updateTransforms @ tilt.jquery.js:106

При трансформации родителя все в порядке пока курсор не наедет на iframe.

"use strict";!function(t){t.fn.tilt=function(s){var i=function(){this.ticking||(requestAnimationFrame(g.bind(this)),this.ticking=!0)},e=function(){t(this).on("mousemove",h),t(this).on("mouseenter",n),this.settings.reset&&t(this).on("mouseleave",l)},a=function(){var s=this;void 0!==this.timeout&&clearTimeout(this.timeout),t(this).css({transition:this.settings.speed+"ms "+this.settings.easing}),this.settings.glare&&this.glareElement.css({transition:"opacity "+this.settings.speed+"ms "+this.settings.easing}),this.timeout=setTimeout(function(){t(s).css({transition:""}),s.settings.glare&&s.glareElement.css({transition:""})},this.settings.speed)},n=function(s){this.ticking=!1,t(this).css({"will-change":"transform"}),a.call(this),t(this).trigger("tilt.mouseEnter")},r=function(s){return"undefined"==typeof s&&(s={pageX:t(this).offset().left+t(this).outerWidth()/2,pageY:t(this).offset().top+t(this).outerHeight()/2}),{x:s.pageX,y:s.pageY}},h=function(t){this.mousePositions=r(t),i.call(this)},l=function(){a.call(this),this.reset=!0,i.call(this),t(this).trigger("tilt.mouseLeave")},o=function(){var s=t(this).outerWidth(),i=t(this).outerHeight(),e=t(this).offset().left,a=t(this).offset().top,n=(this.mousePositions.x-e)/s,r=(this.mousePositions.y-a)/i,h=(this.settings.maxTilt/2-n*this.settings.maxTilt).toFixed(2),l=(r*this.settings.maxTilt-this.settings.maxTilt/2).toFixed(2),o=Math.atan2(this.mousePositions.x-(e+s/2),-(this.mousePositions.y-(a+i/2)))*(180/Math.PI);return{tiltX:h,tiltY:l,percentageX:100*n,percentageY:100*r,angle:o}},g=function(){return this.transforms=o.call(this),this.reset?(this.reset=!1,t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg)"),void(this.settings.glare&&(this.glareElement.css("transform","rotate(180deg) translate(-50%, -50%)"),this.glareElement.css("opacity","0")))):(t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:this.transforms.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:this.transforms.tiltX)+"deg) scale3d("+this.settings.scale+","+this.settings.scale+","+this.settings.scale+")"),this.settings.glare&&(this.glareElement.css("transform","rotate("+this.transforms.angle+"deg) translate(-50%, -50%)"),this.glareElement.css("opacity",""+this.transforms.percentageY*this.settings.maxGlare/100)),t(this).trigger("change",[this.transforms]),void(this.ticking=!1))},c=function(){var s=this.settings.glarePrerender;if(s||t(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'),this.glareElementWrapper=t(this).find(".js-tilt-glare"),this.glareElement=t(this).find(".js-tilt-glare-inner"),!s){var i={position:"absolute",top:"0",left:"0",width:"100%",height:"100%"};this.glareElementWrapper.css(i).css({overflow:"hidden"}),this.glareElement.css({position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:""+2*t(this).outerWidth(),height:""+2*t(this).outerWidth(),transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"})}};return t.fn.tilt.destroy=function(){t(this).each(function(){t(this).find(".js-tilt-glare").remove(),t(this).css({"will-change":"",transform:""}),t(this).off("mousemove mouseenter mouseleave")})},t.fn.tilt.getValues=function(){var s=[];return t(this).each(function(){this.mousePositions=r.call(this),s.push(o.call(this))}),s},t.fn.tilt.reset=function(){t(this).each(function(){var s=this;this.mousePositions=r.call(this),this.settings=t(this).data("settings"),l.call(this),setTimeout(function(){s.reset=!1},this.settings.transition)})},this.each(function(){var i=this;this.settings=t.extend({maxTilt:t(this).is("[data-tilt-max]")?t(this).data("tilt-max"):20,perspective:t(this).is("[data-tilt-perspective]")?t(this).data("tilt-perspective"):300,easing:t(this).is("[data-tilt-easing]")?t(this).data("tilt-easing"):"cubic-bezier(.03,.98,.52,.99)",scale:t(this).is("[data-tilt-scale]")?t(this).data("tilt-scale"):"1",speed:t(this).is("[data-tilt-speed]")?t(this).data("tilt-speed"):"400",transition:!t(this).is("[data-tilt-transition]")||t(this).data("tilt-transition"),axis:t(this).is("[data-tilt-axis]")?t(this).data("tilt-axis"):null,reset:!t(this).is("[data-tilt-reset]")||t(this).data("tilt-reset"),glare:!!t(this).is("[data-tilt-glare]")&&t(this).data("tilt-glare"),maxGlare:t(this).is("[data-tilt-maxglare]")?t(this).data("tilt-maxglare"):1},s),this.init=function(){t(i).data("settings",i.settings),i.settings.glare&&c.call(i),e.call(i)},this.init()})},t("[data-tilt]").tilt()}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<header> 
    <div class="js-parent" data-tilt> 
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387287.2460439539!2d-74.15382891820799!3d40.68098374469773!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2z0J3RjNGOLdCZ0L7RgNC6LCDQodCo0JA!5e0!3m2!1sru!2sua!4v1493037568894" width="100" height="100" frameborder="0" style="border:0" allowfullscreen data-tilt></iframe> 
    </div> 
</header>

READ ALSO
Калькулятор для WP

Калькулятор для WP

Встал острый вопрос для расчета стоимости машины и её конечной наценки в случае сдачиОблазив с десяток плагинов, не нашел ничего чтобы работало...

278
Как правильно выбрать данные из JSON?

Как правильно выбрать данные из JSON?

Доброго времени суток,

272
Можно ли получить значение выбранного option из select вставленного в документ с помощью append

Можно ли получить значение выбранного option из select вставленного в документ с помощью append

Есть select, с помощью jquery по клику на один из пунктов option добавляю в документ еще один selectДелаю так

288
Как опустить сайдбар под контент?

Как опустить сайдбар под контент?

ЗдравствуйтеЕсть такая простенькая тема WP https://wp-themes

370