Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <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>В ту пору, когда&nbsp;<span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;была анонсирована, мода на стелс-экшены только-только начинала зарождаться, и любой мало-мальски приличный проект, хоть как-то позволяющий игроку бесшумно расправляться с неприятелями, сразу же нарекали “слелсом” и сталкивали лоб в лоб с&nbsp;</span>
            <span
              style="font-weight: bolder;">Metal Gear Solid</span>.<br><br>Это только потом выяснится, что в&nbsp;<span style="font-weight: bolder;">Headhunter</span>
              &nbsp;вообще-то есть много и от&nbsp;<span style="font-weight: bolder;">Resident Evil</span>, и даже от&nbsp;<span style="font-weight: bolder;">Driver</span>
                <span
                  style="box-sizing: inherit;">. Да и сама по себе боевая система, включая знаменитую (да-да, ту самую, что позже будет популяризована не без помощи&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil 4</span>) камеру из-за плеча, куда ближе к&nbsp;
                  <span
                    style="font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">, нежели детищу&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Konami</span><span style="box-sizing: inherit;">. Но маркетинг ведь - штука сродни эпидемии: что надуют в ушко - в то и уверуешь.</span>
                    <br><br>И все было бы ничего, кабы датой релиза не значился конец 2001-го, а в качестве целевой платформы не был бы выбран Dreamcast. Тут даже к Ванге не ходи, чтобы понять всю абсурдность подобного решения - от консоли в ту пору уже публично открестилась даже сама&nbsp;
                      <span
                        style="font-weight: bolder;">Sega</span><span style="box-sizing: inherit;">, а мир с замиранием сердца ждал релиза второй части похождений Снейка. Неудивительно, что в&nbsp;</span><span style="font-weight: bolder;">Headhunter</span>
                        &nbsp;в итоге сыграли три с половиной человека, а про вышедший спустя полгода 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>И хотя разработкой занималась никому доселе не известная шведская студия&nbsp;<span style="font-weight: bolder;">Amuze</span>
            <span
              style="box-sizing: inherit;">, высоко задранную планку качества ощущаешь уже с первых минут. Оркестровые мотивы за авторством&nbsp;</span><span style="box-sizing: inherit; text-decoration-line: underline;">Ричарда Жака</span><span style="box-sizing: inherit;">&nbsp;(британского композитора, к тому времени уже сделавшего себе громкое имя благодаря внушительному списку “сеговских” проектов) пробирают до глубины души. FMV-вставки с “живыми” актерами, стилизованные под новостную сводку, удивляют не на шутку. Равно как и агитационные плакаты, которые можно наблюдать на экране загрузок.</span>
              <br><br><span style="box-sizing: inherit;">Но вот уж где геймера ждет настоящий шок, так это на поприще графики. Великолепные модели персонажей (удивило разве что отсутствие мимики, да и сами лица объективно слабее, чем в той же&nbsp;</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>Поначалу сюжет развивается довольно-таки плавно. В лучших традициях&nbsp;<span style="font-weight: bolder;">Resident Evil</span>
                        &nbsp;основную массу ключевых фактов можно подцепить не из роликов (здесь они представлены как в виде кат-сцен на движке, так и 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;">&nbsp;Headhunter</span><span style="box-sizing: inherit;">&nbsp;представляет собой достаточно интересный симбиоз сразу нескольких проектов, названия которых были обозначены в самом начале статьи. Передвижение между ключевыми точками осуществляется верхом на байке, модель управления которым достаточно своеобразна. Да и сам город отличается на редкость убогой проработкой - страшненькие здания с размазанными текстурками, полнейшее отсутствие интерактивности и жителей на улицах. Что таким образом пытались нам показать разработчики - решительно непонятно.</span>
            <br><br>Основное же действие будет разворачиваться на локациях закрытого типа, как правило отличающихся внушительными размерами. Набор самый стандартный: заправка, офисное здание, морской порт, торговый центр. В ряде случаев будет необходимо решить какую-нибудь головоломку, как правило построенную на стандартном скелете “возьми предмет там и примени его здесь”. В общем, ничего особенного - поклонники&nbsp;
              <span
                style="box-sizing: inherit; font-weight: bolder;">Silent Hill</span><span style="box-sizing: inherit;">&nbsp;и&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">&nbsp;справятся в два счета.</span><br style="box-sizing: inherit;">
                <br
                  style="box-sizing: inherit;"><span style="box-sizing: inherit;">Куда интереснее дела обстоят с экшен-составляющей, изрядно смахивающей на серию&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">. Герой достаточно подвижен - например, может лихо троллить своих врагов, перекатываясь из стороны в сторону. Да, сейчас это уже никого не удивляет, но тогда смотрелось вполне себе в новинку. Вы, конечно же, не поверите, но одной из первых игр (самой первой, если что, был дремучий экшен&nbsp;</span>
                  <span
                    style="box-sizing: inherit; font-weight: bolder;">WinBack</span><span style="box-sizing: inherit;">&nbsp;1999 года розлива) с пресловутой возможностью стрелять из-за угла или баррикад стала именно&nbsp;</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;">К слову, о&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Metal Gear Soild</span><span style="box-sizing: inherit;">. В игре есть ровным счетом три незначительных момента, которые, собственно, и роднят детище&nbsp;</span>
                        <span
                          style="box-sizing: inherit; text-decoration-line: underline;">Кодзимы</span><span style="box-sizing: inherit;">&nbsp;с нашим пациентом. Первое - стелс-миссии, с которыми придется регулярно иметь дело в процессе получения лицензий. Тут уж действительно настоящий "стелс" - никакого оружия кроме собственных рук, с помощью которых Джек не прочь свернуть вражескую шею и вышеупомянутые гильзы. Второе - это оформление самой виртуальной реальности, внутри которой и будет проходить выполнение тестов. Наконец, последнее - это часы с возможностью совершения видеозвонка. Эдакий продвинутый вариант знаменитого кодека.</span>
                          <br
                            style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И, наконец, отдельным пунктом хотелось выделить боссов, в работе над которыми&nbsp;</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;">Подводя итоги, хочется сказать, что судьба&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.
            все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.
            
            все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.
           
            все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев 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 вышло продолжение под названием&nbsp;</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;">Несмотря на ряд объективных достоинств, плохого в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption&nbsp;</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>
              
            
!

CSS

              
                @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;
}
              
            
!

JS

              
                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(Math.floor(elems[0].scrollWidth / elems[0].clientWidth));
  
  // 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]);
    }
    
    setAmountOfPages(Math.floor(elems[0].scrollWidth / elems[0].clientWidth));
  });
});

function getTouch(e) {
  return e.changedTouches[0];
}
              
            
!
999px

Console