jQuery SVG анимация не завершена - PullRequest
0 голосов
/ 23 января 2019

Я создал анимацию на веб-сайте для клиента.Мне было интересно, почему на некоторых экранах (как правило, меньше) код не завершен.Большое спасибо.

Это сайт (для перенаправления на реальный сайт потребуется секунда ... Я не хочу, чтобы это показывалось в их SEO): https://dereferer.me/?oh4N0vg2vr-okGm8mpEb5m_O4pEvk3rpvK

Строка должна быть заполнена в контактной форме внизу страницы (она отображается только на рабочем столе).

Я несколько раз пытался изменить некоторые расчеты, но очень важно, чтобы путь выгляделточно так же.

// SVG Animation Js
// ====================================================

  var dashPath = $('path#dash-line');
  var journeyPath = $('path#journey-line');


  $( window ).on( "load resize", function() {

    // Start Points
    // +++++++++++++++
    var startXoffset = $( ".start-point" ).offset().left;
    var startXwidth = $( ".start-point" ).width();
    var startYheight = $( ".start-point" ).height();

    var startX = startXoffset + (startXwidth / 2);
    var startY = $( ".start-point" ).offset().top;


    // Path Points
    // +++++++++++++++

    // Slider Point
    var sliderPoint = $('.path-point').eq(0);
    var sliderPointLeft = sliderPoint.offset().left;
    var sliderPointWidth = sliderPoint.width();

    var sliderPointX = sliderPointLeft + (sliderPointWidth/2);
    var sliderPointY = sliderPoint.offset().top;


    // Approach Point
    var approachPoint = $('.path-point').eq(1);
    var approachPointX = approachPoint.offset().left;
    var approachPointY = approachPoint.offset().top;


    // Traveller Img Point
    var travellerPoint = $('.path-point').eq(2);

    var travellerLeft = travellerPoint.offset().left;
    var travellerWidth = travellerPoint.width();
    var travellerX = travellerLeft + (travellerWidth/2);

    var travellerTop = travellerPoint.offset().top;
    var travellerHeight = travellerPoint.height();
    var travellerY = travellerTop + (travellerHeight / 2 );


    // Where Point
    var wherePoint = $('.path-point').eq(3);
    var whereLeft = wherePoint.offset().left;
    var whereWidth = wherePoint.width();

    var whereX = whereLeft + (whereWidth/2);
    var whereY = wherePoint.offset().top;


    // Schedule Button Point
    var schedulePoint = $('.path-point').eq(4);
    var scheduleLeft = schedulePoint.offset().left;
    var scheduleWidth = schedulePoint.outerWidth();

    var scheduleX = scheduleLeft + (scheduleWidth/2);
    var scheduleY = schedulePoint.offset().top;

    // Sign-Up Button Point
    var signUpPoint = $('.path-point').eq(5);
    var signUpLeft = signUpPoint.offset().left;
    var signUpWidth = signUpPoint.outerWidth();

    var signUpX = signUpLeft + (signUpWidth/2);
    var signUpY = signUpPoint.offset().top;


    // Boat Img Point
    var boatPoint = $('.path-point').eq(6);
    var boatLeft = boatPoint.offset().left;
    var boatWidth = boatPoint.width();

    var boatX = boatLeft + (boatWidth/2);
    var boatY = boatPoint.offset().top;

    // Plane Img Point
    var planePoint = $('.path-point').eq(7);
    var planeLeft = planePoint.offset().left;
    var planeWidth = planePoint.width();

    var planeX = planeLeft + (planeWidth/2);
    var planeY = planePoint.offset().top;


    // Form Point
    var formPoint = $('.path-point').eq(8);
    var formLeft = formPoint.offset().left;
    var formWidth = formPoint.width();

    var formX = formLeft + (formWidth/2);
    var formY = formPoint.offset().top;


    // Path Calculations
    // +++++++++++++++++++
    var pathCalc = 'M ' + startX + ',' + (startY+startYheight) + ' C' + (startX*1.03125) + ',' + (startY*1.081) + ', ' + ( startX*0.83 ) + ',' + (startY*1.197) + ', ' + (startX*1.125) + ',' + (startY*1.232) + ' ' +


  //Slider Point
  'S' + (sliderPointX*1.125) + ',' + (sliderPointY*1.125) + ' ' + (sliderPointX*0.95) + ',' + sliderPointY + ' ' +

  //Slider Point 2
  'S' + (sliderPointX*0.75) + ',' + (sliderPointY*1.35) + ' ' + (sliderPointX*1.25) + ',' + (sliderPointY*1.5) + ' ' +

  //Slider Point 3
  'S' + sliderPointX + ',' + (approachPointY*0.76) + ' ' + (sliderPointX*0.73) + ',' + (approachPointY*0.88) + ' ' +


  //Approach Point
  'S' + (approachPointX*0.878) + ',' + (approachPointY*0.88) + ' ' + (approachPointX*0.659) + ',' + (approachPointY*1.05) + ' ' +

  //Approach Point 2
  'S' + (approachPointX*0.219) + ',' + (approachPointY*1.064) + ' ' + (approachPointX-approachPointX) + ',' + (approachPointY*1.252) + ' ' +

  //Approach Point 3
  'S' + (approachPointX*0.044) + ',' + (approachPointY*1.315) + ' ' + (approachPointX*0.307) + ',' + (approachPointY*1.315) + ' ' + // S20,2100 140,2100

  //Approach Point 4
  'S' + (approachPointX*0.659) + ',' + (approachPointY*1.346) + ' ' + (approachPointX*0.878) + ',' + (approachPointY*1.378) + ' ' + // S300,2150 400,2200

  //Approach Point 5
  'S' + (approachPointX*1.316) + ',' + (approachPointY*1.315) + ' ' + Math.ceil((approachPointX*1.425)) + ',' + (approachPointY*1.441) + ' ' + // S600,2100 650,2300

  //Traveller Point
  'S' + Math.ceil((travellerX*1.044)) + ',' + Math.ceil(((travellerTop+travellerHeight)*0.811)) + ' ' + Math.ceil((travellerX*1.061)) + ',' + Math.ceil((travellerY*1.084)) + ' ' +

  //Where Point
  'S' + Math.ceil((whereX*0.916)) + ',' + Math.ceil((whereY*0.884)) + ' ' + whereX + ',' + Math.ceil((whereY*0.974)) + ' ' +

  //Where Point 2
  'S' + Math.ceil((whereX*0.833)) + ',' + Math.ceil((whereY*1.031)) + ' ' + Math.ceil((whereX*0.833)) + ',' + Math.ceil((whereY*1.105)) + ' ' +

  //Schedule Point
  'S' + Math.ceil((scheduleX*0.958)) + ',' + Math.ceil((scheduleY*0.911)) + ' ' + Math.ceil((scheduleX)) + ',' + Math.ceil((scheduleY*0.961)) + ' ' +


  //Schedule Point 2
  'S' + Math.ceil((scheduleX*0.833)) + ',' + Math.ceil((scheduleY*1.082)) + ' ' + Math.ceil((scheduleX*1.042)) + ',' + Math.ceil((scheduleY*1.058)) + ' ' +


  //Schedule Point 3
  'S' + Math.ceil((scheduleX*1.146)) + ',' + Math.ceil((scheduleY*1.082)) + ' ' + Math.ceil((scheduleX*1.25)) + ',' + Math.ceil((scheduleY*1.082)) + ' ' +

  //Schedule Point 4
  'S' + Math.ceil((scheduleX*1.3125)) + ',' + Math.ceil((scheduleY*1.052)) + ' ' + Math.ceil((scheduleX*1.406)) + ',' + Math.ceil((scheduleY*1.022)) + ' ' +

  //Sign-Up Point
  'S' + Math.ceil((scheduleX*1.604)) + ',' + Math.ceil((scheduleY*1.015)) + ' ' + signUpX + ',' + signUpY + ' ' +

  //Sign-Up Point 2
  'S' + Math.ceil((signUpX*0.863)) + ',' + Math.ceil((signUpY*1.0742)) + ' ' + Math.ceil(signUpX*0.796) + ',' + Math.ceil(signUpY*1.045) + ' ' +

  //Sign-Up Point 3
  'S' + Math.ceil((signUpX*0.677)) + ',' + Math.ceil((signUpY*1.036)) + ' ' + Math.ceil(signUpX*0.611) + ',' + Math.ceil(signUpY*1.042) + ' ' +

  //Boat Point
  'S' + Math.ceil((signUpX*0.4772)) + ',' + Math.ceil((signUpY*1.009)) + ' ' + Math.ceil(boatX*0.631) + ',' + Math.ceil(boatY*0.962) + ' ' +

  //Boat Point 2
  'S' + Math.ceil(boatX*0.694) + ',' + Math.ceil(boatY*1.017) + ' ' + Math.ceil(planeX*0.919) + ',' + Math.ceil(planeY*0.9307) + ' ' +

  // Plane Point
  'S' + Math.ceil((planeX*1.33)) + ',' + Math.ceil((planeY*0.926)) + ' ' + Math.ceil(planeX*1.088) + ',' + Math.ceil(planeY*0.995) + ' ' +

  // Plane Point 2
  'S' + Math.ceil((planeX*0.605)) + ',' + Math.ceil((planeY*1.042)) + ' ' + Math.ceil(planeX*0.484) + ',' + Math.ceil(planeY*1.0185) + ' ' +

  // Plane Point 3
  'S' + Math.ceil((planeX*0.241)) + ',' + Math.ceil((planeY*0.972)) + ' ' + 0 + ',' + Math.ceil(planeY*1.041) + ' ' +

  // Plane Point 4
  'S' + 0 + ',' + Math.ceil((planeY*1.065)) + ' ' + Math.ceil(planeX*0.121) + ',' + Math.ceil(planeY*1.111) + ' ' +

  // Plane Point 5
  'S' + Math.ceil(planeX*0.241) + ',' + Math.ceil((planeY*1.125)) + ' ' + Math.ceil(planeX*0.362) + ',' + Math.ceil(planeY*1.085) + ' ' +

  // Plane Point 6
  'S' + Math.ceil(planeX*0.459) + ',' + Math.ceil((planeY*1.087)) + ' ' + Math.ceil(planeX*0.58) + ',' + Math.ceil(planeY*1.101) + ' ' +


  // Plane Point 7
  'S' + Math.ceil(planeX*0.725) + ',' + Math.ceil((planeY*1.087)) + ' ' + Math.ceil(planeX*0.773) + ',' + Math.ceil(planeY*1.092) + ' ' +


  // Plane Point 8
  'S' + Math.ceil(planeX*0.773) + ',' + Math.ceil((planeY*1.106)) + ' ' + Math.ceil(planeX*0.846) + ',' + Math.ceil(planeY*1.129) + ' ' +

  // Form Point
  'S' + Math.ceil(formX*1.03125) + ',' + Math.ceil((formY*0.964)) + ' ' + Math.ceil(formX*1.041) + ',' + Math.ceil(formY*0.976) + ' ' +

  // Form Point 2
  'S' + Math.ceil(formX*0.958) + ',' + Math.ceil((formY*0.980)) + ' ' + formX + ',' + Math.ceil(formY*0.997) + ' ';

    dashPath.attr('d', pathCalc);
    journeyPath.attr('d', pathCalc);
 });

 //draw the line
 function drawLine(container, line){

   var pathLength = line.getTotalLength(),
       maxScrollTop = $(document).height() - $(window).height(),
       percentDone = $(window).scrollTop() / maxScrollTop,
       length = percentDone * pathLength;
   line.style.strokeDasharray = [ length ,pathLength].join(' ');
}

// init the line length
$(window).on('load', function(){
  drawLine($('#paths-svg'), document.querySelector('path#journey-line'));
});

$(window).scroll(function() {
  drawLine($('#paths-svg'), document.querySelector('path#journey-line'));
});

Строка должна быть заполнена в контактной форме внизу страницы (она отображается только на рабочем столе).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...