Всем привет!
Нашёл в интернете интересный на мой взгляд элемент для сайта — область с логотипом «Firewatch», хочу сделать нечто подобное:
Видно что за дело брался специалист, но если присмотреться, там не больше
Как потом соединить и запустить этот механизм воедино на сайте?
Кто сталкивался с подобными задачами подскажите пожалуйста, какими инструментами этого можно добиться?
Спасибо за внимание, надеюсь найти тут правильное направление:)
Вот туториал 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:)
У меня пока что идет самостоятельное освоение базовых знаний по выбранному направлению, оказывается надо лучше разбираться во Фронт-энде, тогда самому станет ясно какие скиллы более значимы.
Очень даже крутой скилл, вот я не умею например.
Десять много, визуально достаточно трёх. Остальное от лукавого.
Чого всі так причепилися до цього паралаксу?
Мене взагалі дратує, коли замість очікуваного руху сторінки вниз, якісь її частини рухаються в гору чи в сторони...
Майже завжди закриваю сайти після виявлення паралакс ефектів.
Ну камон, реверс-инжиниринг в вебе — это ж просто. А тут даже неминифицированный джс.
Кстати, судя по стилю писал какой-то дотнетчик, который к тому же не очень хорошо умеет в джейквери.
Дмитрий Белов
Oleksandr
Данил Жерновой
Gennady Dogaev
Yarobrazzer
Mike Gorchak
Gennady Dogaev
Олексій Пєніє
Кіт Муркіт
Олексій Пєніє
Oleksandr Tkalenko
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
Евгений, спасибо за совет. Правда чувствую что надо выучить немного теории, чтобы делать это элементарно.
And riy
21 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів