Все для веб-дизайнера
Случайные эффекты прокрутки для сайта на JS
В последнее время стали весьма популярны одностраничные сайты, но простая одна страница мало чем может удивить посетителя, по этому дизайнеры переходят на высшую степень мастерства и украшают сайты различными переходами от материала к материалу. Такие эффекты бывают на столько разнообразными, что тяжело угадать, что можно придумать в этот раз. В данном уроке мы рассмотрим как создать такую одну страницу, но с различными эффектами. Мы сделаем прокрутку еще увлекательней для посетителя Вашего ресурса.
Мы решили объединить все известные ранее нам приемы, чтобы получить одну страницу с различными эффектами. Такая страница явно заинтересует посетителя. И так, давайте приступим.
Шаг 1. HTML
Разметка будет слегка запутанной на первый взгляд, но если посмотреть детальнее, то у нас каждый класс отвечает за определенное действие, которое мы указываем в стилям и функциях:
|
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 |
<div class="main"> <div class="cont container"> <div class="opening top"></div> <div class="opening bot"></div> <span class="scroll-down">ПРОКРУТИ ВНИЗ</span> <div class="rotater front"> <div class="word wow">ЗДРАВСТВУЙТЕ</div> </div> <div class="cont-bg original"></div> <div class="cont-bg replace"></div> <div class="cont-overlay"></div> </div> <div class="second-cont container"> <div class="cont-bg back-original"></div> <div class="cont-bg back-replace"></div> <div class="rotater back"> <div class="word very-scroll">КРУТИТЕ ДАЛЬШЕ</div> </div> <div class="rotater end"> <div class="word the-end"> <span class="letter">К</span> <span class="letter">О</span> <span class="letter">Н</span> <span class="letter">Е</span> <span class="letter">Ц</span> </div> </div> </div> </div> |
Нам просто необходимо указать в правильной по очередности то, что мы хотим видеть на странице, и отредактировать его, если в этом есть необходимость.
Шаг 2. CSS
Со стилями все интересней, нам необходимо указать не только общие параметры контейнера, но и определить порядок трансформации в пространстве, и манипуляции текстом:
|
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 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
.main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; perspective: 2000; transform-style: preserve-3d; } .container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform 0.2s; will-change: transform; backface-visibility: hidden; } .cont { z-index: 5; } .second-cont { transform: rotateY(180deg); } .cont-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s; will-change: opacity; &.original { background: linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%); } &.replace { opacity: 0; background: linear-gradient(45deg, #131212 0%, rgba(225, 5, 34, 0) 70%), linear-gradient(135deg, #CBDDDD 10%, rgba(49, 5, 209, 0) 80%), linear-gradient(225deg, #2A3636 10%, rgba(10, 219, 216, 0) 80%), linear-gradient(315deg, #30752F 100%, rgba(9, 245, 5, 0) 70%); } &.back-original { background: linear-gradient(45deg, hsla(215, 94%, 42%, 1) 0%, hsla(215, 94%, 42%, 0) 70%), linear-gradient(135deg, hsla(194, 99%, 44%, 1) 10%, hsla(194, 99%, 44%, 0) 80%), linear-gradient(225deg, hsla(14, 91%, 48%, 1) 10%, hsla(14, 91%, 48%, 0) 80%), linear-gradient(315deg, hsla(204, 99%, 49%, 1) 100%, hsla(204, 99%, 49%, 0) 70%); } &.back-replace { opacity: 0; background: linear-gradient(45deg, hsla(334, 100%, 50%, 1) 0%, hsla(334, 100%, 50%, 0) 70%), linear-gradient(135deg, hsla(185, 100%, 49%, 1) 10%, hsla(185, 100%, 49%, 0) 80%), linear-gradient(225deg, hsla(180, 95%, 50%, 1) 10%, hsla(180, 95%, 50%, 0) 80%), linear-gradient(315deg, hsla(195, 93%, 45%, 1) 100%, hsla(195, 93%, 45%, 0) 70%); } } .scroll-down { position: absolute; z-index: 1000; font-size: 4em; line-height: 1; color: #f29c54; text-transform: uppercase; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: transform 0.2s; will-change: transform; @media screen and (max-width: 768px) { & { font-size: 1.5em; } } } .cont-overlay { position: relative; width: 100%; height: 100%; background: rgba(0,0,0, 0.5); transition: background-color 0.2s; will-change: background-color; } .opening { position: absolute; z-index: 5; left: 0; width: 100%; height: 50%; overflow: hidden; background-color: rgba(0,0,0, 0.5); transition: transform 0.2s; will-change: transform; &.top { top: 0; } &.bot { top: 50%; } &:before { content: ""; position: absolute; z-index: 5; left: 0; width: 100%; height: 200%; display: block; background-size: cover; background-image: url('/mFR9Ccw.jpg'); } &.top:before { top: 0; } &.bot:before { top: -100%; } } .rotater { position: absolute; z-index: 100; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: transform 0.2s; will-change: transform; .word { position: relative; font-size: 5rem; font-family: Droid Sans; text-transform: uppercase; opacity: 0; will-change: opacity, transform; color: #000; @supports (-webkit-text-stroke: 2px rgba(255,255,255,0.6)) { color: transparent; } -webkit-text-stroke: 2px rgba(255,255,255,0.6); transition: transform 0.2s; &.wow { transform: translateX(-20rem); } &.very-scroll { transform: translateY(12rem); } &.the-end { opacity: 1; .letter { opacity: 0; display: inline-block; transition: opacity 0.2s, transform 0.2s; will-change: opacity, transform; &:nth-child(1) { transform: translateX(-12rem) translateY(-24rem); } &:nth-child(2) { transform: translateX(12rem) translateY(24rem); } &:nth-child(3) { transform: translateY(-24rem); } &:nth-child(5) { transform: translateY(24rem); } &:nth-child(6) { transform: translateX(12rem) translateY(-24rem); } &:nth-child(7) { transform: translateX(-12rem) translateY(24rem); } } } } } |
Также мы подключил изображение, для контейнера которого установим центровой разрез при прокрутке и появление текста.
Шаг 3. JS
Всю основную работу будет выполнять функции js, нам необходимо активировать все элементы, и установить работоспособнобность при прокрутке, не стоит забывать, что мы будем манипулировать плоскостями по оси координат при прокрутке и вращением теста на 360 градусов, это позволит нам реализовать JS:
|
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 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 |
'use strict'; $(document).ready(function() { function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; }; var $openTop = $(".opening.top"), $openBot = $(".opening.bot"), $scrollDown = $(".scroll-down"), $contOverlay = $(".cont-overlay"), $bgOriginal = $(".cont-bg.original"), $bgReplace = $(".cont-bg.replace"), $bgBackOriginal = $(".cont-bg.back-original"), $bgBackReplace = $(".cont-bg.back-replace"), $cont = $(".cont"), $secondCont = $(".second-cont"), $rotaterFront = $(".rotater.front"), $wow = $(".wow"), $veryScroll = $(".very-scroll"), curScroll = 0; $(document).on("mousewheel DOMMouseScroll", function(e) { if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { scrollUp(); } else { scrollDown(); } }); var scrollUp = debounce(function() { if (curScroll > 0) curScroll--; if (curScroll >= 0 && curScroll < 6) { firstFive(curScroll); } if (curScroll >= 5 && curScroll <= 10) { secondFive(curScroll); } if (curScroll >= 10 && curScroll <= 15) { thirdFive(curScroll); } if (curScroll >= 15 && curScroll <= 20) { fourthFive(curScroll); } if (curScroll >= 20 && curScroll <= 25) { fifthFive(curScroll); } }, 40); var scrollDown = debounce(function() { if (curScroll < 35) curScroll++; if (curScroll <= 5) { firstFive(curScroll); } if (curScroll >= 6 && curScroll <= 10) { secondFive(curScroll); } if (curScroll >= 11 && curScroll <= 15) { thirdFive(curScroll); } if (curScroll >= 16 && curScroll <= 20) { fourthFive(curScroll); } if (curScroll >= 21 && curScroll <= 25) { fifthFive(curScroll); } }, 40); function firstFive(step) { $openTop.css("transform", "translateY("+ (0 - 20 * step) +"%)"); $openBot.css("transform", "translateY("+ (20 * step) +"%)"); $scrollDown.css("transform", "translateX(-50%) translateY(-50%) scale("+ (1 - 0.2 * step) +")"); $contOverlay.css("background-color", "rgba(0,0,0, "+ (0.5 - 0.1 * step) +")"); $wow.css("opacity", step * 0.2); }; function secondFive(step) { var realStep = step - 5; $bgOriginal.css("opacity", 1 - 0.2 * realStep); $bgReplace.css("opacity", 0 + 0.2 * realStep); $openTop.css("transform", "translateY("+ (0 - 20 * step) +"%)"); $openBot.css("transform", "translateY("+ (20 * step) +"%)"); $rotaterFront.css("transform", "translateX(-50%) translateY(-50%) rotate("+ (realStep * 36) +"deg)"); }; function thirdFive(step) { var realStep = step - 10; $cont.css("transform", "rotateY("+ (realStep * 36) +"deg)"); $secondCont.css("transform", "rotateY("+ (180 + realStep * 36) +"deg)"); $wow.css("opacity", 1 - realStep * 0.2); $veryScroll.css("opacity", realStep * 0.2); }; function fourthFive(step) { var realStep = step - 15; $bgBackOriginal.css("opacity", 1 - 0.2 * realStep); $bgBackReplace.css("opacity", 0 + 0.2 * realStep); $veryScroll.css("transform", "translateY("+ (12 - realStep * 2.4) +"rem) rotateX("+ realStep * 180 +"deg)"); }; function fifthFive(step) { var realStep = step - 20; $veryScroll.css("transform", "translateY("+ (0 - realStep * 2.4) +"rem) rotateX("+ realStep * 180 +"deg) rotateY("+ (realStep * 180) +"deg)"); }; });'use strict'; $(document).ready(function() { function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; }; var $openTop = $(".opening.top"), $openBot = $(".opening.bot"), $scrollDown = $(".scroll-down"), $contOverlay = $(".cont-overlay"), $bgOriginal = $(".cont-bg.original"), $bgReplace = $(".cont-bg.replace"), $bgBackOriginal = $(".cont-bg.back-original"), $bgBackReplace = $(".cont-bg.back-replace"), $cont = $(".cont"), $secondCont = $(".second-cont"), $rotaterFront = $(".rotater.front"), $wow = $(".wow"), $veryScroll = $(".very-scroll"), $theEnd = $(".the-end"), curScroll = 0; $(document).on("mousewheel DOMMouseScroll", function(e) { if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { scrollUp(); } else { scrollDown(); } }); var scrollUp = debounce(function() { if (curScroll > 0) curScroll--; if (curScroll >= 0 && curScroll < 6) { firstFive(curScroll); } if (curScroll >= 5 && curScroll <= 10) { secondFive(curScroll); } if (curScroll >= 10 && curScroll <= 15) { thirdFive(curScroll); } if (curScroll >= 15 && curScroll <= 20) { fourthFive(curScroll); } if (curScroll >= 20 && curScroll <= 25) { fifthFive(curScroll); } if (curScroll >= 25 && curScroll <= 33) { preLast(curScroll); } if (curScroll >= 33 && curScroll <= 35) { last(curScroll); } }, 30); var scrollDown = debounce(function() { if (curScroll < 35) curScroll++; if (curScroll <= 5) { firstFive(curScroll); } if (curScroll >= 6 && curScroll <= 10) { secondFive(curScroll); } if (curScroll >= 11 && curScroll <= 15) { thirdFive(curScroll); } if (curScroll >= 16 && curScroll <= 20) { fourthFive(curScroll); } if (curScroll >= 21 && curScroll <= 25) { fifthFive(curScroll); } if (curScroll >= 26 && curScroll <= 33) { preLast(curScroll); } if (curScroll >= 34 && curScroll <= 35) { last(curScroll); } }, 30); function firstFive(step) { $openTop.css("transform", "translateY("+ (0 - 20 * step) +"%)"); $openBot.css("transform", "translateY("+ (20 * step) +"%)"); $scrollDown.css("transform", "translateX(-50%) translateY(-50%) scale("+ (1 - 0.2 * step) +")"); $contOverlay.css("background-color", "rgba(0,0,0, "+ (0.5 - 0.1 * step) +")"); $wow.css("opacity", step * 0.2); }; function secondFive(step) { var realStep = step - 5; $bgOriginal.css("opacity", 1 - 0.2 * realStep); $bgReplace.css("opacity", 0 + 0.2 * realStep); $openTop.css("transform", "translateY("+ (0 - 20 * step) +"%)"); $openBot.css("transform", "translateY("+ (20 * step) +"%)"); $rotaterFront.css("transform", "translateX(-50%) translateY(-50%) rotate("+ (realStep * 36) +"deg)"); }; function thirdFive(step) { var realStep = step - 10; $cont.css("transform", "rotateY("+ (realStep * 36) +"deg)"); $secondCont.css("transform", "rotateY("+ (180 + realStep * 36) +"deg)"); $wow.css("opacity", 1 - realStep * 0.2); $veryScroll.css("opacity", realStep * 0.2); }; function fourthFive(step) { var realStep = step - 15; $bgBackOriginal.css("opacity", 1 - 0.2 * realStep); $bgBackReplace.css("opacity", 0 + 0.2 * realStep); $veryScroll.css("transform", "translateY("+ (12 - realStep * 2.4) +"rem) rotateX("+ realStep * 180 +"deg)"); }; function fifthFive(step) { var realStep = step - 20; $veryScroll.css("transform", "translateY("+ (0 - realStep * 2.4) +"rem) rotateX("+ realStep * 180 +"deg) rotateY("+ (realStep * 180) +"deg)"); }; function preLast(step) { var realStep = step - 25; if (realStep < 3) { $theEnd.find(".letter").css("opacity", realStep * 0.5); $veryScroll.css("opacity", 1 - realStep * 0.5); }; $theEnd.find(".letter:eq(0)").css("transform", "translateX("+ (2 * realStep - 12) +"rem) translateY("+ (4 * realStep - 24) +"rem)"); $theEnd.find(".letter:eq(1)").css("transform", "translateX("+ (12 - 2 * realStep) +"rem) translateY("+ (24 - 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(2)").css("transform", "translateY("+ (-24 + 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(4)").css("transform", "translateY("+ (24 - 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(5)").css("transform", "translateX("+ (12 - 2 * realStep) +"rem) translateY("+ (-24 + 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(6)").css("transform", "translateX("+ (-12 + 2 * realStep) +"rem) translateY("+ (24 - 4 * realStep) +"rem)"); }; function last(step) { var realStep = step - 33; $theEnd.find(".letter:eq(0)").css("transform", "translateX("+ (4 - 2 * realStep) +"rem) translateY("+ (8 - 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(1)").css("transform", "translateX("+ (-4 + 2 * realStep) +"rem) translateY("+ (-8 + 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(2)").css("transform", "translateY("+ (8 - 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(4)").css("transform", "translateY("+ (-8 + 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(5)").css("transform", "translateX("+ (-4 + 2 * realStep) +"rem) translateY("+ (8 - 4 * realStep) +"rem)"); $theEnd.find(".letter:eq(6)").css("transform", "translateX("+ (4 - 2 * realStep) +"rem) translateY("+ (-8 + 4 * realStep) +"rem)"); }; }); |
Стоит отметить, что это экспериментальный вариант, по этому может не корректно работать в некоторых устаревших браузерах.
Вот и все. Готово!
| Опубликовал Cooper 30.09.2014 в 15:12, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
