Marlena Bobowska

  /  Uncategorized   /  scroll down

scroll down

<div class=”scroll-down-wrap no-border”>
<a href=”#” class=”section-down-arrow „><svg class=”nectar-scroll-icon” viewBox=”0 0 30 45″ enable-background=”new 0 0 30 45″>
<path class=”nectar-scroll-icon-path” fill=”none” stroke=”#ffffff” stroke-width=”2″ stroke-miterlimit=”10″ d=”M15,1.118c12.352,0,13.967,12.88,13.967,12.88v18.76 c0,0-1.514,11.204-13.967,11.204S0.931,32.966,0.931,32.966V14.05C0.931,14.05,2.648,1.118,15,1.118z”></path></div>
</svg></a>

 

 

/*———————— scroll animated mouse ————————*/
body[data-button-style^=”rounded”] .scroll-down-wrap.no-border, .scroll-down-wrap.no-border {
bottom: 12px;
}
.section-down-arrow, body[data-button-style^=”rounded”] .scroll-down-wrap, .scroll-down-wrap.no-border {
position: absolute;
bottom: 20px;
left: 50%;
width: 60px;
margin-left: -30px;
z-index: 101;
}
.scroll-down-wrap.no-border .section-down-arrow, .nectar-next-section-wrap.mouse-wheel .nectar-next-section, .slider-down-arrow.no-border {
border: none !important;
overflow: visible;
text-align: center;
opacity: 1;
height: auto;
bottom: 13px;
-webkit-animation: nudgeMouse 2.4s cubic-bezier(.25,.46,.45,.94) infinite;
animation: nudgeMouse 2.4s cubic-bezier(.25,.46,.45,.94) infinite;
}
body[data-button-style^=”rounded”] .section-down-arrow, .nectar-next-section-wrap.mouse-wheel .nectar-next-section, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section, .scroll-down-wrap.no-border .section-down-arrow {
display: inline-block;
width: 49px;
height: 49px;
color: #fff !important;
border: 2px solid #fff;
text-align: center;
line-height: 50px;
border-radius: 100px;
font-size: 25px;
-webkit-border-radius: 100px;
transition: opacity .4s ease;
-webkit-transition: opacity .4s ease;
overflow: hidden;
margin-left: 0;
left: 0;
bottom: 16px;
opacity: .6;
}
.section-down-arrow, body[data-button-style^=”rounded”] .scroll-down-wrap, .scroll-down-wrap.no-border {
position: absolute;
bottom: 20px;
left: 50%;
width: 60px;
margin-left: -30px;
z-index: 101;
}
.scroll-down-wrap.no-border .section-down-arrow::before, .nectar-next-section-wrap.mouse-wheel .nectar-next-section::before, .slider-down-arrow.no-border::before {
position: absolute;
content: ”;
display: block;
left: 50%;
margin-left: -1px;
top: 22px;
background-color: rgba(255,255,255,.5);
width: 2px;
height: 6px;
border-radius: 10px;
transition: background-color .55s cubic-bezier(.5,.1,.07,1);
-webkit-animation: trackBallSlide 2.4s cubic-bezier(0,0,.725,1) infinite;
animation: trackBallSlide 2.4s cubic-bezier(0,0,.725,1) infinite;
}
.nectar-scroll-icon {
width: 30px;
height: 45px;
text-align: center;
cursor: pointer;
position: relative;
z-index: 100;
}
.nectar-scroll-icon-path {
fill: transparent;
stroke-width: 2px;
stroke-dashoffset: 120;
stroke-dasharray: 120;
-webkit-animation: mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);
animation: mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);
}
.nectar-scroll-icon {
text-align: center;
cursor: pointer;
}
.scroll-down-wrap.no-border .section-down-arrow::after, .nectar-next-section-wrap.mouse-wheel .nectar-next-section::after, .slider-down-arrow.no-border::after {
content: „”;
position: absolute;
top: 0;
left: 50%;
display: block;
width: 30px;
height: 45px;
margin-left: -15px;
border: 2px solid rgba(255,255,255,.5);
border-radius: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 62;
}
.scroll-down-wrap.no-border .section-down-arrow, .nectar-next-section-wrap.mouse-wheel .nectar-next-section, .slider-down-arrow.no-border {
text-align: center;
}
.scroll-down-wrap.no-border:hover .nectar-scroll-icon-path, .nectar-next-section:hover .nectar-scroll-icon-path, .slider-down-arrow.no-border:hover .nectar-scroll-icon-path {
stroke-dashoffset: 0;
-webkit-animation: mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1);
animation: mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1);
}
.scroll-down-wrap.hidden {
transform:translateY(55px);
-webkit-transform:translateY(55px);
opacity:0
}
.scroll-down-wrap {
transition:opacity .4s ease;
-webkit-transition:opacity .4s ease
}
.section-down-arrow, body[data-button-style^=rounded] .scroll-down-wrap, .scroll-down-wrap.no-border {
position:absolute;
bottom:0px;
left:50%;
width:60px;
margin-left:-30px;
z-index:101
}
body[data-button-style*=rounded] .scroll-down-wrap {
margin-left:-22px
}
body[data-button-style=default] .section-down-arrow i.icon-default-style[class^=icon-] {
height:60px!important;
width:60px;
font-size:20px!important;
color:#fff!important;
line-height:60px!important;
z-index:10;
animation:3.4s ease-in-out infinite fadebottom;
-webkit-animation:3.4s ease-in-out infinite fadebottom
}
body[data-button-style^=rounded] .section-down-arrow, .nectar-next-section-wrap.mouse-wheel .nectar-next-section, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section, .scroll-down-wrap.no-border .section-down-arrow {
display:inline-block;
width:49px;
height:49px;
color:#fff!important;
border:2px solid #fff;
text-align:center;
line-height:50px;
border-radius:100px;
font-size:25px;
-webkit-border-radius:100px;
transition:opacity .4s ease;
-webkit-transition:opacity .4s ease;
overflow:hidden;
margin-left:0;
left:0;
bottom:16px;
opacity:.6
}
body[data-button-style^=rounded] .section-down-arrow.hidden {
transform:translateY(55px);
-webkit-transform:translateY(55px);
opacity:0
}
body[data-button-style^=rounded] .section-down-arrow i, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section i {
transition:transform .2s ease;
-webkit-transition:transform .2s ease;
display:block;
color:#fff!important;
width:49px;
height:48px;
line-height:48px;
font-size:20px
}
body[data-button-style^=rounded] .nectar-box-roll .section-down-arrow i {
transition:none;
-webkit-transition:none
}
body[data-button-style^=rounded] .section-down-arrow:hover, body[data-button-style^=rounded] .section-down-arrow.hovered, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section:hover {
opacity:1
}
body[data-button-style^=rounded] .section-down-arrow i.fa-angle-down.top, body[data-button-style^=rounded] .section-down-arrow i.fa-angle-down, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section i {
-webkit-transform:translate(0,-48px);
-ms-transform:translate(0,-48px);
transform:translate(0,-48px)
}
body[data-button-style^=rounded] .section-down-arrow:hover i.fa-angle-down.top, body[data-button-style^=rounded] .section-down-arrow:hover i.fa-angle-down, body[data-button-style^=rounded] .section-down-arrow.hovered i.fa-angle-down.top, body[data-button-style^=rounded] .section-down-arrow.hovered i.fa-angle-down, .nectar-next-section-wrap.down-arrow-bordered .nectar-next-section:hover i {
-webkit-transform:translate(0,0px)!important;
-ms-transform:translate(0,0px)!important;
transform:translate(0,0px)!important
}
.scroll-down-wrap.no-border .section-down-arrow, .nectar-next-section-wrap.mouse-wheel .nectar-next-section, .slider-down-arrow.no-border {
border:none!important;
overflow:visible;
text-align:center;
opacity:1;
height:auto;
bottom:13px;
-webkit-animation:nudgeMouse 2.4s cubic-bezier(.25,.46,.45,.94) infinite;
animation:nudgeMouse 2.4s cubic-bezier(.25,.46,.45,.94) infinite
}
.nectar-scroll-icon-path {
fill:transparent;
stroke-width:2px;
stroke-dashoffset:120;
stroke-dasharray:120;
-webkit-animation:mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);
animation:mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1)
}
.nectar-scroll-icon {
width:30px;
height:45px;
text-align:center;
cursor:pointer;
position:relative;
z-index:100
}
.scroll-down-wrap.no-border .section-down-arrow:after, .nectar-next-section-wrap.mouse-wheel .nectar-next-section:after, .slider-down-arrow.no-border:after {
content:””;
position:absolute;
top:0;
left:50%;
display:block;
width:30px;
height:45px;
margin-left:-15px;
border:2px solid rgba(255,255,255,.5);
border-radius:30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
z-index:62
}
.scroll-down-wrap.no-border:hover .section-down-arrow:before, .slider-down-arrow.no-border:hover:before {
background-color:#fff
}
.scroll-down-wrap.no-border:hover .nectar-scroll-icon-path, .nectar-next-section:hover .nectar-scroll-icon-path, .slider-down-arrow.no-border:hover .nectar-scroll-icon-path {
stroke-dashoffset:0;
-webkit-animation:mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1);
animation:mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1)
}
@-webkit-keyframes mouse-scroll-btn-roll-over {
0% {
stroke-dashoffset:120
}
100% {
stroke-dashoffset:0
}
}
@keyframes mouse-scroll-btn-roll-over {
0% {
stroke-dashoffset:120
}
100% {
stroke-dashoffset:0
}
}
@-webkit-keyframes mouse-scroll-btn-roll-out {
0% {
stroke-dashoffset:0
}
100% {
stroke-dashoffset:-120
}
}
@keyframes mouse-scroll-btn-roll-out {
0% {
stroke-dashoffset:0
}
100% {
stroke-dashoffset:-120
}
}
.scroll-down-wrap.no-border .section-down-arrow:before, .nectar-next-section-wrap.mouse-wheel .nectar-next-section:before, .slider-down-arrow.no-border:before {
position:absolute;
content:”;
display:block;
left:50%;
margin-left:-1px;
top:22px;
background-color:rgba(255,255,255,.5);
width:2px;
height:6px;
border-radius:10px;
transition:background-color .55s cubic-bezier(.5,.1,.07,1);
-webkit-animation:trackBallSlide 2.4s cubic-bezier(0,0,.725,1) infinite;
animation:trackBallSlide 2.4s cubic-bezier(0,0,.725,1) infinite
}
@-webkit-keyframes trackBallSlide {
0% {
opacity:1;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
45% {
opacity:0;
-webkit-transform:scaleY(.5) translateY(13px);
transform:scaleY(.5) translateY(13px)
}
46% {
opacity:0;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
65%, 100% {
opacity:1;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
}
@keyframes trackBallSlide {
0% {
opacity:1;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
45% {
opacity:0;
-webkit-transform:scaleY(.5) translateY(13px);
transform:scaleY(.5) translateY(13px)
}
46% {
opacity:0;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
65%, 100% {
opacity:1;
-webkit-transform:scaleY(1) translateY(-10px);
transform:scaleY(1) translateY(-10px)
}
}
@keyframes nudgeMouse {
0% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
45% {
-webkit-transform:translateY(8px);
transform:translateY(8px)
}
65%, 100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@-webkit-keyframes nudgeMouse {
0% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
45% {
-webkit-transform:translateY(8px);
transform:translateY(8px)
}
65%, 100% {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

 

Post a Comment