Я создал анимацию на веб-сайте для клиента.Мне было интересно, почему на некоторых экранах (как правило, меньше) код не завершен.Большое спасибо.
Это сайт (для перенаправления на реальный сайт потребуется секунда ... Я не хочу, чтобы это показывалось в их 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'));
});
Строка должна быть заполнена в контактной форме внизу страницы (она отображается только на рабочем столе).