A Pen by Ivan Grozdic on CodePen.
Last active
April 30, 2024 06:49
-
-
Save webramin/9552a97fe57831d592725ac41ce2946a to your computer and use it in GitHub Desktop.
Back to top with progress indicator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="section"> | |
<div class="center-wrap"> | |
<h1 class="text-center">Scroll</h1> | |
<p class="text-center mb-0">Look at the right bottom corner<span class="color-gradient-red-yellow"><i class="uil uil-chart-down size-22 ml-2"></i></span></p> | |
</div> | |
</div> | |
<div class="section"> | |
</div> | |
<div class="section"> | |
</div> | |
<a class="navbar-brand" href="https://front.codes" target="_blank"> | |
<img src="https://assets.codepen.io/1462889/fcy.png" alt="FrontCodes Logo"> | |
</a> | |
<div class="switch"> | |
<div class="circle"></div> | |
</div> | |
<div class="progress-wrap"> | |
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"> | |
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/> | |
</svg> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Please ❤ this if you like it! */ | |
(function($) { "use strict"; | |
//Switch dark/light | |
$(".switch").on('click', function () { | |
if ($("body").hasClass("light")) { | |
$("body").removeClass("light"); | |
$(".switch").removeClass("switched"); | |
} | |
else { | |
$("body").addClass("light"); | |
$(".switch").addClass("switched"); | |
} | |
}); | |
$(document).ready(function(){"use strict"; | |
//Scroll back to top | |
var progressPath = document.querySelector('.progress-wrap path'); | |
var pathLength = progressPath.getTotalLength(); | |
progressPath.style.transition = progressPath.style.WebkitTransition = 'none'; | |
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; | |
progressPath.style.strokeDashoffset = pathLength; | |
progressPath.getBoundingClientRect(); | |
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear'; | |
var updateProgress = function () { | |
var scroll = $(window).scrollTop(); | |
var height = $(document).height() - $(window).height(); | |
var progress = pathLength - (scroll * pathLength / height); | |
progressPath.style.strokeDashoffset = progress; | |
} | |
updateProgress(); | |
$(window).scroll(updateProgress); | |
var offset = 50; | |
var duration = 550; | |
jQuery(window).on('scroll', function() { | |
if (jQuery(this).scrollTop() > offset) { | |
jQuery('.progress-wrap').addClass('active-progress'); | |
} else { | |
jQuery('.progress-wrap').removeClass('active-progress'); | |
} | |
}); | |
jQuery('.progress-wrap').on('click', function(event) { | |
event.preventDefault(); | |
jQuery('html, body').animate({scrollTop: 0}, duration); | |
return false; | |
}) | |
}); | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Please ❤ this if you like it! */ | |
@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese'); | |
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext'); | |
:root { | |
font-size: 20px; | |
--red: #da2c4d; | |
--yellow: #f8ab37; | |
--green: #2ecc71; | |
--white: #ffffff; | |
--grey-light: #f2f7f9; | |
--grey: #ecedf3; | |
--black: #080808; | |
--black-blue: #1f2029; | |
--black-blue-light: #353746; | |
--black-blue-light-2: #404255; | |
--black-blue-light-3: #4b4d64; | |
--black-light: #424455; | |
} | |
body{ | |
font-family: 'Raleway', sans-serif; | |
font-size: 16px; | |
font-weight: 500; | |
line-height: 1.65; | |
color: var(--grey); | |
background-color: var(--black-blue); | |
overflow-x: hidden; | |
letter-spacing: 0.2px; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
text-rendering: optimizeLegibility !important; | |
-webkit-font-smoothing: antialiased !important; | |
} | |
body.light{ | |
color: var(--black-light); | |
} | |
h1{ | |
font-family: 'Muli', sans-serif; | |
font-size: 12vw; | |
font-weight: 900; | |
line-height: 1; | |
color: var(--white); | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
body.light h1{ | |
color: var(--black); | |
} | |
body.light{ | |
background-color: var(--white); | |
} | |
.navbar-brand{ | |
height: 36px; | |
position: fixed; | |
top: 50px; | |
left: 70px; | |
z-index: 3333; | |
width: auto; | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
-webkit-transition : all 0.3s ease-out; | |
transition : all 0.3s ease-out; | |
} | |
.navbar-brand::before{ | |
position: absolute; | |
content: ''; | |
top: -13px; | |
left: 50%; | |
width: 80px; | |
transform: translateX(-50%); | |
height: calc(100% + 26px); | |
opacity: 0; | |
z-index: -1; | |
background-image: linear-gradient(260deg, var(--grey), var(--grey-light)); | |
animation: border-transform 10s linear infinite alternate forwards; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
.navbar-brand::after{ | |
position: absolute; | |
content: ''; | |
top: -13px; | |
left: 50%; | |
width: 80px; | |
transform: translateX(-50%); | |
height: calc(100% + 26px); | |
opacity: 1; | |
z-index: -1; | |
background-image: linear-gradient(160deg, var(--black-blue-light-3), var(--black-blue-light)); | |
animation: border-transform 10s linear infinite alternate forwards; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
.navbar-brand img{ | |
padding: 7px 0; | |
height: 100%; | |
width: auto; | |
display: block; | |
-webkit-transition : all 0.3s ease-out; | |
transition : all 0.3s ease-out; | |
} | |
@-webkit-keyframes border-transform{ | |
0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } | |
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } | |
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } | |
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } | |
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } | |
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } | |
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } | |
} | |
@keyframes border-transform{ | |
0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } | |
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } | |
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } | |
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } | |
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } | |
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } | |
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } | |
} | |
body.light .navbar-brand::before{ | |
opacity: 1; | |
} | |
body.light .navbar-brand::after{ | |
opacity: 0; | |
} | |
.section { | |
position: relative; | |
width: 100%; | |
display: block; | |
overflow: hidden; | |
height: 100vh; | |
} | |
.center-wrap { | |
position: absolute; | |
width: 100%; | |
display: block; | |
overflow: hidden; | |
left: 0; | |
top: 50%; | |
transform: translateY(-50%); | |
z-index: 2; | |
} | |
.color-gradient-red-yellow { | |
background: linear-gradient(160deg, var(--red), var(--yellow)); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
.color-gradient-red-yellow .uil:before { | |
background: linear-gradient(160deg, var(--red), var(--yellow)); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
.size-22 { | |
font-size: 22px; | |
} | |
/* #Progress | |
================================================== */ | |
.progress-wrap { | |
position: fixed; | |
right: 50px; | |
bottom: 50px; | |
height: 46px; | |
width: 46px; | |
cursor: pointer; | |
display: block; | |
border-radius: 50px; | |
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); | |
z-index: 10000; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(15px); | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
.progress-wrap.active-progress { | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.progress-wrap::after { | |
position: absolute; | |
font-family: 'unicons'; | |
content: '\e84b'; | |
text-align: center; | |
line-height: 46px; | |
font-size: 24px; | |
color: var(--grey); | |
left: 0; | |
top: 0; | |
height: 46px; | |
width: 46px; | |
cursor: pointer; | |
display: block; | |
z-index: 1; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
.progress-wrap:hover::after { | |
opacity: 0; | |
} | |
.progress-wrap::before { | |
position: absolute; | |
font-family: 'unicons'; | |
content: '\e84b'; | |
text-align: center; | |
line-height: 46px; | |
font-size: 24px; | |
opacity: 0; | |
background-image: linear-gradient(298deg, var(--red), var(--yellow)); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
left: 0; | |
top: 0; | |
height: 46px; | |
width: 46px; | |
cursor: pointer; | |
display: block; | |
z-index: 2; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
.progress-wrap:hover::before { | |
opacity: 1; | |
} | |
.progress-wrap svg path { | |
fill: none; | |
} | |
.progress-wrap svg.progress-circle path { | |
stroke: var(--grey); | |
stroke-width: 4; | |
box-sizing:border-box; | |
-webkit-transition: all 200ms linear; | |
transition: all 200ms linear; | |
} | |
body.light .progress-wrap { | |
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2); | |
} | |
body.light .progress-wrap::after { | |
color: var(--black-blue); | |
} | |
body.light .progress-wrap svg.progress-circle path { | |
stroke: var(--black-blue); | |
} | |
.switch, | |
.circle { | |
-webkit-transition: all 300ms linear; | |
transition: all 300ms linear; | |
} | |
.switch { | |
width: 80px; | |
height: 4px; | |
border-radius: 27px; | |
background-image: linear-gradient(298deg, var(--red), var(--yellow)); | |
position: fixed; | |
right: 50px; | |
top: 75px; | |
display: block; | |
margin: 0 auto; | |
text-align: center; | |
opacity: 1; | |
z-index: 33333; | |
transition: all 300ms linear; | |
} | |
.circle { | |
cursor: pointer; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
left: -5px; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: var(--black-blue-light-3); | |
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); | |
animation: border-transform 10s linear infinite alternate forwards; | |
} | |
.circle:hover { | |
box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); | |
} | |
.circle:before { | |
position: absolute; | |
font-family: 'unicons'; | |
content: '\eac1'; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
font-size: 20px; | |
line-height: 40px; | |
text-align: center; | |
width: 100%; | |
height: 40px; | |
opacity: 1; | |
color: var(--grey); | |
-webkit-transition: all 300ms linear; | |
transition: all 300ms linear; | |
} | |
.circle:after { | |
position: absolute; | |
font-family: 'unicons'; | |
content: '\eb8f'; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
font-size: 20px; | |
line-height: 40px; | |
text-align: center; | |
width: 100%; | |
height: 40px; | |
color: var(--yellow); | |
opacity: 0; | |
-webkit-transition: all 300ms linear; | |
transition: all 300ms linear; | |
} | |
.switched { | |
} | |
.switched .circle { | |
left: 45px; | |
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); | |
background: var(--black-blue); | |
} | |
.switched .circle:hover { | |
box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); | |
} | |
.switched .circle:before { | |
opacity: 0; | |
} | |
.switched .circle:after { | |
opacity: 1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment