The image does not appear if I press the button using jquery - javascript

I'm developing a New Year greeting card and I would like to make an image appear from below after pressing the button that also starts the music.
How can I do it using jquery?
$(document).ready(function() {
$(".btn_music .fa-play-circle").on('click', function() {
$(this).hide();
$('.fa-pause-circle').fadeIn();
$('#myMusic')[0].play();
$("#container").fireworks({
sound: true, // sound effects
opacity: 0.55,
width: '90%',
height: '10%'
}).play();
$('#champagne').hide();
$('#champagne').slideToggle(1000);
});
$(".btn_music .fa-pause-circle").on('click', function() {
$(this).hide();
$('.fa-play-circle').fadeIn();
$('#myMusic')[0].pause();
});
});
body {
background: linear-gradient(#000, #01f);
font: 10.5em Arial;
}
html,
body {
height: 100%;
}
.stroke {
stroke: goldenrod;
stroke-width: 0.5px;
stroke-dasharray: 0 250;
stroke-opacity: 1;
fill: none;
animation: stroke_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#keyframes stroke_offset {
25% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
50% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
55% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
70% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
75% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
100% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
}
.fill {
fill: gold;
fill-opacity: 0;
animation: fill_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#keyframes fill_offset {
25% {
fill-opacity: 0;
}
35% {
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
70% {
fill-opacity: 1;
}
90% {
fill-opacity: 0;
}
100% {
fill-opacity: 0;
}
}
#fade-text {
font-family: 'Dancing Script', cursive;
font-size: 0.6em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.music {
position: absolute;
top: 22%;
left: 0;
right: 0;
margin: 0 auto;
}
.btn_music {
background-color: transparent;
color: #fff;
font-size: 85px;
border: none;
display: block;
margin: 0 auto;
opacity: .1;
transition: all linear .2s;
cursor: pointer;
outline: none;
}
.btn_music:hover {
opacity: 1;
}
.fa-pause-circle {
display: none;
}
#champagne {
display: none;
width: 300px;
height: 250px;
margin: 22% 43% auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container"></div>
<div class="music">
<audio volume="1" id="myMusic" src="/public/music/Pepe-pepe-pepe-Disco-Samba-HQ.mp3" loop=""></audio>
<button class="btn_music">
<i class="far fa-play-circle"></i>
<i class="far fa-pause-circle"></i>
</button>
</div>
<svg version="1.1" viewBox="0 0 800 600">
<symbol id="fade-text">
<text x="50%" y="30%" text-anchor="middle">Happy New Year !</text>
<text x="48%" y="50%" text-anchor="middle">2021</text>
</symbol>
<g>
<use class="stroke" xlink:href="#fade-text"/>
<use class="fill" xlink:href="#fade-text"/>
</g>
</svg>
<br/>
<img src="public/img/cin_cin.gif" id="champagne">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="public/js/jquery.fireworks.js"></script>
<script src="/public/js/index.js"></script>
</body>
With jQuery, with the play button I would like to start the music, the fireworks and view the photo while with the pause button I would like to pause the music, the fireworks and make the photo disappear.
Is it possible to do it or not?

Related

Row Low / Minimalistic One page

I tried to figure out, how the website Link is made, especially the SVG fill out and the polygon which is alternating. But yet I did not achieve to make a suitable css.
What I want is:
Make a alternating background like them
and also the svg fillings.
They use also row low but I could not install it on my ubuntu, since i am using Ubuntu 22.04, does anybody know a suitable responsive grid layout for rowlow?
I made a CSS:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
/* Standard syntax */
#keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
#keyframes svg-animation {
to {
stroke-dashoffset: 0; } }
#keyframes fill {
from {
fill: transparent; }
to {
fill: white; } }
#keyframes fade-logo {
0% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 100%; } }
#keyframes no-scroll {
0% {
overflow: hidden; }
99% {
overflow: hidden; }
100% {
overflow: auto; } }
.menu-btn {
position: absolute;
z-index: 3;
right: 35px;
top: 25px;
cursor: pointer;
transition: all .75s ease-out; }
.menu-btn .btn-line {
width: 30px;
height: 3px;
margin: 0 0 5px 0;
background: black;
transition: all .75s ease-out; }
.menu-btn.close {
transform: rotate(180deg); }
.menu-btn.close .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px); }
.menu-btn.close .btn-line:nth-child(2) {
opacity: 0; }
.menu-btn.close .btn-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px); }
.menu {
position: fixed;
top: 0;
width: 100%;
z-index: 2; }
.menu .menu-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
display: none;
justify-content: center;
transition-property: none; }
.menu .menu-nav.mobile {
display: flex;
background-color: pink;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
z-index: 2;
left: 100%; }
.menu .menu-nav.mobile.show {
left: 0; }
.menu .menu-nav li {
float: left;
text-align: center;
color: black;
padding: 25px 16px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .2rem; }
.menu .menu-nav li:hover {
cursor: pointer;
color: #87c6bd; }
#content_1 {
padding: 30px 0;
text-align: center;
height: 100vh;
background-color: #F3F3F3;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); }
#content_1 .logo {
width: 220px;
height: auto;
animation: fade-logo 5s ease forwards; }
#content_2 {
margin-top: 0;
position: relative;
padding-top: 100px;
background: #FFF; }
#content_2 .gem-image {
transform: translate(-50%, -80%);
width: 30%;
max-width: 400px;
min-width: 250px;
height: auto;
left: 50%;
top: 0;
position: absolute;
z-index: 200; }
.loading-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
#svg_logo {
width: 220px;
height: auto;
animation: fill 2s ease forwards 2.25s; }
#svg_logo path:nth-child(1) {
stroke-dasharray: 493px;
stroke-dashoffset: 493px;
animation: svg-animation .75s ease forwards; }
#svg_logo path:nth-child(2) {
stroke-dasharray: 364px;
stroke-dashoffset: 364px;
animation: svg-animation .75s ease forwards 0.15s; }
#svg_logo path:nth-child(3) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 0.3s; }
#svg_logo path:nth-child(4) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 0.45s; }
#svg_logo path:nth-child(5) {
stroke-dasharray: 386px;
stroke-dashoffset: 386px;
animation: svg-animation .75s ease forwards .6s; }
#svg_logo path:nth-child(6) {
stroke-dasharray: 77px;
stroke-dashoffset: 77px;
animation: svg-animation .75s ease forwards .75s; }
#svg_logo path:nth-child(7) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards .9s; }
#svg_logo path:nth-child(8) {
stroke-dasharray: 314px;
stroke-dashoffset: 314px;
animation: svg-animation .75s ease forwards 1.05s; }
#svg_logo path:nth-child(9) {
stroke-dasharray: 236px;
stroke-dashoffset: 236px;
animation: svg-animation .75s ease forwards 1.20s; }
#svg_logo path:nth-child(10) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 1.35s; }
#svg_logo path:nth-child(11) {
stroke-dasharray: 361px;
stroke-dashoffset: 361px;
animation: svg-animation .75s ease forwards 1.5s; }
#svg_logo path:nth-child(12) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards 1.65s; }
#svg_logo path:nth-child(13) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 1.8s; }
#svg_logo path:nth-child(14) {
stroke-dasharray: 310px;
stroke-dashoffset: 310px;
animation: svg-animation .75s ease forwards 1.95s; }
#svg_logo path:nth-child(15) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.1s; }
#svg_logo path:nth-child(16) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.25s; }
* {
box-sizing: border-box; }
body {
height: 100%;
margin: 0;
font-family: 'Lato', Tahoma, Verdana, sans-serif;
background-color: white;
animation: no-scroll 5s ease forwards; }
h1, h2, h3 {
margin: 0;
font-weight: 600; }
a {
color: white;
text-decoration: none; }
#load {
content: '';
background-color: black;
width: 100%;
color: white;
text-align: center;
letter-spacing: .3rem;
display: flex;
height: 0;
justify-content: center;
align-items: center;
height: 100vh;
-webkit-animation: example 4s ease forwards 2.25s;
/* Safari 4.0 - 8.0 */
animation-name: example 4s ease forwards 2.25s; }
.headline {
position: relative;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 200;
font-size: 2rem;
letter-spacing: 1rem;
font-weight: 900;
margin-top: 100px; }
.headline:after {
width: 100px;
margin: 70px auto;
content: '';
display: block;
background: #1D1D1F;
height: 4px; }
The index.html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>We Ain't Plastic Clone</title>
<meta name="description" content="We Ain't Plastic Clone">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css?v=1.0">
<!-- <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="load"></div>
<div class="loading-svg">
<svg id="svg_logo" width="1252" height="355" viewBox="0 0 1252 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.968 202H16.376L1.49597 134.8H15.8L24.92 180.4L38.072 134.8H51.128L64.184 180.208L73.304 134.8H87.128L72.248 202H57.656L44.312 155.056L30.968 202Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M121.624 202V134.8H173.272V146.896H135.544V162.256H160.408V173.968H135.544V189.904H173.656V202H121.624Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M248.22 202L275.868 134.8H291.996L319.26 202H304.188L297.372 184.336H269.628L262.716 202H248.22ZM273.948 173.2H293.148L283.644 148.432L273.948 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M350.884 202V134.8H364.804V202H350.884Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M402.96 134.8H416.208L449.616 178.288V134.8H462.672V202H450.384L416.112 157.072V202H402.96V134.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M503.955 130.864H517.587L507.219 156.112H497.331L503.955 130.864Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M549.012 147.088V134.8H608.148V147.088H585.588V202H571.668V147.088H549.012Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M687.109 202V134.8H720.805C724.069 134.8 727.077 135.344 729.829 136.432C732.645 137.456 735.045 138.896 737.029 140.752C739.013 142.608 740.549 144.848 741.637 147.472C742.789 150.032 743.365 152.848 743.365 155.92C743.365 158.928 742.789 161.712 741.637 164.272C740.549 166.768 738.981 168.944 736.933 170.8C734.949 172.656 732.581 174.096 729.829 175.12C727.077 176.144 724.069 176.656 720.805 176.656H701.029V202H687.109ZM719.269 146.8H701.029V165.136H719.269C722.277 165.136 724.677 164.304 726.469 162.64C728.325 160.976 729.253 158.768 729.253 156.016C729.253 153.264 728.325 151.056 726.469 149.392C724.677 147.664 722.277 146.8 719.269 146.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M778.373 202V134.8H792.293V189.712H829.061V202H778.373Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M859.549 202L887.196 134.8H903.325L930.589 202H915.516L908.701 184.336H880.956L874.044 202H859.549ZM885.276 173.2H904.477L894.972 148.432L885.276 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M958.328 191.344L966.296 181.36C970.2 184.752 973.944 187.248 977.528 188.848C981.176 190.384 985.016 191.152 989.048 191.152C993.208 191.152 996.536 190.384 999.032 188.848C1001.53 187.312 1002.78 185.264 1002.78 182.704C1002.78 180.4 1001.91 178.608 1000.18 177.328C998.52 176.048 995.704 175.088 991.736 174.448L978.392 172.144C972.632 171.184 968.248 169.168 965.24 166.096C962.296 163.024 960.824 159.056 960.824 154.192C960.824 147.92 963.192 142.96 967.928 139.312C972.728 135.664 979.192 133.84 987.32 133.84C992.184 133.84 997.08 134.672 1002.01 136.336C1007 138 1011.35 140.304 1015.06 143.248L1007.58 153.616C1003.99 150.864 1000.47 148.848 997.016 147.568C993.56 146.224 990.008 145.552 986.36 145.552C982.648 145.552 979.672 146.256 977.432 147.664C975.192 149.008 974.072 150.832 974.072 153.136C974.072 155.184 974.808 156.784 976.28 157.936C977.752 159.088 980.216 159.92 983.672 160.432L996.344 162.544C1003 163.632 1007.99 165.776 1011.32 168.976C1014.71 172.112 1016.41 176.272 1016.41 181.456C1016.41 187.984 1013.82 193.2 1008.63 197.104C1003.51 201.008 996.664 202.96 988.088 202.96C982.712 202.96 977.4 201.936 972.152 199.888C966.968 197.84 962.36 194.992 958.328 191.344Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1044.47 147.088V134.8H1103.61V147.088H1081.05V202H1067.13V147.088H1044.47Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1137.33 202V134.8H1151.25V202H1137.33Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1223.01 190.096C1226.53 190.096 1229.83 189.36 1232.9 187.888C1235.97 186.416 1238.69 184.304 1241.06 181.552L1250.18 190.576C1246.98 194.352 1242.88 197.36 1237.89 199.6C1232.96 201.84 1227.87 202.96 1222.63 202.96C1217.57 202.96 1212.83 202.064 1208.42 200.272C1204.07 198.48 1200.29 196.048 1197.09 192.976C1193.89 189.904 1191.36 186.256 1189.51 182.032C1187.71 177.808 1186.82 173.264 1186.82 168.4C1186.82 163.536 1187.75 158.992 1189.6 154.768C1191.46 150.48 1193.99 146.8 1197.19 143.728C1200.39 140.656 1204.16 138.224 1208.51 136.432C1212.93 134.64 1217.63 133.744 1222.63 133.744C1228 133.744 1233.22 134.896 1238.27 137.2C1243.33 139.44 1247.43 142.48 1250.56 146.32L1241.15 155.632C1238.79 152.688 1236 150.448 1232.8 148.912C1229.6 147.312 1226.21 146.512 1222.63 146.512C1219.62 146.512 1216.77 147.088 1214.08 148.24C1211.46 149.328 1209.19 150.864 1207.27 152.848C1205.35 154.768 1203.84 157.072 1202.75 159.76C1201.67 162.384 1201.12 165.264 1201.12 168.4C1201.12 171.472 1201.67 174.352 1202.75 177.04C1203.91 179.664 1205.44 181.936 1207.36 183.856C1209.35 185.776 1211.65 187.312 1214.27 188.464C1216.96 189.552 1219.87 190.096 1223.01 190.096Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M635.731 88.853L635.4 89.564H636.184H649.432H649.751L649.885 89.2749L690.493 2.01094L690.824 1.29999H690.04H676.792H676.473L676.339 1.58904L635.731 88.853Z" stroke="white"/>
<path d="M521.731 352.853L521.4 353.564H522.184H535.432H535.751L535.885 353.275L576.493 266.011L576.824 265.3H576.04H562.792H562.473L562.339 265.589L521.731 352.853Z" stroke="white"/>
</svg>
</div>
<nav class="menu">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
Gems
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Letters
</li>
<li class="nav-item">
Profile
</li>
<li class="nav-item">
Workflow
</li>
<li class="nav-item">
Content
</li>
</ul>
</nav>
<main>
<div id="content">
<section id="content_1">
<img class="logo" src="images/logo.svg" >
</section>
<section id="content_2">
<div class="headline">
<h1>GEMS</h1>
</div>
<img class="gem-image" src="images/gem-textured.png" >
</section>
</div>
</main>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
My Problem is: The Polygon is not alternating like the link below. And I need a hint how I can make a scroll event such in the link the fill out the svg. As I already mentioned, I want to make use of Row Low but that did not work, I also get in touch with the owner but he did not replied yet.

animation cuts out when it runs a second time

const menu = document.querySelector('.pageLinksButton')
const links = document.querySelector('.pageLinks')
menu.addEventListener('click', () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
})
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0.0;
transform: translateY(50px)
}
20% {
opacity: 0.2;
transform: translateY(40px)
}
40% {
opacity: 0.4;
transform: translateY(30px)
}
60% {
opacity: 0.6;
transform: translateY(20px)
}
80% {
opacity: 0.8;
transform: translateY(10px)
}
100% {
opacity: 1.0;
transform: translateY(00px)
}
}
.pageLinks {
display: none;
position: fixed;
top: 5%;
right: 50%;
transition: 1s ease;
}
.pageLinks.linksActive {
display: block;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #DBDBDB;
font-family: 'poppins', sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
<path class="line" d="m 70,50 h -40" />
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
Animation works when links are opened, but not when I close them.
I tried to animate other classes, but it was worse, that's the most I could do

Well, first of your animation is working only in one direction. Secondly, you're using "display: none" property. In your case the moment you "click" to hide menu your elements acquire "display: none" property which make them vanish instantly.
In my example I've just created another animation called "slide-reversed" and changed display: none; for opacity property. However, this isn't a solution, because underneath the elements are still present and "clickable". There isn't css solution to animate properties like display or visibility, so I would recommend either play with width and overflow to achieve what you want, or delay property change via JS.
Example without display:none;
const menu = document.querySelector(".pageLinksButton");
const links = document.querySelector(".pageLinks");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
});
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(50px);
}
20% {
opacity: 0.2;
transform: translateY(40px);
}
40% {
opacity: 0.4;
transform: translateY(30px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
80% {
opacity: 0.8;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(00px);
}
}
#keyframes slide-reverse {
100% {
opacity: 0;
transform: translateY(50px);
}
80% {
opacity: 0.2;
transform: translateY(40px);
}
60% {
opacity: 0.4;
transform: translateY(30px);
}
40% {
opacity: 0.6;
transform: translateY(20px);
}
20% {
opacity: 0.8;
transform: translateY(10px);
}
0% {
opacity: 1;
transform: translateY(00px);
}
}
.pageLinks {
/* display: none; */
opacity: 0;
position: fixed;
top: 15%;
right: 50%;
transition: 0s ease;
transition-delay: 0.3s;
}
.pageLinks.linksActive {
transition: 0.3s ease;
transition-delay: 0s;
opacity: 1;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide-reverse 0.3s linear;
}
.pageLinks.linksActive ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #dbdbdb;
font-family: "poppins", sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path
class="line"
d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
/>
<path class="line" d="m 70,50 h -40" />
<path
class="line"
d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"
/>
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>

How to add a small box around a text?

I have the following code:
// Preloader
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(1000).fadeOut('slow');
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#500;700&family=Montserrat:wght#400;600&family=Oswald:wght#500&family=Pacifico&family=Roboto:ital,wght#0,400;0,900;1,500&display=swap');
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: rgb(1, 36, 133);
}
.svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 3s linear infinite;
}
svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #044d77;
}
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: rgb(5, 46, 80);
width: 8px;
height: 5px;
}
#keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #05f7f9;
}
80% {
stroke-width: 0;
fill: #05f7f9;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
<span></span>
</div>
</div>
I want to add a small box around it, and to better show you what kind of output I am looking for, then I want this in end:
So, all I am missing right now is that background box with the color black, and I do not want the ox to be filled with page cover, it should be approx the same height and width as the picture above. Think of it as being a preloader for a site. In the middle of the page, a small/medium-sized box with h logo displayed inside it like how it is shown above.
Note: The animation should work inside the box, and should not go outside the box, so the animation when you run the above code should take place in the black box. I am just looking for help on how to accurately set u the dimensions of the box like it is shown in the picture. I will adjust the measurements later, but right now I am looking for the output of the box to be displayed.
I tried using the same logic as someone who asked a similar question before, but it did not work and it gave me a black screen which is not what I want. I want the whole screen to be white, but this background box of the image, as shown above, to be black.
Expected Output:
The animation should still perfectly run fine inside the box, and as you can see, the box is in the middle of the screen, and the screen has a whitebackground.

You set a black background on the .svg-file div... and scale the svg to 0.66 (2/3).
// Preloader
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(2000).fadeOut('slow');
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#500;700&family=Montserrat:wght#400;600&family=Oswald:wght#500&family=Pacifico&family=Roboto:ital,wght#0,400;0,900;1,500&display=swap");
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
#preloader .svg-file {
background-color: black; /* added */
overflow: hidden;
}
#preloader .svg-file path {
fill: transparent;
stroke-width: 3;
stroke: rgb(1, 36, 133);
}
#preloader .svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
#preloader .svg-file.z-logo path {
animation: animate-zlogo 3s linear infinite;
}
#preloader svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(0.66); /* Changed */
}
#preloader .svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #044d77;
}
#preloader .svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: rgb(5, 46, 80);
width: 8px;
height: 5px;
}
/* Not used
#keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
*/
#keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #05f7f9;
}
80% {
stroke-width: 0;
fill: #05f7f9;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
<g id="H">
<path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" />
</g>
</svg>
<span></span>
</div>
</div>

use ::before pseudo
// Preloader
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(1000).fadeOut('slow');
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght#500;700&family=Montserrat:wght#400;600&family=Oswald:wght#500&family=Pacifico&family=Roboto:ital,wght#0,400;0,900;1,500&display=swap');
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: rgb(1, 36, 133);
}
.svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 2s linear infinite;
}
svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #044d77;
}
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: rgb(5, 46, 80);
width: 8px;
height: 5px;
}
#keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #05f7f9;
}
80% {
stroke-width: 0;
fill: #05f7f9;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}
#preloader {
position: absolute;
margin: auto;
z-index: 9999;
overflow: hidden;
background: white;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
.z-logo svg {
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
display: flex;
width: 50%;
}
.z-logo::before {
content: "";
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
background: black;
position: absolute;
display: inline-flex;
border: 1px solid black;
width: 200px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.3 78.22Z" fill="#47AF9A"/></g></svg>
<span></span>
</div>
</div>

Heart Animation on click

So Id like to create an animation where you click on the heart that there is a circle around that heart that's scales up and then fades away. I've tried to give the SVG a border but nothing shows up? I'm honestly not sure what I'm doing wrong here. Any help would be greatly appreciated. I want it to be similar to the Twitter heart but without the dots around the heart when you click it. Here is a link to my codepen https://codepen.io/Brushel/pen/MEEYgQ
(function() {
var animatedHeart, heartanimation, heartanimationthree;
animatedHeart = document.getElementById('heart1');
heartanimation = document.getElementById('heart2');
heartanimationthree = document.getElementById('heart3');
animatedHeart.addEventListener('click', function() {
return animatedHeart.classList.toggle('fill');
});
heartanimation.addEventListener('click', function() {
return heartanimation.classList.toggle('fillup');
});
heartanimationthree.addEventListener('click', function() {
return heartanimationthree.classList.toggle('heartscale');
});
}).call(this);
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
}
h2 {
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
#heart1 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.fill {
-webkit-animation: love .5s linear alternate forwards;
animation: love .5s linear alternate forwards;
stroke: #D22128;
stroke-width: 5px;
}
#-webkit-keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#heart2 {
max-height: 70px;
fill: white;
cursor: pointer;
}
.fillup {
-webkit-animation: lovebutton .5s alternate forwards;
animation: lovebutton .5s alternate forwards;
}
#-webkit-keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#heart3 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.heartscale {
-webkit-animation: heart-beat .5s alternate forwards;
animation: heart-beat .5s alternate forwards;
stroke-width: 0px;
}
#-webkit-keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
#keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
<body>
<div class="container">
<div class="col-12">
<h2>Animated Hearts</h2>
<div class="circle">
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart1">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
<!-- End of the first Heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart2">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
<!-- End of second heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart3">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</div>
</body>

the last one looks pretty close ! I think there is a simpler (sort of simpler) way to do this in css.
Nicolas Escoffer has a great article about it here:
Article:
https://blog.prototypr.io/twitter-s-heart-animation-in-full-css-b1c00ca5b774
Code Pen:
https://codepen.io/OxyDesign/pen/avXVbo
otherwise I would suggest creating a keyframes animation that uses the border of the circle div you have created. Be sure to set the circle div outside of the heart .svg so it is not wrapping the element:
I made an example for you below based on your original codepen:
#HTML:
<body>
<div class="container">
<div class="col-12">
<h2> </h2>
<br>
<div id="circle" class="circle"></div>
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart4">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</body>
#SCSS:
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
color: white;
}
h2{
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
user-select: none;
}
// Set up basic Grid
.container {
display: block;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 50%;
margin-left: auto;
margin-right: auto;
}
.col-12{
flex: 0 0 100%;
}
// Fourth Animation
#heart4 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
position: relative;
width: 5rem;
}
.dot-animation {
position: relative;
}
.dot {
height: 10px;
width: 10px;
background: white;
border-radius: 50%;
position: absolute;
&:nth-child(1){
background: #D22128;
left: 49.7%;
top: 75px;
}
&:nth-child(2){
background: #D22128;
left: 49.4%;
bottom: 8%;
}
&:nth-child(3){
background: #D22128;
left: 53.5%;
top: 30px;
}
&:nth-child(4){
background: #D22128;
left: 45%;
top: 30px;
}
}
.bands {
animation: snap 1s forwards;
stroke-width: 0;
}
#keyframes snap {
from {
transform: scale3d(1, 1, 1);
filter: brightness(0.5);
}
30% {
transform: scale3d(1.25, 0.75, 1); }
40% {
transform: scale3d(0.75, 1.25, 1); }
50% {
transform: scale3d(1.15, 0.85, 1); }
65% {
transform: scale3d(.95, 1.05, 1); }
75% {
transform: scale3d(1.05, .95, 1); }
to {
transform: scale3d(1, 1, 1);
fill: #D22128;
filter: brightness(1);
}
}
.circle {
position: absolute;
display: block;
border: 1px solid white;
margin-left: 2.5rem;
top: 8rem;
}
.burst {
animation: burst .5s forwards;
}
#keyframes burst {
0% {
border: 1px solid white;
border-radius: 50% 50%;
width: 0.25rem;
height: 0.25rem;
}
100% {
border: 5px solid white;
border-radius: 50% 50%;
width: 7rem;
height: 7rem;
margin-left: -.90rem;
margin-top: -2.45rem;
opacity: 0;
z-index: 999;
}
}
#JS:
# Grab Element
heartanimationfour = document.getElementById('heart4')
circle = document.getElementById('circle')
# Add event listener for the click
heartanimationfour.addEventListener 'click', ->
heartanimationfour.classList.toggle 'bands',
circle.classList.toggle 'burst'
https://codepen.io/cwoolf123/pen/wvMdyKq?editors=1111

Target checked checkbox in jQuery

I have HTML, CSS and jQuery code for a checkbox. But I was recently making some changes in the HTML structure and now the jQuery is no longer working. And since I'm a beginner, I don't know how to fix this.
Can someone take a look and just let me know what jQuery should be targeting instead, so it'll change the styling of the elements when the checkbox is checked?
$('.form-check').click(function(){
$(this).closest('.list-group-item').find('.incomplete').css('display', (this.checked)?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', (this.checked)?'block':'none')
$(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (this.checked)?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (this.checked)?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

You are checking the .form-check if it is checked.. It should be the checkbox inside the .form-check.
Find the checkbox inside the .form-check first and the check for its prop if checked or not as follows:
$('.form-check').click(function() {
var checkbox = $(this).find('input[type=checkbox]')
$(this).closest('.list-group-item').find('.incomplete').css('display', (checkbox.prop('checked')) ? 'none' : 'block')
$(this).closest('.list-group-item').find('.complete').css('display', (checkbox.prop('checked')) ? 'block' : 'none')
$(this).closest('.list-group-item').css('background-color', (checkbox.prop('checked')) ? '#4CAF50' : '')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (checkbox.prop('checked')) ? '#fff' : '#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (checkbox.prop('checked')) ? '#fff' : '#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+svg {
display: none;
}
input[type=checkbox]:checked+svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div>
<!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

The problem is with your this.isChecked, it is always undefined, so it always evaluates to false. I replaced it with isChecked, getting the value from the checked property of the checkbox belonging to this li item.
$('.form-check').click(function(){
var isChecked = $(this).find('#checkbox').prop('checked');
$(this).closest('.list-group-item').find('.incomplete').css('display', isChecked?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', isChecked?'block':'none')
$(this).closest('.list-group-item').css('background-color',isChecked?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', isChecked?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', isChecked?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

Categories

Resources