1

Тема: SVG анімація на айфоні

Друзі прошу допомоги. Є реалізований сайт для моб. телефонів http://shopini.site/last (працює до 580px), під-час пролистування сторінок анімація відображається коректно на андроїді, але на айфоні є проблеми анімація не дотягується до кінця (https://youtu.be/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)

2

Re: SVG анімація на айфоні

тобто не на айфоні, а в safari?

3

Re: SVG анімація на айфоні

не знаю, мабуть, в мене андроїд

4

Re: SVG анімація на айфоні

в мене є гейпад, я міг би затестувати, але я от на хромі в лінухі глянув на той сайт і не зрозумів, як воно має бути, тому що воно вже виглядає поламаним.
Можливо, проблема в ширині віконця?
зараз глянемо

5

Re: SVG анімація на айфоні

а ні, на повний екран теж виглядає поламано, а ще там кацапійський текст, від котрого будь-яке бажання допомагати зникає

Подякували: leofun011

6

Re: SVG анімація на айфоні

точно в ширині віконця

7

Re: SVG анімація на айфоні

сайт для моб. телефонів http://shopini.site/last (працює до 580px)

8

Re: SVG анімація на айфоні

ааа, зробив віконце меншим, і побачив ще більше кацапійського тексту, за щооооооооооооо

9

Re: SVG анімація на айфоні

ну пробач)

10

Re: SVG анімація на айфоні

ні.