Нужно запрогать сайт, типа digitalevent.ru
Всем привет!
Сайт с горизонтальным скроллом, аналог — digitalevent.ru. Нужен классный специалист, который сможет запрограммировать подобную навигацию, неравномерное движение фонов, правильную подгрузку изображений и т.д. Контакты в профиле. По запросу скину дизайн и предполагаемый сценарий анимации. Жду предложений по цене и срокам. |
Прикольный скрол... :blink: Интересно было бы сварганить такое.
Цитата:
Цитата:
Ребята, есть у кого наборсок как можно вертикаль "заменить" на горизонталь? Просто даже интересно стало. :-? |
Цитата:
|
Чепухня, немного раздражает - это как стоять на левой ноге и крутить правой рукой и правой ногой в разные стороны, назови цену.
|
Цитата:
|
onscroll scrollLeft=scrollTop, делов то.)
|
Только с PgUp PgDown у них не очень классно получилось.
Но сайт запоминающийся и интересный. Похоже на какую-то CMS |
Цитата:
На мой взгляд, было бы логично ещё управление стрелками влево/вправо добавить... |
Проект интересный.
Хотелось бы узнать бюджет. Также хотелось бы получить дизайн и предполагаемый сценарий анимации на почту alternator-a@yandex.ru |
Цитата:
|
Цитата:
|
Цитата:
Мне понравилось что тот сайтец еще и резиновый. То же событие скролинга вроде как только ЖиКвери нормально отлавливает... |
Цитата:
=) |
Т.е. скриптом... Тогда понятно...
|
Иначе никак, инфа 100%.)
Вот так оно делается, остальное красивости, их добавить несложно, но долго)
<!DOCTYPE HTML>
<html>
<body>
<style>
*{margin:0;padding:0}
#inner{
background: rgb(16,0,255); /* Old browsers */
background: -moz-linear-gradient(left, rgba(16,0,255,1) 0%, rgba(136,255,96,1) 18%, rgba(234,40,3,1) 46%, rgba(124,188,183,1) 70%, rgba(255,216,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(16,0,255,1)), color-stop(18%,rgba(136,255,96,1)), color-stop(46%,rgba(234,40,3,1)), color-stop(70%,rgba(124,188,183,1)), color-stop(100%,rgba(255,216,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(16,0,255,1) 0%,rgba(136,255,96,1) 18%,rgba(234,40,3,1) 46%,rgba(124,188,183,1) 70%,rgba(255,216,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1000ff', endColorstr='#ffd800',GradientType=1 ); /* IE6-9 */
width:4000px;
height:4000px;
}
#outer{
overflow:scroll;
width:600px;
height:400px;
}
</style>
<div id="outer" onscroll="this.scrollLeft=this.scrollTop">
<div id="inner"></div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
inner.style.height = outer.scrollWidth - outer.clientWidth + outer.clientHeight + 'px';
</script>
</body>
</html>
|
Цитата:
|
Обычный слайдер или карусель с возможностью размещения независимых блоков вместо картинок (делал такой, и "для интереса" предусматривал режим вставки блоков вместо картинок) плюс 2 эффекта со скроллами.
В прототипе мы видим обычный юзабельный косяк, как во всех каруселях: при переходе с последней на первую страницу: начинается бешеное мелькание всех картинок подряд вместо того, чтобы замкнуть меню в кольцо и выдать первую страницу как будто бы следующей за последней. Далее, сама идея слайдинга больших страниц по юзабилити сомнительна: на большом экране или при слабом компьютере мы видим мелькание кадров, а не анимацию. Я бы делал медленный слайд-эффект с неподвижными текстами и движущейся вертикальной полоской, которая отделяет старую страницу от новой. Второй косяк : при высоте окна 300-600 px (очень реально для нетбуков и смартфонов) мы просто не видим нижней части текстов, хотя разработчики постарались расположить блоки горизонтально при нехватке высоты, но ограничили минимальную высоту в 700px. Далее, совершенно нормальным напрашивается не ломка сознания, когда вертикальный скролл становится горизонтальным (в общем-то нормально, я сам так делал в слайдере картинок, но то был слайдер с горизонтальной полосой прокрутки, а здесь страница с вертикальной; я бы оставил скролл на случаи именно вертикального прокручивания непомещающихся блоков), а кинематическое перетаскивание контента - хватание его "рукой" и "бросание" в сторону. Таким способом можно было бы разобраться, что делать с непомещающимися блоками по высоте: таскать их вверх-вниз, чтобы прочитать, плюс подкручивать мышью. В общем, хотел бы заметить, что нерешённых проблем в этом решении достаточно, и как бы они неявно не вошли в техзадание со словами "чтобы всё было красиво". Пока эти вопросы не решены, я бы не стал делать эту разработку ввиду указанных проблем. |
12345c,
Цитата:
Согласен, что управление там неидеально - есть и ошибки, есть и недоделки (странно было не добавить клавиши <- и -> ). Но сайт таки производит запоминающееся впечатление. |
В круг замкнуть как раз сложнее, потому что надо переместить первый элемент DOM на последнее место, а потом применить анимацию и реализовать нетипичное поведение полосы прокрутки. Определять начало списка будет просто и приятно, если предусмотреть маркер начала-конца: просто пустое пространство (лучше размером меньше, чем ширина страницы) или заголовок раздела или логотип сайта на этом пустом пространстве. И, конечно, это будет напрягать (следить только по скроллу), если этого не будет.
Про впечатление - я бы сказал, на гиков и разработчиков он произведёт положительное впечатление, и то только на основании понимания, что данный разрабочик чего-то достиг. А посмотрите глазами пользователя, который далёк от проблем анимации в браузере - тому бросится в глаза рваное мелькание анимации (даже при переходе на следующую, но при большом окне) и вывод будет: "эх, хотели сделать красиво, а до ума не довели". И именно таким будет вывод инвестора, если он не гик и не заблуждается во впечатлении. |
А автор, тем временем, слился... :D
|
ksa,
Ну ему ведь выложили почти готовый скрипт :) - Зачем платить 12345c, А если просто подойти как к массиву, в котором надо по кольцу менять значение - алгоритм для школы. Можно вообще просто подставлять значение src в центральный и боковые img |
Скрипт лишь концепт, он ничего не стоит ибо любой разумный прогер до него дойдёт за 10 минут. А вот повторить функционал сайта во всех аспектах - это уже нудная работа.)
|
Aetae,
Нудной работой могут заниматься и простоые люди, которые программировать не умеют ;) |
Почемучкин, кирпичи таскать?
|
Есть один минус, без JS, конкретно этот сайт ничего не покажет.
Хотя, сейчас люди, которые отключают JS - ССЗБ. |
Snipe, ну, помучавшись и подумавши - можно сделать нормально и без JS. Например, делать прокрутку горизонтальной изначально, а потом менять её с помощью js. Нет js - не поменялось...
Хотя всё равно не очень будет... |
| Часовой пояс GMT +3, время: 16:08. |