15.11.2011, 02:00
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Сообщение от Magneto
|
|
Ну-ну.
|
Ну я утрирую, конечно, там ещё поправка на разницу ширины и высоты и доп. эффекты, повешенные на определённые позиции, но основа именно такова.))
__________________
29375, 35
|
|
15.11.2011, 11:45
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от Gozar
|
|
горизонтальный скролл спрятать и по событию мыши колесо катай невидимый скролл вправо и влево.
|
Да, я видел в ФФ как там меняется left в отрицательную сторону...  Только вот интересно как подогнать вертикальный размер под горизонтальный. 
Мне понравилось что тот сайтец еще и резиновый.
То же событие скролинга вроде как только ЖиКвери нормально отлавливает... |
|
15.11.2011, 11:54
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
|
Цитата:
|
|
Только вот интересно как подогнать вертикальный размер под горизонтальный.
|
onload onresize spacer.style.height = main.scrollWidth+'px'
=)
__________________
29375, 35
|
|
15.11.2011, 11:57
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Т.е. скриптом... Тогда понятно...
|
|
15.11.2011, 12:24
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Иначе никак, инфа 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>
__________________
29375, 35
|
|
15.11.2011, 13:54
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от Aetae
|
|
Вот так оно делается
|
Держи + от меня. |
|
15.11.2011, 18:54
|
|
Аспирант
|
|
Регистрация: 01.03.2009
Сообщений: 33
|
|
|
Обычный слайдер или карусель с возможностью размещения независимых блоков вместо картинок (делал такой, и "для интереса" предусматривал режим вставки блоков вместо картинок) плюс 2 эффекта со скроллами.
В прототипе мы видим обычный юзабельный косяк, как во всех каруселях: при переходе с последней на первую страницу: начинается бешеное мелькание всех картинок подряд вместо того, чтобы замкнуть меню в кольцо и выдать первую страницу как будто бы следующей за последней.
Далее, сама идея слайдинга больших страниц по юзабилити сомнительна: на большом экране или при слабом компьютере мы видим мелькание кадров, а не анимацию. Я бы делал медленный слайд-эффект с неподвижными текстами и движущейся вертикальной полоской, которая отделяет старую страницу от новой.
Второй косяк : при высоте окна 300-600 px (очень реально для нетбуков и смартфонов) мы просто не видим нижней части текстов, хотя разработчики постарались расположить блоки горизонтально при нехватке высоты, но ограничили минимальную высоту в 700px.
Далее, совершенно нормальным напрашивается не ломка сознания, когда вертикальный скролл становится горизонтальным (в общем-то нормально, я сам так делал в слайдере картинок, но то был слайдер с горизонтальной полосой прокрутки, а здесь страница с вертикальной; я бы оставил скролл на случаи именно вертикального прокручивания непомещающихся блоков), а кинематическое перетаскивание контента - хватание его "рукой" и "бросание" в сторону. Таким способом можно было бы разобраться, что делать с непомещающимися блоками по высоте: таскать их вверх-вниз, чтобы прочитать, плюс подкручивать мышью.
В общем, хотел бы заметить, что нерешённых проблем в этом решении достаточно, и как бы они неявно не вошли в техзадание со словами "чтобы всё было красиво". Пока эти вопросы не решены, я бы не стал делать эту разработку ввиду указанных проблем.
Последний раз редактировалось 12345c, 15.11.2011 в 18:59.
|
|
16.11.2011, 08:17
|
|
Профессор
|
|
Регистрация: 11.05.2011
Сообщений: 241
|
|
12345c,
|
Цитата:
|
|
начинается бешеное мелькание всех картинок
|
Это не косяк, перемотка назад наглядно показывает, что происходит возврат к началу списка. Это раньше "замыкали" в круг. И это проще. Только пользователям неудобно определять конец списка - это напрягает.
Согласен, что управление там неидеально - есть и ошибки, есть и недоделки (странно было не добавить клавиши <- и -> ). Но сайт таки производит запоминающееся впечатление.
|
|
16.11.2011, 12:24
|
|
Аспирант
|
|
Регистрация: 01.03.2009
Сообщений: 33
|
|
|
В круг замкнуть как раз сложнее, потому что надо переместить первый элемент DOM на последнее место, а потом применить анимацию и реализовать нетипичное поведение полосы прокрутки. Определять начало списка будет просто и приятно, если предусмотреть маркер начала-конца: просто пустое пространство (лучше размером меньше, чем ширина страницы) или заголовок раздела или логотип сайта на этом пустом пространстве. И, конечно, это будет напрягать (следить только по скроллу), если этого не будет.
Про впечатление - я бы сказал, на гиков и разработчиков он произведёт положительное впечатление, и то только на основании понимания, что данный разрабочик чего-то достиг. А посмотрите глазами пользователя, который далёк от проблем анимации в браузере - тому бросится в глаза рваное мелькание анимации (даже при переходе на следующую, но при большом окне) и вывод будет: "эх, хотели сделать красиво, а до ума не довели". И именно таким будет вывод инвестора, если он не гик и не заблуждается во впечатлении.
|
|
16.11.2011, 14:05
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
А автор, тем временем, слился... |
|
|
|
