Слайдер: вспоминаем Morrowind и сравниваем ее со Skywind
7 мая 2017
1 мая 2017 года The Elder Scrolls III: Morrowind исполнилось 15 лет. Чтобы отпраздновать это событие мы, как поклонники вселенной «Древних свитков», подготовили серию ностальгических материалов. В этот раз мы мучались с очень ранней версией глобальной модификации Skywind, переносящей весь «Морровинд» на ресурсы The Elder Scrolls V: Skyrim. Было сложно, обе игры постоянно вылетали на рабочий стол, но мы взяли себя в руки и сделали 15 интерактивных слайдеров. .ba-slider { position: relative; overflow: hidden; margin: 40px auto; } .ba-slider img { width: 100%; display: block; } .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .handle { /* Thin line seperator */ position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(0, 0, 0, 0.5); cursor: ew-resize; } .handle:after { position: absolute; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; content: '\21d4'; color: #34495e; font-weight: bolder; font-size: 24px; text-align: center; line-height: 48px; background: white; border: 2px solid #34495e; border-radius: 50%; transition: all 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .draggable:after { width: 36px; height: 36px; margin: -18px 0 0 -18px; line-height: 36px; font-size: 20px; } window.onload = function(){ // Call & init $(document).ready(function(){ $('.ba-slider').each(function(){ var cur = $(this); // Adjust the slider var width = cur.width()+'px'; cur.find('.resize img').css('width', width); // Bind dragging events drags(cur.find('.handle'), cur.find('.resize'), cur); }); }); // Update sliders on resize. // Because we all do this: i.imgur.com/YkbaV.gif $(window).resize(function(){ $('.ba-slider').each(function(){ var cur = $(this); var width = cur.width()+'px'; cur.find('.resize img').css('width', width); }); }); function drags(dragElement, resizeElement, container) { // Initialize the dragging event on mousedown. dragElement.on('mousedown touchstart', function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); // Check if it's a mouse or touch event and pass along the correct value var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; // Get the initial position var dragWidth = dragElement.outerWidth(), posX = dragElement.offset().left + dragWidth - startX, containerOffset = container.offset().left, containerWidth = container.outerWidth(); // Set limits minLeft = containerOffset + 10; maxLeft = containerOffset + containerWidth - dragWidth - 10; // Calculate the dragging distance on mousemove. dragElement.parents().on("mousemove touchmove", function(e) { // Check if it's a mouse or touch event and pass along the correct value var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; leftValue = moveX + posX - dragWidth; // Prevent going off limits if ( leftValue < minLeft) { leftValue = minLeft; } else if (leftValue > maxLeft) { leftValue = maxLeft; } // Translate the handle's left value to masked divs width. widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; // Set the new values for the slider and the handle. // Bind mouseup events to stop dragging. $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); }); $('.resizable').css('width', widthValue); }).on('mouseup touchend touchcancel', function(){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); e.preventDefault(); }).on('mouseup touchend touchcancel', function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); }); } };
Эй, проснись! Ну ты и соня. Тебя даже вчерашний шторм не разбудил. Говорят, мы уже приплыли в Морровинд. Нас выпустят, это точно!
Джиуб, трюм тюремного корабля, стражник. Какие прекрасные воспоминания! Первое, что можно увидеть, выбравшись на палубу корабля — это здание имперской канцелярии на фоне порта силт страйдеров. Дальше вы не пройдете, пока не получите бумаги (и не покажите их Селлусу Гравиусу, чтобы получить пособие). Алебастровое блюдо стоимостью 650 септимов, которое все воровали прямо из-под носа у стражника. Тот самый маяк в деревне Сейда Нин, с которого приходилось следить за Фарготом, прячущим кольцо в тайник. Самый большой город на острове — Вивек — назван в честь живущего бога, воина-поэта. В солнечную погоду некоторые тени на броне ординаторов выглядят нелепо, но это же дремучая бета Skywind, поэтому придираться мы не будем. Дворец Вивека пока без воды. Приближаемся к Балморе, оставляя в 10 метрах позади себя тело наркомана и курительную трубку Ции. Балмора — второй по величине город на Вварденфелле и резиденция Великого Дома Хлаалу. Филиалы Гильдии бойцов и Гильдии магов. Помните, как искали пропавшие отчеты травницы Ажиры под каждой скамейкой? Район поместий в городе Альдʼрун, построенный внутри панциря гигантского краба — давным давно вымершего вида — немного не соответствует своим пропорциям из оригинальной The Elder Scrolls 3: Morrowind. Очень грустная история (на самом деле нет): неподалеку от деревни Гнисис по пояс в воде стоит данмер Хентус. Он не может уйти, потому что у него украли штаны. Пепельная маска Вивека в святилище Гнисиса. В отличие от «Морровинда», система освещения из The Elder Scrolls 5: Skyrim более реалистично отображает свет от огня, поэтому в помещениях Skywind темнее, чем должно быть. А вот у девушек из борделя «Дом земных наслаждений Дезель» в Суране пока еще нет анимации, поэтому они шатаются по залу без дела!Мы специально не устанавливали никаких графических модов на обе игры — для чистоты эксперимента. Правда, для нескольких скриншотов в Morrowind пришлось увеличить дальность прорисовки, чтобы в кадр попали удаленные объекты.
Все материалы к 15-летию The Elder Scrolls 3: MorrowindАудиотест: Как хорошо ты помнишь The Elder Scrolls 3: Morrowind?
Слайдер: вспоминаем Morrowind и сравниваем ее со Skywind
Рассказываем о новых модах для Morrowind
Отборные мемы и обзоры для элиты
Самые дешёвые игры
Оставить отзыв