Exomode
@Exomode
Архитектор ПО

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

Здравствуйте, коллеги! Встречал ли кто-то из вас плагин для прокрутки страницы, максимально похожий по принципу работы вот на этот - works.yalantis.com/bobber/7 ? Нашел несколько аналогов на jQuery, но они вообще не подходят для решения этого эффекта. Если кто-то поделится ссылкой именно на тот плагин, что задействован на сайте-примере - буду безмерно благодарен, т.к. самостоятельно вытянуть его с сайта таким образом, чтобы привязать его к моей вёрстке, не удалось.
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
Exomode
@Exomode Автор вопроса
Архитектор ПО
Аналогов я так и не нашел, вот решение, которое написал за вчера сам:
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();
});


Полностью соответствует требованиям задачи ТЗ заказчика, не затрагивает структуру оригинальной верстки и стили, генерит что ему надо на лету, подключается в одну строку.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar Куратор тега jQuery
Учим yii: https://youtu.be/-WRMlGHLgRg
уверен, что это самопис, судя по коду:
Вот пример как это сделать:
https://habrahabr.ru/post/142137/
вот много вариантов:
https://yandex.ru/search/?text=parallax%20jquery%2...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы