Юрий Есин

Потому что в jQuery метод load() работает как обработчик загрузки лишь если вызван у $(window), для других элементов он пытается подгрузить содержимое аяксом. Читайте документацию.

$("#elements > .test:nth-child(2)").click();
или

$("#elements > .test").each(function (i, e) {
  if (i == 1) {
    $(e).click();
  }
});

или

var tests = $("#elements > .test");

for (var i = 0; i < tests.length; i++) {
  if (i == 1) {
    $(tests[i]).click();
    break;
  }
});

Если файл лежит на сервере, то понятное дело что его придется как-то грузить в клиент. Как - зависит от вашего выбора, фантазии и задачи, способов множество. Если файл планируется читать и парсить локально, то в JS есть FileReader, это можно сделать с помощью него.

$(document).on('click', '.photo__link', function() {
    var photoId = $(this).data('id');
    callAjaxModal(photoId);
  });

Там страница разбита на несколько блоков. У самого первого стоит обычный эффект параллакса, происходит смещение фона с более низкой скоростью, чем у самого скролла. В сети есть более 35 готовых реализаций на любой вкус и цвет. Во втором блоке просто идёт активация по триггеру, как только позиция скролла достигает позиции блока, проявляется верхний элемент с надписью, такое тоже не сложно реализовать, в сети есть куча примеров на том же jQuery. У остальных двух блоков эффектов при скроллинге я не заметил.

$(document).on("submit", "#your_form", function (e) {
    var id = $("#your_form input[name='id']").val() >> 0;
    var login = $("#your_form input[name='login']").val();
    var request = {};

    if (id > 0) {
        request["id"] = id;
    }

    if (login) {
        request["login"] = login;
    }

    $.post("/handler.php", request).done(function (response) {
        if (response) {
             alert(response);
             return;
        }

        window.location.href = "/new/address/";
    });

    return false;
});

if (!isset($_POST["id"]) || !isset($_POST["login"])) {
    echo "ID и логин обязательны для заполнения";
    exit;
}

// Обработать $_POST["id"] и $_POST["login"], предусмотреть валидацию и экранирование спецсимволов

exit;

Используйте метод $.ajax лишь в случае, если вам важна тонкая настройка взаимодействия с сервером или, например, для добавления файлов в форму после их превалидации на клиенте. Для всех остальных случаев методов $.post и $.get более чем достаточно.

В данном примере я вешаю на событие onsubmit обработчик через $(document).on(), для того, чтобы событие отработало даже если форма была добавлена в DOM уже после загрузки документа. Затем я получаю два поля формы, первый привожу к int с помощью >> 0 (это самый простой и самый производительный способ привести переменную к типу int в JavaScript), а второе поле у меня string. Далее я формирую параметры запроса к серверному обработчику (скрипт /handler.php), предварительно проверив данные на присутствие в форме и корректность int (по моим условиям, он должен быть unsigned), после чего я отправляю данные на обработчик и жду ответа, ответ я получаю в коллбэке done(response), где обрабатываю его. Если ответ пришел - значит ошибка и вывожу в алерте на экран, иначе все валидно и делаю редирект на другой адрес. В конце обработчика формы я прописал return false, если этого не сделать, то форма автоматически перейдет по адресу, указанному в атрибуте action, что нарушит задуманную логику и браузер даже не успеет вывести алерт в случае ошибки.

С серверным скриптом обработки думаю все и так ясно и объяснять не стоит.

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

Аналогов я так и не нашел, вот решение, которое написал за вчера сам:

var blackCoeff = 1.25;	// Коэффициент затемнения

var sectionList;
var blackList;
var counter;

function buildStyles() {
	var styles = 'body {' +
					'height: ' + ($("body").height() + 'px;') +
					'position: relative;' +
				 '}' +
				 
				 '.black {' +
					'position: absolute;' +
					'top: 0;' +
					'left: 0;' +
					'background: black;' +
					'opacity: 0.8;' +
				 '}' +
					
				 'section {' +
					'position: relative;' +
					'top: 0;' +
				 '}' +
				 
				 'section.fixed {' +
					'position: fixed;' +
					'top: 0;' +
				 '}';

	$('head').append('<style id="sticky-stack-styles" type="text/css">' + styles + '</style>');
}

$(window).on('scroll', function() {
	var windowScrollPos = $(window).scrollTop();
	var tmpCounter = counter;
	
	counter = 0;
	
	for (var i = 0; i < sectionList.length; i++) {
		if (windowScrollPos >= $(sectionList[i]).offset().top) {
			counter++;
		}
	}
	
	if (counter > 1) {
		$(blackList[counter - 2]).css("opacity", (windowScrollPos / $(sectionList[counter < sectionList.length ? counter : counter - 1]).offset().top - 1) * (-counter * blackCoeff));
	}
	
	if (counter != tmpCounter) {
		for (var i = 0; i < sectionList.length; i++) {
			$(sectionList[i]).removeClass("fixed");
		}
		
		if ((tmpCounter == 2 && counter <= 1)) {
			return;
		}
		
		$(sectionList[counter - 1]).addClass("fixed");
	}
});

$(function () {
	$("footer").append("<section/>");
	
	sectionList = $("section");
	
	for (var i = 0; i < sectionList.length; i++) {
		var zIndex = (sectionList.length - i) * 2;
		$(sectionList[i]).css("z-index", zIndex);
		
		if (i == 0) {
			continue;
		}
		
		$(sectionList[i]).prepend('<div class="black" style="width: ' + $(sectionList[i]).width() + 'px; height: ' + $(sectionList[i]).height() + 'px; z-index: ' + (zIndex + 1) + '"></div>');
	}
	
	blackList = $(".black");
	
	buildStyles();
});

Полностью соответствует требованиям задачи ТЗ заказчика, не затрагивает структуру оригинальной верстки и стили, генерит что ему надо на лету, подключается в одну строку.

CSS:

body {
    min-height: 100vh;
}

.modal {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    z-index: 1;
    display: none;
}

HTML:

<body>
    <div class="modal">PopUp!</div>
</body>

JavaScript:

function setCookie(name, value, expY, expM, expD, path, domain, secure) {
    var cookieString = name + "=" + escape(value);
 
    if (expY) {
        var expires = new Date(expY, expM, expD);
        cookieString += "; expires=" + expires.toGMTString();
    }
 
    if (path) {
        cookieString += "; path=" + escape(path);
    }

    if (domain) {
        cookieString += "; domain=" + escape(domain);
    }

    if (secure) {
        cookieString += "; secure";
    }

    document.cookie = cookieString;
}

function getCookie(cookieName) {
    var results = document.cookie.match('(^|;) ?' + cookieName + '=([^;]*)(;|$)');
 
    if (results) {
        return (unescape(results[2]));
    }
        
    return null;
}

$(function () {
    if (getCookie("is_shown_modal") != "1") {
        $(".modal").fadeIn(500, function () {
            setCookie("is_shown_modal", "1");
        });
    }
});

Если я правильно тебя понял, ты пытаешься добиться эффекта т.н. "Parallax"? Есть готовые библиотеки JS, так же можно сделать на CSS3, оптимизация во втором случае будет заметно лучше, особенно на больших изображениях.

50+ Best jQuery Parallax Plugin
Параллакс на чистом CSS