Случайные эффекты прокрутки для сайта с помощью JS

В последнее время стали весьма популярны одностраничные сайты, но простая одна страница мало чем может удивить посетителя, по этому дизайнеры переходят на высшую степень мастерства и украшают сайты различными переходами от материала к материалу. Такие эффекты бывают на столько разнообразными, что тяжело угадать, что можно придумать в этот раз. В данном уроке мы рассмотрим как создать такую одну страницу, но с различными эффектами. Мы сделаем прокрутку еще увлекательней для посетителя Вашего ресурса.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Мы решили объединить все известные ранее нам приемы, чтобы получить одну страницу с различными эффектами. Такая страница явно заинтересует посетителя. И так, давайте приступим.

Шаг 1. HTML

Разметка будет слегка запутанной на первый взгляд, но если посмотреть детальнее, то у нас каждый класс отвечает за определенное действие, которое мы указываем в стилям и функциях:

<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>

<span class="scroll-down">ПРОКРУТИ ВНИЗ</span>

<div class="word wow">ЗДРАВСТВУЙТЕ</div>

</div>

</div>

<div class="word very-scroll">КРУТИТЕ ДАЛЬШЕ</div>

</div>

</div>

Нам просто необходимо указать в правильной по очередности то, что мы хотим видеть на странице, и отредактировать его, если в этом есть необходимость.

Шаг 2. CSS

Со стилями все интересней, нам необходимо указать не только общие параметры контейнера, но и определить порядок трансформации в пространстве, и манипуляции текстом:

.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);
}
}
}
}
}

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:

'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)");
};
});

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)");

};

});

Стоит отметить, что это экспериментальный вариант, по этому может не корректно работать в некоторых устаревших браузерах.

Случайные эффекты прокрутки для сайта на JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Случайные эффекты прокрутки для сайта на JS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи