Анимационные указатели прокрутки страницы


Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный. Вот такие анимационные стрелки мы сейчас и создадим с вами. И помогут нам в этом только CSS стили и никакого Javascript и, тем более, никакого jQuery.
1. Анимационные стрелки
HTML
<div class="container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<span class="text">Scroll down</span>
</div>
CSS
.chevron {
position: absolute;
width: 28px;
height: 8px;
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 3s ease-out infinite;
}
.chevron:first-child {
animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
content: ' ';
position: absolute;
top: 0;
height: 100%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
to {
opacity: 1;
}
}
DEMO
Прокрутите вниз
2. Скролл в виде компьютерной мыши с анимацией
HTML
<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>
CSS
.scroll-downs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width :34px;
height: 55px;
}
.mousey {
width: 3px;
padding: 10px 15px;
height: 35px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 0.75;
box-sizing: content-box;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
DEMO
3. Ещё три разновидности скролла
HTML
<div class="container">
<div class="field">
<div class="mouse"></div>
<div class="scroll"></div>
<div class="arrow"></div>
</div>
</div>
CSS
.field {
display: flex;
align-items: center;
justify-content: space-around;
width: 300px;
}
.mouse {
width: 50px;
height: 90px;
border: 3px solid #333;
border-radius: 60px;
position: relative;
&::before {
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
border-radius: 50%;
opacity: 1;
animation: wheel 2s infinite;
animation: wheel 2s infinite;
}
}
@keyframes wheel {
to {
opacity: 0;
top: 60px;
}
}
@-webkit-keyframes wheel {
to {
opacity: 0;
top: 60px;
}
}
.scroll {
width: 60px;
height: 60px;
border: 2px solid #333;
border-radius: 50%;
position: relative;
animation: down 1.5s infinite;
animation: down 1.5s infinite;
&::before {
content: '';
position: absolute;
top: 15px;
left: 18px;
width: 18px;
height: 18px;
border-left: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(-45deg);
}
}
@keyframes down {
0% {
transform: translate(0);
}
20% {
transform: translateY(15px);
}
40% {
transform: translate(0);
}
}
@-webkit-keyframes down {
0% {
transform: translate(0);
}
20% {
transform: translateY(15px);
}
40% {
transform: translate(0);
}
}
.arrow {
width: 0;
height: 40px;
border: 1px solid #333;
position: relative;
animation: scroll 1.5s infinite;
animation: scroll 1.5s infinite;
&::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: -5px;
width: 1px;
height: 10px;
// triangle
border-top: 10px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
}
@keyframes scroll {
0% {
height: 40px;
}
30% {
height: 70px;
}
60% {
height: 40px;
}
}
@-webkit-keyframes scroll {
0% {
height: 40px;
}
30% {
height: 70px;
}
60% {
height: 40px;
}
}
DEMO
4. Скролл с раходящимися лучами
HTML
<div class="arrow-container animated fadeInDown">
<div class="arrow-2">
<i class="fa fa-angle-down"></i>
</div>
<div class="arrow-1 animated hinge infinite zoomIn"></div>
</div>
CSS
.arrow-container{
width: 100px;
height: 100px;
margin: 0 auto;
position: absolute;
bottom: 25px;
left: 0;
right: 0;
}
.arrow-1{
width: 100px;
height: 100px;
background: #00BCD4;
opacity: 0.5;
border-radius: 50%;
position: absolute;
}
.arrow-2{
width: 60px;
height: 60px;
background: #00BCD4;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
display: table;
}
.arrow-2:before{
width: 52px;
height: 52px;
content: "";
border: 2px solid #006064;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
.arrow-2 i.fa{
font-size: 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
color: #006064;
}
/* Custom Animate.css */
.animated.hinge {
animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.4, .4, .4);
transform: scale3d(.4, .4, .4);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.4, .4, .4);
transform: scale3d(.4, .4, .4);
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.zoomIn {
animation-name: zoomIn;
animation-name: zoomIn;
}
DEMO
..
Скролл в виде анимационной стрелки
HTML
<div id="wrapper">
<div id="wrapper-inner">
<div id="scroll-down">
<span class="arrow-down">
<!-- css generated icon -->
</span>
<span id="scroll-title">
Scroll down
</span>
</div>
</div>
</div>
CSS
#wrapper {
display: table;
width:100%;
height:100%;
}
#wrapper-inner {
display: table-cell;
vertical-align:middle;
width:100%;
height:100%;
}
#scroll-down {
display: block;
position: relative;
padding-top: 79px;
text-align:center;
}
.arrow-down {
display: block;
margin: 0 auto;
width: 10px;
height: 38px;
}
.arrow-down:after {
content: '';
display: block;
margin: 0;
padding: 0;
width: 8px;
height: 8px;
border-top: 2px solid #b91a2f;
border-right: 2px solid #b91a2f;
behavior: url(-ms-transform.htc);
transform: rotate(135deg);
transform: rotate(135deg);
transform: rotate(135deg);
transform: rotate(135deg);
transform: rotate(135deg);
}
#scroll-title {
display: block;
text-transform: uppercase;
color: #b91a2f;
font-family: Helvetica Neue, Helvetica, Arial;
font-size:14px;
font-weight:bold;
letter-spacing:.1em;
}
#scroll-down::before {
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Safari 4+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Fx 5+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* Opera 12+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
/* IE 10+, Fx 29+ */
position: absolute;
top: 0px;
left: 50%;
margin-left: -1px;
width: 2px;
height: 90px;
background: #b91a2f;
content: ' ';
}
@-webkit-keyframes elasticus {
0% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
}
@-moz-keyframes elasticus {
0% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
}
@-o-keyframes elasticus {
0% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
}
@keyframes elasticus {
0% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
50% {
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform-origin: 0% 0%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
50.1% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform-origin: 0% 100%;
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
transform: scale(1, 0);
}
}
// codepen profile logo
#paschka {
display: block;
color:white;
font-family:helvetica neue, helvetica, arial;
font-size:32px;
text-decoration: none;
position: fixed;
bottom:0px;
right:0px;
padding:0px;
transition: all .1s ease;
background:#000;
height:40px;
line-height:30px;
vertical-align:middle;
width:40px;
text-align:center;
border-radius: 5%;
bottom:20px;
right:20px;
&:hover {
background:#232323;
transition:all .1s ease;
color:#f0f0f0;
}
}
DEMO
Scroll down