Тема: SVG анімація на айфоні
Друзі прошу допомоги. Є реалізований сайт для моб. телефонів http://shopini.site/last (працює до 580px), під-час пролистування сторінок анімація відображається коректно на андроїді, але на айфоні є проблеми анімація не дотягується до кінця (https://www.youtube.com/watch/Qu_g04H9R8A).
<div class="swiper-button-next">
<span></span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 22 865" id="snap-svg-animate-next">
<defs>
<path id="path-next" d="M316.322 0H320v865h-3.678s2.162-297.123 0-548.336c-.018-2.097-3.636-13.023-6.173-18.357C308.23 294.27 298 283.081 298 270c0-11 11.128-23.72 13.418-28.732 3.514-7.693 4.904-12.879 4.904-15.08V0z" />
</defs>
<g>
<g transform="translate(-298)">
<use xlink:href="#path-next" />
</g>
</g>
</svg>
</div>
Код js
(function ($) {
'use strict'
var prev, next;$(document).ready(function () {
svg4everybody({});new Swiper('.swiper-container', {
slidesPerView: 'auto',
autoHeight: true,
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {slideChange: function () {
var dataColor = $(".swiper-slide-active").data("color")
$(".swiper-button-prev").removeClass(["white-color", "fiolet-color"])
$(".swiper-button-next").removeClass(["white-color", "fiolet-color"])if (dataColor == "w") {
$(".swiper-button-prev").addClass("white-color")
$(".swiper-button-next").addClass("white-color")
}
if (dataColor == "f") {
$(".swiper-button-prev").addClass("fiolet-color")
$(".swiper-button-next").addClass("fiolet-color")
}$(".swiper-slide").css("transition-delay", '0.65s')
var svgSnap = Snap.select('#snap-svg-animate-next')
var pathSvg = svgSnap.select('#path-next')var c1 = "M 316.322 0H320v865h-3.678s2.162-297.123 0-548.336c-.018-2.097-3.636-13.023-6.173-18.357C308.23 294.27 298 283.081 298 270c0-11 11.128-23.72 13.418-28.732 3.514-7.693 4.904-12.879 4.904-15.08V0z"
var c2 = "M 226.82442,-26.415794 C 258.8189,-26.129485 320,0 320,0 v 865 c 0,0 -326.2518218,2.40878 -322.9313338,0.85688 C 279.86285,733.6868 298.0359,460.13274 306.16019,317.19854 c 0.40004,-7.03806 0.58766,-13.90171 0.74128,-19.0481 0.17132,-5.73948 0.78047,-18.67758 0.78047,-27.88317 0,-17.80357 0.22628,-24.24744 0.39519,-29.75522 0.11778,-3.84053 0.21167,-9.33409 0.20777,-13.23598 C 308.14841,90.432822 289.21393,47.605452 226.82442,-26.415794 Z"
var c3 = "M 322.69123,-23.361189 c 0.88415,-7.040279 -1.17933,19.2034509 -1.17933,19.2034509 C 317.47895,286.14967 320.24217,575.32439 320,865 c 0,0 -35.38566,41.73401 -30.7718,-22.55809 13.83845,-192.8328 8.03874,-275.78617 -55.67512,-370.07072 -31.75056,-46.98486 -49.704,-57.35345 -64.17891,-100.66409 -9.72403,-29.09543 -4.90389,-58.70717 0.65307,-76.91263 7.25741,-23.77638 22.30221,-40.22363 50.07168,-72.01067 17.37149,-19.88471 27.70194,-37.73591 42.74828,-62.34275 41.30499,-67.550358 58.53824,-173.404601 59.84403,-183.802239 z"
var c4 = "M 28.41873,-71.022268 C 298.04395,-70.125047 321.5119,-4.1577381 321.5119,-4.1577381 317.47895,286.14967 320.24217,575.32439 320,865 c 0,0 -35.38566,41.73401 -30.7718,-22.55809 13.83845,-192.8328 8.03874,-275.78617 -55.67512,-370.07072 -31.75056,-46.98486 -40.38084,-75.89123 -45.20277,-96.92232 -6.23957,-27.2142 -6.8677,-41.06033 0.65307,-76.91263 4.26161,-20.31555 18.43425,-38.15033 17.19752,-70.40705 -0.77179,-20.13026 -9.67606,-35.34797 -14.98193,-44.16842 C 151.61443,118.12238 36.848936,68.505099 28.41873,-71.022268 Z"
var c5 = "M -35.725957,-71.022268 C 233.89926,-70.125047 321.5119,-4.1577381 321.5119,-4.1577381 317.47895,286.14967 320.24217,575.32439 320,865 c 0,0 -185.79694,1.61611 -185.3204,-0.007 C 175.89653,724.58649 67.605431,682.06967 49.671645,572.86453 44.544037,541.64072 68.998049,483.46638 101.75498,428.90278 116.25224,404.75452 124.28148,372.05032 119.60962,335.71683 117.82361,321.82687 110.97467,301.8411 90.740464,279.44494 75.98729,263.11544 48.238488,231.5458 33.632787,217.97671 -21.402179,166.84774 -94.647671,70.643255 -35.725957,-71.022268 Z"
var c6 = "M -35.725957,-71.022268 C 233.89926,-70.125047 321.5119,-4.1577381 321.5119,-4.1577381 317.47895,286.14967 320.24217,575.32439 320,865 c 0,0 -427.38587,0.14975 -429.07021,-0.007 -55.53464,-5.16813 -114.29541,-61.37658 -126.16746,-118.40328 -8.4956,-40.8081 -5.26239,-59.46396 10.92383,-132.73643 6.07546,-27.50268 4.29443,-41.48124 7.16386,-84.63333 4.79483,-72.10735 0.93657,-98.01627 28.86106,-137.52182 17.77255,-25.14332 84.05785,-62.2004 106.461271,-77.5044 C 0.79587954,257.75278 128.78965,161.51489 -35.725957,-71.022268 Z"
var c7 = "M -35.725957,-71.022268 C 233.89926,-70.125047 321.5119,-4.1577381 321.5119,-4.1577381 317.47895,286.14967 320.24217,575.32439 320,865 c 0,0 -427.38587,0.14975 -429.07021,-0.007 -55.53464,-5.16813 -114.29541,-61.37658 -126.16746,-118.40328 -8.4956,-40.8081 -5.26239,-59.46396 10.92383,-132.73643 6.07546,-27.50268 4.29443,-41.48124 7.16386,-84.63333 4.79483,-72.10735 0.93657,-98.01627 28.86106,-137.52182 17.77255,-25.14332 46.49089,-63.56455 36.91365,-142.5163 -7.89724,-65.10247 -129.56127,-208.619331 115.649313,-320.204108 z"
pathSvg.animate({
d: c1
}, 20, function () {
$('.swiper-button-next span').animate({
"opacity": 0
}, 200)
pathSvg.animate({
d: c2
}, 180, function () {
pathSvg.animate({
d: c3
}, 150, function () {
pathSvg.animate({
d: c4
}, 120, function () {
pathSvg.animate({
d: c5
}, 90, function () {
pathSvg.animate({
d: c7
}, 220, function () {
pathSvg.animate({
d: c1
}, 20)
$('.swiper-button-next span').animate({
"opacity": 1
}, 100)$(".swiper-button-prev").removeClass(["white-color", "fiolet-color"])
$(".swiper-button-next").removeClass(["white-color", "fiolet-color"])
if (dataColor == "f") {
$(".swiper-button-prev").addClass("white-color")
$(".swiper-button-next").addClass("white-color")
} else if (dataColor == "w") {
$(".swiper-button-prev").addClass("fiolet-color")
$(".swiper-button-next").addClass("fiolet-color")
}
})
})
})
})
})
})}
}
})var heightNav = (322 * 100) / $(window).height()
$('.swiper-button-prev').css("top", "-" + heightNav + "vh");
prev = parseInt($('.swiper-button-prev').css("top"))
next = parseInt($('.swiper-button-next').css("top"))
})$(document).scroll(function () {
var scrollWindow = $(window).scrollTop();
var resultPrev = scrollWindow + prev;
var resultNext = scrollWindow + next;$('.swiper-button-prev').css("top", resultPrev + "px");
$('.swiper-button-next').css("top", resultNext + "px");
})})(jQuery)
