분류 css

Back to top with progress indicator

컨텐츠 정보

  • 조회 445 (작성일 )

본문

https://codepen.io/ig_design/pen/yrwgwO 


HTML : 


<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://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/logo.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>


CSS : 




/* 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: 55px;

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;

}


Javascript : 




/* 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);