Максим

Одна картинка поверх другой. У верхней меняем прозрачность при наведении 0-1

Лучший: использовать SVG

А если менять PNG, то спрайты.

Начинаете сверху самыми крупными элементами (сверстайте просто дивы):


Затем переходите на один уровень "глубже":

-


А затем все "глубже" и "глубже":

Их разрабатывают компании, которые в далеком прошлом создали процессы гораздо более простые, затем в течение 30 лет понемногу совершенствовали.
Я лично сомневаюсь, что в интеле или АМД есть хотя бы один человек, который разбирается в спецификации ВСЕЙ схемы процессора.

Также, как и любой сложный проект, например нет человека, который бы разбирался во всем исходном коде офиса или фотошопа - есть люди, которые много лет работали над какой-то частью.

Можно еще так:
calc(100vh - высота хедера)

Генерируем скриптом 150 элементов, вспоминаем формулы окружности из курса школы, рассчитываем и располагаем точки в нужных местах.
Доп.инфо реализовать так же просто. Взять плагин для toolpit'ов, и навесить его на каждый элемент.

UPD https://codepen.io/delphinpro/pen/NaQjdm

Накидал для примера
https://jsfiddle.net/yarkov_aleksei/0tom7mkz/

Допустимо, конечно.

float: right;
OR

display: flex;
justify-content: flex-end;

Цэж waterwheelCarousel ! Две настройки и галерея один в один!
Вот например skyprom.ru

window - глобальный объект браузера, window имеет свойство document, который так же проксируется в глобаль (window.document === document), document включает html, в котором, в свою очередь, находится body.
А в рамках этого вопроса - нет, фактически отличий в работе 3 вариантов нет

в JavaScript'е нужно писать не просто else, а else if:

var box = $('.page').height(); 

  $(window).on("scroll", function() {

    var scroll = $(window).scrollTop();

      if(scroll > box){
       console.log("1"); 
       }
      else if(scroll < box){
        console.log("2"); 
        }

  });