parallax и safari
Добрый день.
на сайте https://chimtec.ru/test
необходимо реализовать параллакс который нормально будет работать на iphone. Облазил весь интернет нашел пример ниже, он корректно работает.
https://www.npmjs.com/package/universal-parallax
Скачав его, я перенес все css и js код внутрь HTML страницы. удалил лишнее, сделал это для того что бы одним копипастом можно было вставлять параллакс в тело страницы.
По итогу все заработало но неверно высчитывается высот блока с картинкой. Между низом картинки и основным контентом страницы при прокрутке плавает интервал.
код приведен ниже. Я понимаю что не верно рассчитывается высота, но не могу понять где именно. Прошу помощи знатоков.
Код:
<style type="text/css">
*, :after, :before {
box-sizing: border-box;
}
.containerpar {
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 15px;
position: relative;
width: 100%;
}
.container--full {
height: 70vh;
}
.containerpar .content {
background: rgba(0, 0, 0, .75);
border-radius: 8px;
color: #fff;
margin: 0 auto;
padding: 30px 35px;
text-align: center;
}
.parallax{
min-height: 300px;
}
.parallax__container {
clip: rect(0, auto, auto, 0);
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -100;
}
.parallax__container .parallax {
/* can be put in a seperate class for better control */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* --------------------------- */
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.show-on-mobile--inline {
display: none;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@media screen and (max-width: 480px) {
.hide-on-mobile {
display: none;
}
.show-on-mobile--inline {
display: inline;
}
}
</style>
<script type="text/javascript">
"use strict";
var windowHeight = window.parent.innerHeight,
windowHeightExtra = 0,
safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
mobile = /Mobi/.test(navigator.userAgent);
safari && !mobile && (windowHeightExtra = window.outerHeight - window.innerHeight),
mobile && (windowHeight = window.screen.availHeight, windowHeightExtra = (window.screen.availHeight - window.innerHeight) / 2);
var positionParallax = function (e, t, a, i) {
var n = e.top / t - windowHeightExtra;
a[i].style.top = n + "px"
},
animateParallax = function (e, t) {
for (var a = 0; e.length > a; a++) {
var i = e[a].parentElement.parentElement.getBoundingClientRect();
0 <= i.top + i.height && i.top <= windowHeight && positionParallax(i, t, e, a)
}
},
calculateHeight = function (e, t) {
for (var a = 0; e.length > a; a++) {
var i = e[a].parentElement.parentElement.getBoundingClientRect(),
n = e[a].parentElement.parentElement.offsetTop,
o = (windowHeight - i.height) / 2,
r = windowHeight > i.height + n ? i.height + n - n / t : i.height + 2 * (o - o / t);
e[a].style.height = r + 2 * windowHeightExtra + "px",
positionParallax(i, t, e, a)
}
},
universalParallax = function () {
this.init = function (i) {
void 0 === i && (i = {}),
i = {
speed: void 0 !== i.speed ? i.speed : 1.5,
className: void 0 !== i.className ? i.className : "parallax"
};
for (var n = document.getElementsByClassName(i.className), e = 0; n.length > e; e++) {
var t = document.createElement("div");
n[e].parentNode.insertBefore(t, n[e]),
t.appendChild(n[e]);
var a = n[e].parentElement;
a.className += "parallax__container",
"relative" !== window.getComputedStyle(a.parentElement, null).getPropertyValue("position") && (a.parentElement.style.position = "relative");
var o = n[e].dataset.parallaxImage;
void 0 !== o && (n[e].style.backgroundImage = "url(" + o + ")", 1 === n[e].classList.length && "parallax" === n[e].classList[0] && (n[e].style.backgroundRepeat = "no-repeat", n[e].style.backgroundPosition = "center", n[e].style.backgroundSize = "cover"))
}
document.addEventListener("readystatechange", function (e) {
var t, a;
"complete" === e.target.readyState && (t = n, (a = i.speed) < 1 && (a = 1), calculateHeight(t, a), mobile || window.addEventListener("resize", function () {
windowHeight = window.innerHeight,
calculateHeight(t, a)
}), window.addEventListener("scroll", function () {
animateParallax(t, a)
}))
})
}
};
</script>
<section class="containerpar container--full">
<div class="content">
<p> Оборот Компании за 2021 г перешагнул отметку 1 млрд
и составил </p><p>
<span style="color:#01b8d4; font-weight: 700;">1 347 534</span> тыс.руб без НДС </p>
<p>что на 30% выше планируемого и более чем в два раза превысил оборот за 2020 г.</p>
</div>
<div class="parallax" data-parallax-image="/images/content/paralax/2021_005_01.jpg" ></div>
</section>
<script>
new universalParallax().init({
speed: 4
});
</script>
|