Есть вот такой сайт click, в хроме всё идеально, но когда загружаешь его с сафари, начинаеться тотальный ужас, фпс 1 в секунду и жестокие лаги. В чем может быть причина такого поведения?
Может что то не так с джсом, почему он так сильно грузит страницу?((((
$(window).on('load', function () {
$('.animate_now').hide();
$('#loader-wrapper').delay(2500).fadeOut('slow');
});
$(document).ready(function () {
function autoHeight(){
var windowHeight = $('#loader-wrapper').height();
var num = 5.3890608875129;
if($('#loader-wrapper').height() == 939){
num = 5.761448349307774;
console.log(121314555)
}
if($('#loader-wrapper').height() == 695){
num = 7.161151079136691;
console.log(121314)
}
var resizeHeight = Math.ceil(windowHeight * num );
return resizeHeight;
}
function autoScale(){
var windowHeightAn = $('#loader-wrapper').height();
var absoluteScale = Math.ceil(windowHeightAn / 0.4037);
if($(window).height())
return absoluteScale;
}
$('body').css({
'height' : '' + autoHeight() + 'px'
})
console.log(1)
$('.parallax').css({
'transform' : 'scale(.' + autoScale() + ')'
})
console.log(2)
function castParallax(heightForEl) {
var opThresh = 350;
var opFactor = 750;
window.addEventListener("scroll", function (event) {
var top = this.pageYOffset;
var layers = document.getElementsByClassName("parallax");
var layer, speed, yPos;
for (var i = 0; i < layers.length; i++) {
layer = layers[i];
speed = layer.getAttribute('data-speed');
var yPos = -(top * speed / 12.4);
$(layer).css({
'position': 'fixed',
'top': '0',
'left': '0',
'background-color': 'white',
'height': 'auto',
'-webkit-transform': 'scale(.' + heightForEl + ') translate3D( ' + Math.round(yPos) + 'px,0,0)',
'transform': 'scale(.' + heightForEl + ') translate3D( ' + Math.round(yPos) + 'px,0,0)',
'transform-origin': '0 0',
'width': '21653px'
});
}
});
}
document.body.onload = castParallax(autoScale());
$(window).on('load', function animNow(){
$('.animate_now').delay(3500).show(1000);
$('.transition_anim').css({
'transform': 'translate3D(0,0,0)',
'-webkit-transform': 'translate3d(0,0,0)',
'opacity':'1'
});
$('.str_1_d_1, .str_1_d_1_t').css({
'transform': 'translate3D(0,0,0)',
'-webkit-transform': 'translate3d(0,0,0)',
'opacity':'1'
});
$('.fade_top, .animate').css({
'transform': 'translate3D(0,0,0)',
'-webkit-transform': 'translate3d(0,0,0)',
'opacity':'1'
});
$('.fade_top_5_4, .fade_top_5_3, .fade_top_5_2, .fade_top_5_1, .fade_top_5_0, .animate_deL_0,.animate_deL_1,.animate_deL_2,.animate_deL_3,.animate_deL_4,.animate_deL_5').css({
'transform': 'scale(.25) translate3D(0,0,0)',
'-webkit-transform': 'scale(.25) translate3d(0,0,0)',
'opacity':'1'
});
});
$(window).on('scroll', function(){
var leftPos = $('#pg1Overlay').offset().left;
var leftOff = $('.offset_775').offset().left;
var leftOff_15 = $('.offset_1500').offset().left;
var leftOff_30 = $('.offset_2500').offset().left;
if(leftPos < leftOff - 1500){
$('.offset_775').css({
'transform': 'translate3D(0,0,0)',
'opacity':'1'
});
}
if(leftPos < leftOff_15 - 2500){
$('.offset_1500').css({
'transform': 'translate3D(0,0,0)',
'opacity':'1'
});
}
if(leftPos < leftOff_30 - 3500){
$('.offset_2500').css({
'transform': 'translate3D(0,0,0)',
'opacity':'1'
});
}
return false;
})
});
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости