Вертикальная шкала времени с записями на CSS3 и Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
body { margin: 0px; color: #fff; font-family: tahoma; } .timeline *, timeline *::before, timeline *::after { margin: 0; padding: 0; box-sizing: border-box; } /* TIMELINE –––––––––––––––––––––––––––––––––––––––––––––––––– */ .timeline ul { padding: 50px 0; } .timeline ul li { list-style-type: none; position: relative; width: 6px; margin: 0 auto; padding-top: 50px; background: #a3a; } .timeline ul li::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: inherit; } .timeline ul li div { position: relative; bottom: 0; width: 400px; padding: 15px; background: #F45B69; } .timeline ul li div::before { content: ''; position: absolute; bottom: 7px; width: 0; height: 0; border-style: solid; } .timeline ul li:nth-child(odd) div { left: 45px; } .timeline ul li:nth-child(odd) div::before { left: -15px; border-width: 8px 16px 8px 0; border-color: transparent #F45B69 transparent transparent; } .timeline ul li:nth-child(even) div { left: -439px; } .timeline ul li:nth-child(even) div::before { right: -15px; border-width: 8px 0 8px 16px; border-color: transparent transparent transparent #F45B69; } time { display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 8px; } /* EFFECTS –––––––––––––––––––––––––––––––––––––––––––––––––– */ .timeline ul li::after { transition: background .5s ease-in-out; } .timeline ul li.in-view::after { background: #F45B69; } .timeline ul li div { visibility: hidden; opacity: 0; transition: all .5s ease-in-out; } .timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0); } .timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0); } .timeline ul li.in-view div { transform: none; visibility: visible; opacity: 1; } /* GENERAL MEDIA QUERIES –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (max-width: 900px) { .timeline ul li div { width: 250px; } .timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/ } } @media screen and (max-width: 600px) { .timeline ul li { margin-left: 20px; } .timeline ul li div { width: calc(100vw - 91px); } .timeline ul li:nth-child(even) div { left: 45px; } .timeline ul li:nth-child(even) div::before { left: -15px; border-width: 8px 16px 8px 0; border-color: transparent #F45B69 transparent transparent; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<section class="timeline"> <ul> <li> <div> <time>1</time> Это текст первого блока </div> </li> <li> <div> <time>2</time> Это текст второго блока </div> </li> <li> <div> <time>3</time> Это текст третьего блока </div> </li> <li> <div> <time>4</time> Это текст четвёртого блока </div> </li> <li> <div> <time>5</time> Это текст пятого блока </div> </li> <li> <div> <time>6</time> Это текст шестого блока </div> </li> <li> <div> <time>7</time> Это текст седьмого блока </div> </li> <li> <div> <time>8</time> Это текст восьмого блока </div> </li> <li> <div> <time>9</time> Это текст девятого блока </div> </li> <li> <div> <time>10</time> Это текст десятого блока </div> </li> <li> <div> <time>11</time> Это текст одиннадцатого блока </div> </li> <li> <div> <time>12</time> Это текст двенадцатого блока </div> </li> </ul> </section> <script> (function() { // define variables var items = document.querySelectorAll(".timeline li"); // check if an element is in viewport // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)); } function callbackFunc() { for (var i = 0; i < items.length; i++) { if (isElementInViewport(items[i])) { items[i].classList.add("in-view"); } } } // listen for events window.addEventListener("load", callbackFunc); window.addEventListener("resize", callbackFunc); window.addEventListener("scroll", callbackFunc); })(); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
