Находил ли кто подобный плагин?

Question

[Юрий Есин]

Здравствуйте, коллеги! Встречал ли кто-то из вас плагин для прокрутки страницы, максимально похожий по принципу работы вот на этот - works.yalantis.com/bobber/7 ? Нашел несколько аналогов на jQuery, но они вообще не подходят для решения этого эффекта. Если кто-то поделится ссылкой именно на тот плагин, что задействован на сайте-примере - буду безмерно благодарен, т.к. самостоятельно вытянуть его с сайта таким образом, чтобы привязать его к моей вёрстке, не удалось.

Answer 1

[Юрий Есин]

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

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();
});

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

Answer 2

[Максим Тимофеев]

уверен, что это самопис, судя по коду:
Вот пример как это сделать:
https://habrahabr.ru/post/142137/
вот много вариантов:
https://yandex.ru/search/?text=parallax%20jquery%2...

Comments

[Юрий Есин]

Максим, спасибо, но это не параллакс) здесь нижний блок фиксируется до тех пор, пока мы не пролистаем до конца предыдущий блок + плавно исчезает затемнение

[Максим Тимофеев]

Юрий Есин: И чем это не паралакс?

[Юрий Есин]

Максим Тимофеев: прежде всего тем, что принципом работы эффект не подходит под само определение "параллакса". Вообще касательно вэба параллакс - это громко сказано, истинный параллакс можно пронаблюдать в шейдерных технологиях видеокарт, например, Parallax Mapping, где идёт смещение вершин с учётом bamp'а, давая тем самым эффект неровностей на материалах (борозды между кирпичами на стенах, шероховатости бетона, ржавчина на металле, шероховатость древесины и т.д.). На сайтах же это - просто смещение блоков друг под другом с разной скоростью скроллинга. В моей задаче смещения вообще нет, блок жестко фиксируется до тех пор, пока верхний блок не будет пролистан до самого конца, затем алгоритм повторяется до тех пор, пока не закончатся блоки в наборе.

[Максим Тимофеев]

Юрий Есин: в web это всегда называют паралаксом и различают несколько его типов 1stwebdesigner.com/parallax-scrolling-tutorial