Горизонтальный скроллинг в блоке
Горизонтальный скроллинг это очень оригинальный прием, а именно оригинальность одна из главных составляющих успеха любого проекта.
Как это работает?
Создается блок(Container) с ограничением размера, в Container помещается блок большего размера(Slider) в котором находятся блоки с контентом(Section).
В блоке Container мы будем видеть только лишь часть блока Slider, как показано на рисунке ниже.
При определенном действии блок Slidera сдвигается и тем самым его видимая часть меняется, как это показано на рисунке ниже.
Думаю теперь все и всем понятно :)
Реализация
Все операции с движением блока Slider будет происходить с помощь всем известной javascript библиотеки mootools.
HTML код очень простой. Сначало подключим и настроим библиотеку mootools вставив код данный ниже между тегами head.
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity:1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>
Далее создадим все необходимые блоки.
<div id="container">
<div class="slider">
<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>
</div>
</div>
Теперь осталось только оформить все это дело с помощью css
#container{
width: 780px; height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
}
.slider{
width: 2000px; height: 400px;
padding: 20px;
background: #CCCCCC;
}
.section{
margin:0; width:220px;
float:left;
margin-right:50px;
}
Все! Готово ^_^
По мотивам:
http://woork.blogspot.com/2008/03/using-css-and-mootools-to-simulate.html
В firefox 2.0.0.9 в обратную сторону очень тормозно прокручивается. А так интересно, спасибо.
Супер.
warkord, а у меня нормально прокручиваеться и в нормальную сторону.
FireFox 2.0.0.13
Можно ли подобного эффекта достичь без использования Mootools? Или хотя бы с помощью jQuery…
WebApelsin, хм, понятия не имею :/
ИМХО, syntaxhighlighter sucks, highlight.js от Ивана Сагалаева ( ) рулит. ;-)
Действительно хорошая вещь, искреннее спасибо Виктор ;)
Кстати, у вас в последнем куске кода (CSS) нет закрывающей «}», поэтому highlight.js отказывается считать это CSS’ом и не расцвечивает.
Спасибо, после моего глобального апдейта на скорую руку все подгонял и одной скобочки недосчитался :)
Спасибо! Очень круто!..)))
Из-за Mootools.svn.js размером 183Кб пример открывался немеренное количество времени. Нафиг такие эффекты. Не перевелись еще узкие каналы на Руси :(
> Написал Иван 28.03.08 в 14:11
И написал я это 03.04.08 в 17:40 :)
Кстати, у всех комментов неправильное время стоит
Нет нет нет! Все правильно, в моем блоге мы будем жить по моим законам и по моему времени :-)
Только вот почему то, время комментариев не моё 0_о и оно мне не подвластно!
Я исказил время и пространство! *Злобный смех*
Наладил в смысле.
А как сделать появляющиеся стрелочки (например как на – работает в Мозилле и не работает в ИЕ)? А то непонятно как нужно крутить если об этом не писать специально..
Это просто шедеврально! Уже только этот пост достаточен для добавления блога в rss!
интересно а можно ли сделать чтобы блок открывался не справа, а по центру?..
как сделать, чтобы прокрутка осуществлялась при нажатии на ссылки, а не при наведении на область?
блин классная штука она мне очень пригодилась а если бы еще прокручивать колёсиком мышки то ваще выло бы супер!!!
а на счет веса скриптового файла 180кб который из него можно каменты поудолять при желании )
столкнулся с такой проблемой как прокруткой в firefox,
т.е при прокрутке при переходе с одного курсора с одного элемента section на другой происходит остановка прокрутки, (только в firefox)
на представленном примере эт тоже есть,
* версии ff перепробовал разные,
как решить ?
хе-хе, вот что занчит когда отвлекают,
исправил:
столкнулся с такой проблемой как прокруткой в firefox,
когда курсор переходит с одного элемента section на другой происходит остановка прокрутки, (только в firefox)
на представленном примере эт тоже есть,
* версии ff перепробовал разные,
как решить ?
Тоже с этим столкнулся, тоже хотел бы узнать как это исправить.
Да можно пофиксить эту хрень. Фикситься очень просто. Непонимаю почему автор вставил именно такую реализацию.
Поменяй сторки
$(‘container’).addEvent(‘mouseover’, scroll.start.bind(scroll));
$(‘container’).addEvent(‘mouseout’, scroll.stop.bind(scroll));
на
$(‘container’).addEvent(‘mouseenter’, scroll2.start.bind(scroll2));
$(‘container’).addEvent(‘mouseleave’, scroll2.stop.bind(scroll2));
И будет тебе щастье :)
Ссылка битая? Не могу посмотреть пример. Поправите?
Очень красиво!
.slider{
width: 1200px; height: 120px;
padding: 5px;
background: #CECECE;
}
width: 1200px – фиксированная ширина, это оооооооооочень плохо, ибо по достижении крайнего слайда – все равно ведет в сторону, пока не будет достигнута заданная ширина. Нужна динамика
Подскажите пожалуйста как сделать прокрутку не по области а по нажатию или наведению мышки на кнопку.
A number of really nice products on this web site, I quite like this.
I simply want to say I am just beginner to blogging and site-building and absolutely enjoyed you’re web blog. More than likely I’m planning to bookmark your site . You definitely come with exceptional article content. Thank you for sharing your blog site.
Hey there would you mind sharing which blog platform you’re using? I’m going to start my own blog in the near future but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique. P.S Sorry for being off-topic but I had to ask!
Wow! Thank you! I always needed to write on my website something like that. Can I include a fragment of your post to my blog?
Thank you for sharing with us, I conceive this website genuinely stands out : D.
Some genuinely excellent posts on this site, thankyou for contribution.
I consider something genuinely special in this website.
I conceive this site contains very excellent pent content material posts.
Thankyou for this howling post, I am glad I discovered this website on yahoo.
Excellent website. A lot of useful info here. I am sending it to some friends ans also sharing in delicious. And certainly, thanks for your effort!
We are a bunch of volunteers and starting a new scheme in our community. Your web site offered us with useful info to paintings on. You have done an impressive task and our entire group will likely be thankful to you.
Regards for all your efforts that you have put in this. very interesting info . «Nurture your mind with great thoughts.» by Benjamin Disraeli.
Quite great points you wrote the following..Great stuffI consider youve created some truly helpful factors.Maintain up the great do the job.
Wohh exactly what I was looking for, thankyou for putting up. «Arguments are like fire-arms which a man may keep at home but should not carry about with him.» by Samuel Butler.
Right after research several with the weblog posts on the site today, and that i really like your strategy for blogging and site-building. My partner and i bookmarked that to be able to our bookmark website list along with is going to be looking at back quickly. Could you have a look at my web site as well along with tell me everything you assume.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!
Hello There. I found your blog using msn. This is a very well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I will certainly comeback.
Generally I do not read article on blogs, but I wish to say that this write-up very forced me to try and do it! Your writing style has been amazed me. Thanks, very nice post.
This is such a great post, and was thinking considerably exactly the same myself. One more wonderful update.
Thanks so much for giving everyone a very nice opportunity to read articles and blog posts from this blog. It is usually very cool and also stuffed with fun for me and my office co-workers to search your website particularly 3 times a week to study the new things you will have. And indeed, I am also certainly contented with your spectacular ideas you give. Certain 2 tips in this article are clearly the most effective we have all ever had.
This is very attention-grabbing, You’re an overly professional blogger. I’ve joined your rss feed and look forward to in the hunt for more of your excellent post. Also, I’ve shared your site in my social networks!
You are my breathing in, I have few blogs and very sporadically run out from to post : (.