420873535

https://codepen.io/topicstarter/pen/BGPEQK так вроде бы

По пунктам:
1. Используйте современные форматы изображений - гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
2. Настройте эффективную кодировку изображений - значит что изображения слишком много весят
4. И самое главное, что влияет на все предыдущие пункты - некорректное соотношение размера отображаемого изображения - его визуальному размеру. К примеру - у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?

<article>
  <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
               https://dummyimage.com/1280x400/333/fff 1x"
       sizes="(min-width: 1280px) 1280px, 100vw"
       alt="A title">
</article>

По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. PageSpeedInsights эмулирует отображение на аналогичном смартфоне.
Для более гибкого подхода в html5 появился элемент picture. Подробнее посмотреть советую у Вадима Макеева в этом же видео подробно разбирается оптимизация графики для сайта.
На примере вашего кода можно сделать набросок

<picture>
    <!-- source для браузеров поддерживающих webp, соответственно srcset тоже должен указывать на webp-->
    <source type="image/webp" srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
     <!-- source для браузеров не поддерживающих webp -->
     <source srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
    ...  <!-- все остальные необходимые размеры, вроде планшетов и т.д. -->
    <!-- fallback для браузеров не поддерживающих элемент picture -->
    <img src="https://dummyimage.com/2560x400/333/fff" alt="A title">
</picture

background-size: cover - картинка тянется так, чтобы покрыть весь блок. Лишнее обрезается.
background-size: contain - картинка тянется так, чтобы целиком уместиться в блок. Могут быть свободные участки по краям.

Этот эффект - scroll parallax.
Размещаете элементы абсолютом и двигаете их с помощью js onScroll через translate3D.
Либо есть готовые библиотеки, например - https://tgomilar.github.io/paroller.js/

Предложу свой вариант (для точности переключения нужно поиграть со значениями top и bottom)
jsfiddle.net/bonilka/p7sgwg4L

второй варик

6-угольную svg-шку бэкграундом вставить в прямоугольный блок - самое логичное решение

CSS calc

Делайте img, кидайте его в div с position: relative, и этот div будет иметь такие же размеры, как и картинка в нем. Маркер тоже кидайте в этот div, и задавайте left, top в процентах, они будут относительный размера блока (который такого же размера как картинка).
Пример

Делайте по такому принципу.

Вот вариант без сторонних библиотек. Для просмотра демки перейдите во вкладку [Result] и покрутите на нем колесико мышки вверх и вниз.

Выбирайте то, к чему душа больше лежит. IT Ops останутся навсегда, какие бы облака там не парили над нами. Всё равно полно организаций, которые не доверяют потусторонним конторам хранение своих данных и обслуживание своей IT-инфраструктуры (и правильно делают). Особенно в свете развития законов и методик оповещения об утечках и т. п.

IT Ops, на мой взгляд, поинтереснее (сам такой потому что), так как задачи разнообразнее. Но в DevOps, например, денег больше платят. Хотя в IT Ops сейчас тоже много из DevOps наприлетало -- Infrastructure as a Code, ansible/chef/puppet, хранение конфигов/плейбуков в VCS, вот это вот всё. И это действительно приводит к тому, что нужно меньше людей, чтобы управлять существенно бОльшими по размеру инфраструктурами. Но и квалификация этих людей тоже должна быть выше, и программерский бэкграунд какой-то тоже нужен. Потому что даже в IT Ops очень много автоматизации, которую нужно писать руками на Shell, Powershell, Python, смотря где как принято.

Отдельный денежный сегмент -- это DBA. Oracle, PostgreSQL, MariaDB -- прокачанных DBA мало, и стоят они дорого. С другой стороны, рынок, где требуются DBA -- довольно узок. И чтобы не было проблем с поиском работы -- квалификация должна быть высокой.

Есть ещё NetOps, т. е. сетевые инженеры. Но там сейчас грустно -- несмотря на то, что для работ в операторских сетях, например, нужна нефиговая такая квалификация и знание особенностей кучи вендорского железа (редко кто строит гомогенные в смысла вендора сетевого железа сети, в основном сборная солянка - -Cisco/Juniper/Mikrotik/Dlink/Huawei), но зарплаты там (по Москве) -- 90-100 тысяч. При этом практикуются ночные/выходные дежурства и всё такое. Можно найти прекрасные места, где сетевой инженер будет зарабатывать бОльшую сумму, но в целом -- как-то так.

Если резюмировать -- в IT Ops ниже порог вхождения в целом. Т. е. можно найти работу, где не требуется серьёзная квалификация, но и денег будет соответственно.

DevOps -- порог вхождения выше, т. к. DevOps подразумевает выполнение вполне конкретного набора задач, и для их выполнения уже вряд ли возьмут человека с улицы, надеясь, что он "по ходу разберётся" (а вот в IT Ops или даже NetOps в мелких и средних конторах ещё может прокатывать). Квалификация требуется выше, но и денег больше.

DBA -- всё ещё сложнее, чем с DevOps. Рынок узкий, квалификация нужна высокая, но зарплаты тоже высоки, повыше DevOps, по моим наблюдениям.

В чистый NetOps сейчас уходить... Ну такоэ... Есть крупные конторы, где этим можно нормально зарабатывать, но всё равно, квалификация требуется высокая, а денег относительно требуемого объёма знаний платят не так уж много. Вот IT Ops + NetOps -- это да, тут можно найти хорошую работу. Но для этого книжек придётся прочитать в полтора раза больше, чем отдельно IT Ops и в два раза больше -- чем отдельно NetOps :-)

Собственно в чем проблема?
Вы же сделали как-то, чтобы при прокрутке вниз панель навигации меняла цвет с прозрачного на белый? Сделайте точно так же и с этим текстом. При прокрутке добавьте ему display: none, например.

Вот Ваш код для панели навигации:

//Эффект топ лайн при прокрутке 
    $(window).on("scroll touchmove", function () {
    $('.top_line').toggleClass('scroll_top', $(document).scrollTop() > 0);
    });

Добавьте сюда вот эту строчку:

$(".logo_descr").toggleClass("descr_none", $(document).scrollTop() > 0);

И создайте новый класс:

.descr_none{
    display: none;
}

Если Вы это писали сами - тогда странно, что задаёте такой вопрос.

setTimeout(function(){
  $('button').trigger('click');
}, 1000);

Думаю через stopPropagation:

$('#child').on('event', function(event){
 event.stopPropagation(); // запрещает дальнейщую передачу события
// обработка события
});

<div id="map" class="black-and-white"></div>

.black-and-white {
  filter: grayscale(100%);
}

document.querySelector('#map').addEventListener('click', function() {
  this.classList.remove('black-and-white');
}, { once: true });

jsfiddle.net/0uays3d7