Блог

Я использую этот JS и CSS для добавления эффекта масштабирования к изображению заголовка. Он отлично работает на рабочем столе.

Проблема в том, что изображение мобильного героя не «заполняет» весь контейнер.

Поэтому мне нужно было бы иметь 2 разных JS с 2 разными настройками%, чтобы он работал как на рабочем столе, так и на мобильном устройстве.

Есть ли решение для создания одного скрипта с учетом моих 2 разных потребностей, которые вы найдете ниже, в зависимости от размера экрана? «эта функция предназначена для настольных компьютеров, а эта функция — для мобильных устройств»?

Для тех, кто знает, что я использую функцию элементов GeneratePress для отображения заголовка всего сайта.

Вот JS CSS, работающий для рабочего стола :

JS

 <script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100 '%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>
 

CSS

 .page-hero {
     transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important;
    opacity: 0; background-size: 150% auto;
}
 

Вот JS CSS, которые мне нужно было бы добавить для мобильных устройств :

JS

 <script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 200 '%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>
 

CSS

 .page-hero {
     transition: background-size 1s cubic-bezier(0.1, 0.135, 0.15, 0.86), opacity 1s ease-out 0.1s !important;
    opacity: 0; background-size: 300% auto;
}
 

Спасибо за вашу помощь!

Вы вызываете функцию при html/body загрузке документа.

 <script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100 '%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation();
</script>
 

Измените его на это:

 <script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100 '%';
        pagehero.style.opacity = '1';
}
    
    document.onload = hero_animation;
</script>
 

Или это:

 <script>
var pagehero = document.querySelector('.page-hero');

function hero_animation(){
        pagehero.style.backgroundSize = 100 '%';
        pagehero.style.opacity = '1';
}
    
    document.onload = function() { hero_animation() };
</script>
 

Во-вторых, вы должны перейти 100/200 на строку. JavaScript чувствителен к регистру:

 pagehero.style.backgroundSize = '100'   '%';
 

Или

 pagehero.style.backgroundSize = (Number(100).toString())   '%';