Некоторое время назад я задавал вопросы по горизонтальной прокрутке контента, тут: Горизонтальная прокрутка работает колесиком мышки. Как сделать аналог свайпом?
И тут: Как сделать кнопки для прокрутки контента?
Конкурсные вопросы были, потому что ответа не было.
В результате на те вопросы, мне наставили минусов, и свалили мой аккаунт в блокировку на неделю.
Но! В итоге решение есть. Сейчас оно выглядит так (все ещё черновое):
function setAmountOfPages(amountOfPages) {
$(".page-number > .page-amount").html(amountOfPages);
}
function setCurrentPageNumber(currentPageNumber) {
$(".page-number > .page-current").html(currentPageNumber);
}
function horizontalScroll(e) {
isHorizontal = true;
var that = this;
that.elementWidth = that.elementWidth || getColumnWidth(that);
var scrollDirection = e.wheelDeltaY ? 0 - e.wheelDeltaY : e.detail,
actualColumn = Math.round(that.scrollLeft / that.elementWidth),
targetColumn = scrollDirection > 0 ? actualColumn + 1 : actualColumn - 1;
if (scrollElementToColumn(that, targetColumn)) {
e.preventDefault();
setCurrentPageNumber(targetColumn + 1);
} else {
isHorizontal = false;
}
}
function horizontalClick(that, to) {
isHorizontal = true;
that.elementWidth = that.elementWidth || getColumnWidth(that);
var actualColumn = Math.round(that.scrollLeft / that.elementWidth),
targetColumn = actualColumn + to;
if (!scrollElementToColumn(that, targetColumn)) {
isHorizontal = false;
} else {
setCurrentPageNumber(targetColumn + 1);
}
}
function getColumnWidth(that) {
var style = window.getComputedStyle(that, null);
var columnWidth = parseFloat(
style.columnWidth || style.MozColumnWidth || style.webkitColumnWidth
);
var columnGap = parseFloat(
style.columnGap || style.MozColumnGap || style.webkitColumnGap
);
return columnWidth + columnGap;
}
function scrollElementToColumn(that, columnIndex) {
that.elementWidth = that.elementWidth || getColumnWidth(that);
var expectedPlaceToScroll = Math.round(columnIndex * that.elementWidth),
distanceToScroll = Math.abs(that.scrollLeft - expectedPlaceToScroll),
defaultScrollShift = 30,
savedScrollLeft = that.scrollLeft,
scrollShift =
defaultScrollShift < distanceToScroll
? defaultScrollShift
: distanceToScroll;
if (that.scrollLeft < expectedPlaceToScroll) {
that.scrollLeft = that.scrollLeft + scrollShift;
} else if (that.scrollLeft > expectedPlaceToScroll) {
that.scrollLeft = that.scrollLeft - scrollShift;
}
if (
that.scrollLeft !== expectedPlaceToScroll &&
savedScrollLeft !== that.scrollLeft
) {
that.actuallyMoving = setTimeout(function() {
scrollElementToColumn(that, columnIndex);
}, 10);
return true;
}
if (that.actuallyMoving) clearTimeout(that.actuallyMoving);
return false;
}
$(document).ready(function() {
var elems = document.getElementsByClassName("mario");
var scx = document.getElementById("screenx");
var i;
for (i = 0, nb = elems.length; i < nb; i++) {
if (elems[i].addEventListener) {
elems[i].addEventListener("mousewheel", horizontalScroll, false); // IE9, Chrome, Safari, Opera
elems[i].addEventListener("DOMMouseScroll", horizontalScroll, false); // Firefox
} else elems[i].attachEvent("onmousewheel", horizontalScroll); // IE 6/7/8
}
// Get and set number of "pages"
setAmountOfPages($('#screenx .mario .customtext').children().length);
// Set current-page initially
setCurrentPageNumber(1);
$("#next").on("click", function() {
horizontalClick(elems[0], 1);
});
$("#prev").on("click", function() {
horizontalClick(elems[0], -1);
});
// at least 100 px are a swipe
// you can use the value relative to screen size: window.innerWidth * .1
const offset = 100;
let xDown, yDown;
scx.addEventListener("touchstart", e => {
const firstTouch = getTouch(e);
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
});
scx.addEventListener("touchend", e => {
if (!xDown || !yDown) {
return;
}
const { clientX: xUp, clientY: yUp } = getTouch(e);
const xDiff = xDown - xUp;
const yDiff = yDown - yUp;
const xDiffAbs = Math.abs(xDown - xUp);
const yDiffAbs = Math.abs(yDown - yUp);
// at least <offset> are a swipe
if (Math.max(xDiffAbs, yDiffAbs) < offset) {
return;
}
if (xDiffAbs > yDiffAbs) {
if (xDiff > 0) {
horizontalClick(elems[0], -1);
} else {
horizontalClick(elems[0], 1);
}
} else {
if (yDiff > 0) {
console.log("up");
} else {
console.log("down");
}
}
});
window.addEventListener("keydown", function(e) {
switch (e.which) {
case 37: // left
horizontalClick(elems[0], -1);
break;
case 39: // right
horizontalClick(elems[0], 1);
break;
default:
return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
window.addEventListener("resize", function(e) {
console.log("resizing, i saw you !");
for (i = 0, nb = elems.length; i < nb; i++) {
elems[i].elementWidth = getColumnWidth(elems[i]);
}
// TODO: Update total page number on resize
});
});
function getTouch(e) {
return e.changedTouches[0];
}
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
overflow: hidden;
}
.page-number {
padding-top: 1rem;
color: black;
}
.background {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 130vh;
position: fixed;
width: 100%;
-webkit-transform: translateY(30vh);
transform: translateY(30vh);
transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}
.background:first-child {
-webkit-transform: translateY(-15vh);
transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
-webkit-transform: translateY(15vh);
transform: translateY(15vh);
}
.background:nth-child(1) {
z-index: 3;
}
.poscustomtext {
display: flex;
justify-content: center;
align-items: center;
}
.background:nth-child(3) {
z-index: 1;
}
.content-wrapper {
height: 100vh;
display: flex;
justify-content: center;
text-align: center;
flex-flow: column nowrap;
color: #fff;
font-family: Montserrat;
text-transform: uppercase;
-webkit-transform: translateY(40vh);
transform: translateY(40vh);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
.content-title {
font-size: 12vh;
line-height: 1.4;
}
.background.up-scroll {
-webkit-transform: translate3d(0, -15vh, 0);
transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
-webkit-transform: translateY(15vh);
transform: translateY(15vh);
}
.background.up-scroll+.background {
-webkit-transform: translate3d(0, 30vh, 0);
transform: translate3d(0, 30vh, 0);
}
.background.up-scroll+.background .content-wrapper {
-webkit-transform: translateY(30vh);
transform: translateY(30vh);
}
.background.down-scroll {
-webkit-transform: translate3d(0, -130vh, 0);
transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
-webkit-transform: translateY(40vh);
transform: translateY(40vh);
}
.background.down-scroll+.background:not(.down-scroll) {
-webkit-transform: translate3d(0, -15vh, 0);
transform: translate3d(0, -15vh, 0);
}
.background.down-scroll+.background:not(.down-scroll) .content-wrapper {
-webkit-transform: translateY(15vh);
transform: translateY(15vh);
}
#prev {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 235, 59, 0.75);
cursor: pointer;
position: absolute;
left: 0;
top: calc(50% - 50px);
z-index: 9;
}
#next {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 235, 59, 0.75);
cursor: pointer;
position: absolute;
right: 0;
top: calc(50% - 50px);
z-index: 9;
}
article.mario {
height: 80vh;
width: calc(80vw - 0px);
column-width: calc(80vw - 0px);
column-gap: calc(5vw + 0px);
column-rule: 2px dotted #ddd;
overflow: hidden;
border: solid 8px black;
}
article.mario:hover {
border: solid 8px gold;
}
.customtext {
padding-top: 0px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 40px;
text-align: justify;
}
<section class="background" id="screenx">
<div class="content-wrapper">
<div class="poscustomtext">
<div id="prev"></div>
<div id="next"></div>
<article class="mario">
<div class="customtext">
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
<a href="http://vfl.ru/fotos/abca98b122166092.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/abca98b1/22166092_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
</div>
<p style="margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br>В ту пору, когда <span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;"> была анонсирована, мода на стелс-экшены только-только начинала зарождаться, и любой мало-мальски приличный проект, хоть как-то позволяющий игроку бесшумно расправляться с неприятелями, сразу же нарекали “слелсом” и сталкивали лоб в лоб с </span>
<span
style="font-weight: bolder;">Metal Gear Solid</span>.<br><br>Это только потом выяснится, что в <span style="font-weight: bolder;">Headhunter</span>
вообще-то есть много и от <span style="font-weight: bolder;">Resident Evil</span>, и даже от <span style="font-weight: bolder;">Driver</span>
<span
style="box-sizing: inherit;">. Да и сама по себе боевая система, включая знаменитую (да-да, ту самую, что позже будет популяризована не без помощи </span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil 4</span>) камеру из-за плеча, куда ближе к
<span
style="font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">, нежели детищу </span><span style="box-sizing: inherit; font-weight: bolder;">Konami</span><span style="box-sizing: inherit;">. Но маркетинг ведь - штука сродни эпидемии: что надуют в ушко - в то и уверуешь.</span>
<br><br>И все было бы ничего, кабы датой релиза не значился конец 2001-го, а в качестве целевой платформы не был бы выбран Dreamcast. Тут даже к Ванге не ходи, чтобы понять всю абсурдность подобного решения - от консоли в ту пору уже публично открестилась даже сама
<span
style="font-weight: bolder;">Sega</span><span style="box-sizing: inherit;">, а мир с замиранием сердца ждал релиза второй части похождений Снейка. Неудивительно, что в </span><span style="font-weight: bolder;">Headhunter</span>
в итоге сыграли три с половиной человека, а про вышедший спустя полгода PS2-порт львиная доля владельцев данной консоли даже и не слыхивала.<br><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">А жаль, ведь игра вполне себе могла претендовать на лавры одного из лучших консольных экшенов того поколения. Что еще интереснее - перед нами практически уникальный пример проекта, на 80% состоящего из откровенной копипасты, но при этом умело связанной в единое и уж очень гармоничное целое. Причем, как это ни странно, даже обладающего своим узнаваемым лицом.</span>
<br><br></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
<a href="http://vfl.ru/fotos/ef190be422166093.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/ef190be4/22166093_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
</div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br><br>И хотя разработкой занималась никому доселе не известная шведская студия <span style="font-weight: bolder;">Amuze</span>
<span
style="box-sizing: inherit;">, высоко задранную планку качества ощущаешь уже с первых минут. Оркестровые мотивы за авторством </span><span style="box-sizing: inherit; text-decoration-line: underline;">Ричарда Жака</span><span style="box-sizing: inherit;"> (британского композитора, к тому времени уже сделавшего себе громкое имя благодаря внушительному списку “сеговских” проектов) пробирают до глубины души. FMV-вставки с “живыми” актерами, стилизованные под новостную сводку, удивляют не на шутку. Равно как и агитационные плакаты, которые можно наблюдать на экране загрузок.</span>
<br><br><span style="box-sizing: inherit;">Но вот уж где геймера ждет настоящий шок, так это на поприще графики. Великолепные модели персонажей (удивило разве что отсутствие мимики, да и сами лица объективно слабее, чем в той же </span>
<span
style="box-sizing: inherit; font-weight: bolder;">Code Veronica</span><span style="box-sizing: inherit;">) и потрясающая детализация окружения, которую ранее, в основном, можно было наблюдать лишь на рендренных фонах - вот чего точно не следовало ожидать от безвестной команды шведов. Движок при этом очень редко дает сбои в виде просадки fps, а сама по себе картинка смотрится очень гладкой и четкой.</span>
<br><br>Слегка придя в себя от поросячьего восторга, начинаешь разбираться в деталях сюжета. В принципе, ничего из ряда вон здесь игра уже предложить не может. Завязка достаточно стандартна - по крайней мере, если проводить аналогии с художественными фильмами. Главный герой в лице Джека Вейда просыпается в госпитале, где встречается с дочерью убитого основателя ACN - крупнейшей корпорации, служащей законодательным органом будущего. Принципы ее функционирования очень просты - группа специальных агентов, именуемых “хэдхантерами”, выслеживает опаснейших преступников, после чего берет под стражу и отправляет в подводную тюрьму. Там провинившимся супостатам предлагается принять участие в гладиаторской битве на арене. В случае проигрыша ACN имеет право распорядиться внутренними органами потерпевшего фиаско человека на свое усмотрение.
<br><br>Когда-то Джек и сам был “охотником за головами”, причем номером один. Именно поэтому Энджи и просит нашего героя помочь ей в расследовании убийства. Вот только те самые загадочные события, что привели Джека к больничной койке и амнезии, послужили причиной аннулирования “хэдхантерской” лицензии. Так что, процесс сбора мозаики под названием “Убийство Кристофера Штерна” придется объединить с так называемым “возвращением в школу”.
<br><br>Поначалу сюжет развивается довольно-таки плавно. В лучших традициях <span style="font-weight: bolder;">Resident Evil</span>
основную массу ключевых фактов можно подцепить не из роликов (здесь они представлены как в виде кат-сцен на движке, так и CG-видео), а при помощи различных документов и записок, так что не ленитесь осматривать каждый уголок.
Однако ближе к финалу вектор развития кардинально сменится, шагнув от былого (уж простите за небольшой спойлер) футуристического детектива в сторону научной фантастики с характерными для нее нотками антиутопии.<br>
<br></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
<a href="http://vfl.ru/fotos/322911f922166094.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/322911f9/22166094_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
</div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">С точки же зрения геймплея,</span><span style="box-sizing: inherit; font-weight: bolder;"> Headhunter</span><span style="box-sizing: inherit;"> представляет собой достаточно интересный симбиоз сразу нескольких проектов, названия которых были обозначены в самом начале статьи. Передвижение между ключевыми точками осуществляется верхом на байке, модель управления которым достаточно своеобразна. Да и сам город отличается на редкость убогой проработкой - страшненькие здания с размазанными текстурками, полнейшее отсутствие интерактивности и жителей на улицах. Что таким образом пытались нам показать разработчики - решительно непонятно.</span>
<br><br>Основное же действие будет разворачиваться на локациях закрытого типа, как правило отличающихся внушительными размерами. Набор самый стандартный: заправка, офисное здание, морской порт, торговый центр. В ряде случаев будет необходимо решить какую-нибудь головоломку, как правило построенную на стандартном скелете “возьми предмет там и примени его здесь”. В общем, ничего особенного - поклонники
<span
style="box-sizing: inherit; font-weight: bolder;">Silent Hill</span><span style="box-sizing: inherit;"> и </span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;"> справятся в два счета.</span><br style="box-sizing: inherit;">
<br
style="box-sizing: inherit;"><span style="box-sizing: inherit;">Куда интереснее дела обстоят с экшен-составляющей, изрядно смахивающей на серию </span><span style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">. Герой достаточно подвижен - например, может лихо троллить своих врагов, перекатываясь из стороны в сторону. Да, сейчас это уже никого не удивляет, но тогда смотрелось вполне себе в новинку. Вы, конечно же, не поверите, но одной из первых игр (самой первой, если что, был дремучий экшен </span>
<span
style="box-sizing: inherit; font-weight: bolder;">WinBack</span><span style="box-sizing: inherit;"> 1999 года розлива) с пресловутой возможностью стрелять из-за угла или баррикад стала именно </span><span style="box-sizing: inherit; font-weight: bolder;">Headhunder</span>
<span
style="box-sizing: inherit;">.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Арсенал у Джека самый стандартный - пистолет, дробовик, автомат, гранатомет и еще парочка взрывоопасных экземпляров. Единственное новаторство - это пустые гильзы, которые можно использовать для привлечения врагов. Правда, рассчитать траекторию полета оных с высокой точностью порой оказывается достаточно трудно, так что назвать все эту затею хорошей и удобной язык не повернется. Лучше уж старое-доброе “снейковское” простукивание стен.</span>
<br
style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">К слову, о </span><span style="box-sizing: inherit; font-weight: bolder;">Metal Gear Soild</span><span style="box-sizing: inherit;">. В игре есть ровным счетом три незначительных момента, которые, собственно, и роднят детище </span>
<span
style="box-sizing: inherit; text-decoration-line: underline;">Кодзимы</span><span style="box-sizing: inherit;"> с нашим пациентом. Первое - стелс-миссии, с которыми придется регулярно иметь дело в процессе получения лицензий. Тут уж действительно настоящий "стелс" - никакого оружия кроме собственных рук, с помощью которых Джек не прочь свернуть вражескую шею и вышеупомянутые гильзы. Второе - это оформление самой виртуальной реальности, внутри которой и будет проходить выполнение тестов. Наконец, последнее - это часы с возможностью совершения видеозвонка. Эдакий продвинутый вариант знаменитого кодека.</span>
<br
style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И, наконец, отдельным пунктом хотелось выделить боссов, в работе над которыми </span><span style="box-sizing: inherit; font-weight: bolder;">Amuze</span>
<span
style="box-sizing: inherit;">постаралась как следует. Особой харизмой здешние злодеи похвастаться не могут, однако куда важнее для нас тот факт, что каждая битва строго уникальна и требует сугубо индивидуального подхода к тому или иному супостату. Никакой
рутиной в духе “хоровод вокруг громилы с последующим “спусканием” в его тушку всего имеющегося арсенала” здесь не пахнет и подавно.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
<div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
<a href="http://vfl.ru/fotos/fa38ef5422166095.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362397/fa38ef54/22166095_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
</div>
<p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Подводя итоги, хочется сказать, что судьба </span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;"> все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.</span>
<br
style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">***</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И напоследок… о сиквеле замолвите слово.</span><br style="box-sizing: inherit;">
<br
style="box-sizing: inherit;"><span style="box-sizing: inherit;">В 2004-м году на PS2 и Xbox вышло продолжение под названием </span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption</span><span style="box-sizing: inherit;">, действие которого разворачивалось спустя 20 лет с момента окончания оригинальной игры. За прошедшие годы виртуальный мир сильно изменился - теперь это уже был чистейший киберпанк с присущими для него неоновыми небоскребами, а нотки антиутопии заиграли еще сильнее. Как итог - жителей города распределили между двумя кастами, низшей и высшей.</span>
<br><br><span style="box-sizing: inherit;">Несмотря на ряд объективных достоинств, плохого в </span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption </span>было куда больше. Это и невнятный сюжет, и странное управление с какой-то совершенно недекватной системой прицеливания. Наконец, сменив сеттинг, игра сильно сдала в плане разнообразия локаций. Да и сам по себе графический движок по меркам 2004 года смотрелся просто достойно, но не более того.</p>
</div>
</article>
</div>
<div class="page-number">Page <span class="page-current">.</span>/<span class="page-amount">.</span></div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
Вопрос (скорее просьба): Нужно решение для вывода номера страниц таким образом: «Страница 1 из Х». При переходе на другое окно (которое продолжает контент, например на второе окно «2 из Х» и так далее).
То что я хочу визуально:
Дополню вопрос: Это похоже на слайдер, но это не слайдер. Колонки с информацией образуются автоматом в зависимости от размера окна, следовательно их количество при измененном размере могут меняться. Нужно вывести: текущая колонка/всего колонок (например 1/10), при переходе на вторую колонку (2/10) и т.д.
Дополнение 2
Вопрос почти решен. Есть глюк, если быстро нажимать назад, то номер первой страницы может отражаться как ноль. Буду рад вашим решениям.
Вот держи решение для корректного подсчета страниц. Замени им строки 97 и 176 в JS
setAmountOfPages(Math.floor(elems[0].scrollWidth / elems[0].clientWidth));
P.S. Что делать с нолем и лишней страницей в конце (которые возникают если быстро скроллить или лево/право тыкать), я не знаю. Я вообще на JS не программирую.
(рабочий пример https://codepen.io/Roosso/pen/GLyLOo)
Крч попробуй jquery index() https://api.jquery.com/index/ !!! А вот тебе функция на чистом js если не любишь использовать jqueryq
function indexInParent(node) {
var children = node.parentNode.childNodes;
var num = 0;
for (var i=0; i<children.length; i++) {
if (children[i]==node) return num;
if (children[i].nodeType==1) num++;
}
return -1;
}
Пример(открой консоль)
Продвижение своими сайтами как стратегия роста и независимости