Как сделать такой параллакс для сайта?

Всем привет!
Нашёл в интернете интересный на мой взгляд элемент для сайта — область с логотипом «Firewatch», хочу сделать нечто подобное:

www.firewatchgame.com

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

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Вот туториал active-vision.ru/...​blog/parallaks-skrolling как сделать именно такой параллакс эффект как на сайте firewatchgame

А как насчет такого? www.flatvsrealism.com
Не такой сложный конечно, но что бы анимация продвигалась от прокрутки

Вообще идея не плохая, только есть небольшой минус — долго грузится и палец устает скроллить вниз:) Хотя если делать меньше графических элементов, будет быстрее.

За вас даже eject-нули код на codepen недавно:
codepen.io/StephenKoller/pen/LWBLNW
Теорию как через CSS делать можете почитать тут:
developers.google.com/…​12/performant-parallaxing
keithclark.co.uk/…​re-css-parallax-websites
А на JS делается через translate и теория тут больше о том, как сделать плавно. Через debounce на scroll, вынесения на отдельные слои, рендер и все такое.

Антон, спасибо! Не ожидал исходный код увидеть.

Нашёл похожий эффект, только без JS:
codepen.io/samdbeckham/pen/OPXPNp
Довольно плавный получается

Очень плавно, не обращал раньше внимания на такие нюансы. Я в восторге.

Есть варианты:
1) Покопаться в исходниках и попытаться понять как оно сделано
2) Погуглить как делаются такие эффекты (впрочем, у firewatch вряд ли готовое решение)

Нужно HTML, CSS и скорей всего не обойтись без JavaScript. Но сразу скажу — это сложная задача. Делаешь в Chrome — не работает в Edge. Добиваешься чтобы работало в Chrome и Edge — перестает работать в Firefox. Анимация для очень стойких духом из-за этой всей фигни.

Этот вопрос можно задать на Stack Overflow, тем более та появился русский язык. Думаю там и так уже не один десяток подобных вопросов и подробных ответов на них. Ну и гугл выдает много уроков и примеров.

Согласен, Александр, полезный сайт, буду разбираться.
Рад что и на DOU можно получить поддержку, т.к. не понимал в какую сторону двигаться, зато теперь стало ясно, что предстоит изучение JS.

Спасибо Всем за помощь!
Очень интересный материал, после изучения надеюсь так же уверенно разбираться в этом.

Скоро появится новый скилл в резюме: умею parallax scroll! %)

Теперь понимаю о чем Вы, Mike:)
У меня пока что идет самостоятельное освоение базовых знаний по выбранному направлению, оказывается надо лучше разбираться во Фронт-энде, тогда самому станет ясно какие скиллы более значимы.

Очень даже крутой скилл, вот я не умею например.

Десять много, визуально достаточно трёх. Остальное от лукавого.

Чого всі так причепилися до цього паралаксу?
Мене взагалі дратує, коли замість очікуваного руху сторінки вниз, якісь її частини рухаються в гору чи в сторони...
Майже завжди закриваю сайти після виявлення паралакс ефектів.

Ну камон, реверс-инжиниринг в вебе — это ж просто. А тут даже неминифицированный джс.

Кстати, судя по стилю писал какой-то дотнетчик, который к тому же не очень хорошо умеет в джейквери.

function castParallax() {

	var opThresh = 350;
	var opFactor = 750;

/*
	$(window).scroll(function(){
		var windowScroll = $(window).scrollTop();
		
		$('.keyart_layer.parallax').each(function(){
			var $layer = $(this);
			var yPos = -(windowScroll * $layer.data('speed') / 100);
			$layer.css({
				"transform" : "translate3d(0px, " + yPos + "px, 0px)"
			});

		});


		var backgroundOpacity = (windowScroll > opThresh ? (windowScroll - opThresh) / opFactor : 0);
		$('#keyart-scrim').css('opacity', backgroundOpacity);
	});

*/
	window.addEventListener("scroll", function(event){

		var top = this.pageYOffset;

		var layers = document.getElementsByClassName("parallax");
		var layer, speed, yPos;
		for (var i = 0; i < layers.length; i++) {
			layer = layers[i];
			speed = layer.getAttribute('data-speed');
			var yPos = -(top * speed / 100);
			layer.setAttribute('style', 'transform: translate3d(0px, ' + yPos + 'px, 0px)');

		}
	});


}

function dispelParallax() {
	$("#nonparallax").css('display','block');
	$("#parallax").css('display','none');
}

function castSmoothScroll() {
	$.srSmoothscroll({
		step: 80,
		speed: 300,
		ease: 'linear'
	});
}



function startSite() {

	var platform = navigator.platform.toLowerCase();
	var userAgent = navigator.userAgent.toLowerCase();

	if ( platform.indexOf('ipad') != -1  ||  platform.indexOf('iphone') != -1 ) 
	{
		dispelParallax();
	}
	
	else if (platform.indexOf('win32') != -1 || platform.indexOf('linux') != -1)
	{
		castParallax();					
		if ($.browser.webkit)
		{
			castSmoothScroll();
		}
	}
	
	else
	{
		castParallax();
	}

}

document.body.onload = startSite();

...
<div class="keyart" id="parallax">
	<div class="keyart_layer parallax" id="keyart-0" data-speed="2" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 00.0 -->
	<div class="keyart_layer parallax" id="keyart-1" data-speed="5" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 12.5 -->
	<div class="keyart_layer parallax" id="keyart-2" data-speed="11" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 25.0 -->
	<div class="keyart_layer parallax" id="keyart-3" data-speed="16" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 37.5 -->
	<div class="keyart_layer parallax" id="keyart-4" data-speed="26" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 50.0 -->
	<div class="keyart_layer parallax" id="keyart-5" data-speed="36" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 62.5 -->
	<div class="keyart_layer parallax" id="keyart-6" data-speed="49" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 75.0 -->
	<div class="keyart_layer" id="keyart-scrim"></div>
	<div class="keyart_layer parallax" id="keyart-7" data-speed="69" style="transform: translate3d(0px, 0px, 0px)"></div>
	<!-- 87.5 -->
	<div class="keyart_layer" id="keyart-8" data-speed="100"></div>
	<!-- 100. -->
</div>

Элементарно — берете 10 слоев (или сколько их там), вешаете лисенер на скрол и сдвигаете каждый слой на основании какого коэффициента. Чем «дальше» слой, тем медленнее он должен двигаться.

Вот пример из гугла:
codepen.io/zabielski/pen/MyoBaY
medium.com/…​s-javascript-2b56883c3f27

Евгений, спасибо за совет. Правда чувствую что надо выучить немного теории, чтобы делать это элементарно.

Підписатись на коментарі