trushka

Вроде бывают мониторы, подключаемые по usb, к тому же, со встроенным usb-хабом, и даже с разъёмом под наушники и кардридерами. То есть, фактически являющиеся докстанциями)). Вот, например

Все современные браузеры используют событие wheel, а не mousewheel. Я тут недавно делал, вроде с поддержкой даже старых ИЕ и вебкитов (хотя ff 3.5, кажется, ещё так не умел)

$.event.fixHooks.mousewheel=$.event.fixHooks.wheel={
    filter:function(e, oe){
        e.deltaY=oe.deltaY||-oe.wheelDeltaY;
        if (e.deltaY===undefined) e.deltaY=-oe.wheelDelta||0;
        e.deltaX=oe.deltaX||-oe.wheelDeltaX||0;
        e.deltaZ=oe.deltaZ||0;
        e.deltaMode=oe.deltaMode||0;
        e.toPx=function(el){
            if (e.deltaMode===1) {e.deltaY*=40; e.deltaX*=40; e.deltaZ*=40};
            if (e.deltaMode==2) {
                e.deltaY*=$(el||this).innerHeight();
                e.deltaX*=$(el||this).innerWidth();
            };
        }
        return e
    }
};

if (!window.WheelEvent) $.extend($.event.special, {
    wheel: {delegateType: 'mousewheel', bindType: 'mousewheel'},
    //mousewheel: {preDispatch: function(e) {e.type='wheel'}}
});

Почему закомментировано - не помню, может, мне где-то было важно, чтоб не подменяло тип события.. Вообще, подзабыл немного, как оно там в jQuery всё работает, то что я понаписывал.. Но работает) В общем, событие wheel(), направление и величина - event.deltaY. Если надо в пикселах (а браузеры по-разному дельты выдают, причём фф, кажется, вообще выдаёт при реальном колёсике величину в строках, а при жесте на тачпаде - в пикселах) - в начале обработчика выполнить метод event.toPx(), который может принимать в качестве аргумента элемент, размеры которого используются, если прокрутка установлена в "страницах". по умолчанию - this. Кстати, в данном случае и deltaX не помешает проверить - может сработать, если скроллить жестом на тачпаде в стороны

$('.slide').wheel(function(event) {			
  event.preventDefault();
  event.toPx();
          
  if (event.deltaX>30 || event.deltaY > 30) {
    $this.getPrev();
  } else if (event.deltaX<-30 || event.deltaY < -30) {
    $this.getNext();
  }
});

upd: Кстати, у меня в фф на вашем сайте всё прекрасно работает, но, опять же, на горизонтальную прокрутку тачпадом тоже как-то реагировать хорошо бы. И сильно быстро. Щас переписал немного условия, ато при скролле тачпадом в фф по 10 фоток перематывает при малейшем движении. Надо будет подобрать потом величину порога прокрутки (30px)

Возможно, там что-то подгоняется скриптом, срабатывающим по событию ready(), но оно может сработать до того, как загрузятся и применятся все css файлы. Или картинки, которые могут что-то "раздвинуть" после того, как загрузятся.

По-моему, всё прекрасно сформулировано, а указав конкретную технологию, вы можете упустить исполнителя, который сделает на другой технологии дешевле. Функционал, как на первой ссылке, с помощью банального html можно сделать (вторая битая похоже, 404 выдаёт)

#fourth-page:before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: calc(50% - 40px);
    border-left: 50px solid *розовый*;
    border-right: 50px solid *розовый*;
    border-top: 35px solid transparent;
    background: *тот же, что у верхней полоски, подогнать  позицию*
}

Может, вообще на обычном html сделать, по принципу из предыдущего ответа? Чтоб не утяжелять, при недостаточном зуме скрывать более мелкие элементы с помощью display:none, а показывать только в пределах вьюпорта.

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

div:before {width:0; float:left; visibility:hidden; content:'1 2 3 4 5'/*5 символов (для верности через пробел)*/}
div:after {clear:both; display:block; content:''}

может, так?

function d1(f) {
    $('#d1').slideUp(1000).slideDown(1000, f);
}   
         
function d2(f) {
    setTimeout(function(){
        $('#d2').hide(1000).show(1000, f);
    },2000);
}   
function d3(f) {
    $('#d3').fadeOut(1000).fadeIn(1000, f);
}  
  
var arf=[d1, d2, d3];  
    
for(var i = 0; i<arf.length; i++) { 
    arf[i](arf[i+1])
    // .....
}

Так надо и две камеры сделать, изначально с одинаковыми координатами, потом для каждой инициализировать свой OrbitControl, потом для того, который управляет 2-й камерой задать noZoom=true, а потом рендерить каждую сцену со своей камерой
типа:

control1= new THREE.OrbitControls( camera1 );
control2 = new THREE.OrbitControls( camera2);
control2.noZoom=true;
....................................
updateWorld: function(){

       control1.update();  control2.update(); // обновляем контроллеры камер(OrbitControls.js)

        this.renderer.clear();
        this.renderer.render(this.sceneObject, this.camera1); // рендерим сцену с объектами
        this.renderer.clear(false, true, false); 
        this.renderer.render(this.sceneGizmo, this.camera2);  // рендерим сцену с Gizmo
    }

По идее, должно работать)))