Горизонтальный скроллинг
Содержимое можно ограничить рамками блока HTML благодаря свойству CSS overflow. При этом выступающие элементы будут доступны при перемещении ползунка полосы прокрутки.
<style> .scrolling { margin: 0 auto; width: 30em; height: 10em; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* чтобы картинки стояли в одну линию, не переходя на другую строку */ word-wrap: normal; /* то же для IE */ } .scrolling img { width: 10em; height: 10em; } </style> <div class="scrolling"> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> </div>
На слайдере или галереи изображений часто можно увидеть стрелочки, смещающие блок div с картинками. Когда по нажатию на кнопку одно фото прячется, его место занимает следующее, а позади появляется скрытый рисунок.
<style> .element { margin: 0 auto; width: 30em; height: 10em; overflow: hidden; white-space: nowrap; word-wrap: normal; } .element img { width: 10em; height: 10em; transition: 999999s; /* чтобы не дать элементу вернуться в исходное состояние, время обратного смещения очень велико */ } .left:active ~ .element img, .right:active ~ .element img {transition: 2s linear;} .left:active ~ .element img {transform: translateX(0);} .right:active ~ .element img {transform: translateX(-20em);} </style> <button class="left">«</button><button class="right">»</button> <div class="element"> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> <img src="адрес_изо" alt=""/> </div>
Для того, чтобы плавно прокручивалась вся фотография целиком.
<style> [class^="scroll"] { position: relative; height: 10em; line-height: 10em; padding: 0 3em; } [class^="scroll"] input { display: none; } [class^="scroll"] div { height: 100%; overflow: hidden; white-space: nowrap; word-wrap: normal; font-size: 0; } [class^="scroll"] img { position: relative; right: 0em; width: 25%; height: 100%; transition: .5s; } [class^="scroll"] label { cursor: pointer; font-weight: 600; font-size: 3em; } [class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after, [class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after, [class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after, [class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after, [class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after, [class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after { content: "\3009"; position: absolute; right: 0; } [class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after, [class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after, [class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after, [class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after, [class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after, [class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after { content: "\3008"; position: absolute; left: 0; } [class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 25%;} [class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 50%;} [class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 75%;} [class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 100%;} [class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 125%;} [class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 150%;} </style> <div class="scroll"> <input type="radio" id="l0" name="raz" checked="checked"/> <input type="radio" id="l1" name="raz"/> <input type="radio" id="l2" name="raz"/> <input type="radio" id="l3" name="raz"/> <input type="radio" id="l4" name="raz"/> <input type="radio" id="l5" name="raz"/> <input type="radio" id="l6" name="raz"/> <label for="l0"></label> <label for="l1"></label> <label for="l2"></label> <label for="l3"></label> <label for="l4"></label> <label for="l5"></label> <label for="l6"></label> <div> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> </div> </div>
Красивый вертикальный скроллинг
Если нет необходимости в скролле, то тень не будет видна. Автор.
- Тени нет сверху.
- 2
- 3
- 4
- 5
- 6
- Начинаем прокручивать блок
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- Конец!
- Тут нет тени снизу.
<style> .scrollbox { overflow: auto; width: 200px; max-height: 200px; margin: 30px auto; background: linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } </style> <div class="scrollbox"> <ul> <li>Тени нет сверху.</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>Начинаем прокручивать блок</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>Конец!</li> <li>Тут нет тени снизу.</li> </ul> </div>
23 комментария:
только в мазилке работает.
И можно ли сделать, чтобы картинки шли в три ряда?
<div class="scroll">
<input type="radio" id="l0" name="raz" checked="checked"/>
<input type="radio" id="l1" name="raz"/>
<input type="radio" id="l2" name="raz"/>
<input type="radio" id="l3" name="raz"/>
<input type="radio" id="l4" name="raz"/>
<input type="radio" id="l5" name="raz"/>
<input type="radio" id="l6" name="raz"/>
<label for="l0"></label>
<label for="l1"></label>
<label for="l2"></label>
<label for="l3"></label>
<label for="l4"></label>
<label for="l5"></label>
<label for="l6"></label>
<div>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</div>
</div>
<div class="scroll1">
<input type="radio" id="h0" name="dva" checked="checked"/>
<input type="radio" id="h1" name="dva"/>
<input type="radio" id="h2" name="dva"/>
<input type="radio" id="h3" name="dva"/>
<input type="radio" id="h4" name="dva"/>
<input type="radio" id="h5" name="dva"/>
<input type="radio" id="h6" name="dva"/>
<label for="h0"></label>
<label for="h1"></label>
<label for="h2"></label>
<label for="h3"></label>
<label for="h4"></label>
<label for="h5"></label>
<label for="h6"></label>
<div>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</div>
</div>
Но у меня еще один вопрос - можно ли таким же образом сделать прокрутку не картинок, а div'ов с различным содержимым?
Идея была предложена ещё оперой в 2011 году http://people.opera.com/howcome/2011/reader/ , но сейчас интерес к газетному оформлению страниц возрос.
Нативная поддержка в цсс никак бы не тормозила)