I have an SVG line path animated with this sample I found:
svg {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 6s 0s forwards infinite;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
<svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>
It works fine but it's triggered when the page loads. Is there a way (let's say with a button) to trigger this animation using JavaScript?
I can handle JS but I'm a noob with CSS and SVG animations.
Can anybody give me an example of how I can do it with my actual CSS?
You could also use SMIL animation syntax instead of CSS animation. This admittedly has the downside of not running in Microsoft browsers (both IE and Edge).
var animation = document.getElementById("dash");
function showSVG() {
animation.beginElement();
}
svg {
position: relative;
width: 100%;
height: 150px;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 290;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
<button id="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent">
<animate id="dash"
attributeName="stroke-dashoffset"
from="290" to="0"
begin="indefinite"
dur="6s"
fill="freeze" />
</path>
</svg>
This animation runs once every time you click. If you want it to repeat in fixed intervals, like CSS animation-repeat: infinite prescribes, use
<animate id="dash" attributeName="stroke-dashoffset"
from="290" to="0"
begin="indefinite" dur="6s" repeatCount="indefinite" />
svg {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
display: block;
background: transparent;
}
.path {
stroke: black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dashoffset: 290;
}
.animated {
animation: dash 6s 0s forwards infinite;
stroke-dashoffset: 0;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
Then you can add the class .animated to your path with js whenever you need it.
You should include your animation in a css class:
.dash-animate {
animation: dash 6s 0s forwards infinite;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
And then simply apply that class when/where you want using js:
var button = getElementById('some-button');
button.addEventListner('click', function() {
var elements = document.querySelectorAll('.path');
Array.prototype.forEach.call(elements, function(el) {
el.classList.add('dash-animate');
});
});
var svgPattern = document.getElementById("svg")
svgPattern.style.display = "none";
function showSVG(){
svgPattern.style.display = "block";
}
svg{
position:absolute;
width:100%;
height:100%;
left:0%;
top:0%;
display:block;
background:transparent;
}
.path {
stroke:black;
stroke-dasharray: 290;
stroke-dashoffset: 130;
animation: dash 6s 0s forwards infinite;
stroke-width:2px;
stroke-linecap:round;
stroke-linejoin:round;
}
#keyframes dash {
from {
stroke-dashoffset: 290;
}
to {
stroke-dashoffset: 0;
}
}
<button id ="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>
Related
I'm a beginner, and I'm creating an animation using svg in which a pickaxe hits a block, and after that cracks should appear, starting from the point where the pickaxe itself hit, in a random downward direction. I would be glad if you could help.
<svg class="main">
<g id="pickaxe">
<path d="M 130 200 Q280 5, 440 200 L 440 200 Q280 80 130 200" fill="#808080" stroke-width="1" />
<rect x="270" y="140" width="20" height="250" fill="#8B4513" />
</g>
</svg>
<svg class="secondary">
<rect x="0" y="0" width="200" height="200" fill="white" />
</svg>
<svg>
<polyline points="0,200 100,125 0,75 100,0" fill="none" stroke="white" />
</svg>
<button id="button" onclick="toggle()">hit!</button>
body {
background-color: black;
}
button {
position: absolute;
left: 65%;
top: 55%;
}
.main {
position: absolute;
left: 1250px;
top: 80px;
width: 560px;
height: 450px;
}
.secondary {
position: absolute;
left: 1110px;
top: 500px;
width: 200px;
height: 200px;
}
.pickaxe {
transition: transform .3s;
animation: move .3s infinite forwards;
animation-play-state: paused;
}
#keyframes hit {
from {
transform: rotate(0deg);
transform-origin: center 400px;
}
to {
transform: rotate(-60deg);
transform-origin: center 400px;
}
}
#keyframes swing {
from {
transform: rotate(-60deg);
transform-origin: center 400px;
}
to {
transform: rotate(0deg);
transform-origin: center 400px;
}
}
.hit {
animation-name: hit;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.swing {
animation-name: swing;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
window.isSmall = true;
window.toggle = () => {
const pickaxe = document.getElementById("pickaxe");
if (isSmall) {
pickaxe.classList.remove("swing");
pickaxe.classList.add("hit");
innerText = 'raise!';
} else {
pickaxe.classList.remove("hit");
pickaxe.classList.add("swing");
innerText = 'hit!';
}
isSmall = !isSmall;
}
I'm a beginner and don't really understand how to create random svg elements, I'd be glad if you could help
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.
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?
Currently, I am working on creating my blog. And there, I uses ajax infinite loader script. While loading posts it shows loading gif like this:
But I don't want to use that gif. Instead of that I want to use the browsers default loading bar(You must see these loading bar in the address bar while your requested page is loading in your browser. I attached that loader to help you).
Edit 1: Here is the link to script (https://helplogger.blogspot.com/2016/09/load-more-blogger-posts-or-infinite-scrolling.html) which I am using. You can easily find the gif link in the script. And I want that gif to replace with the built-in chrome/any browser loader.(Because I am thinking that this will decrease the blog time a little bit.)
You can make one like that without use of image. You will need css and html.
HTML
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
CSS
.loader {
position: relative;
margin: 0px auto;
width: 100px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
height: 100%;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
#-webkit-keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes
rotate { 100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#keyframes
dash { 0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}
#-webkit-keyframes
color { 100%, 0% {
stroke: #3cba54;
}
40% {
stroke: #3cba54;
}
66% {
stroke: #3cba54;
}
80%, 90% {
stroke: #3cba54;
}
}
See Live Example
You should change colors according to your theme
Try it...
Source: https://www.cssscript.com/animated-google-loader-with-svg-and-css/
I am developing a simple web page where I want to show a spinner in the center of the page when the form is submitted. It works in Chrome but, in Safari the CSS animation stops as soon as the form is submitted. Since the animation is 2 seconds longs it does not perform the animation at all.
This is the entire HTML, CSS and JS to replicate the issue. Save the contents in a HTML file and open it in Chrome first to see how it should behave and then open in Safari to see the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
transform: rotate(-90deg);
width: 60px;
}
.circle {
animation: circular-indeterminate-bar-rotate 2s linear infinite;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#keyframes circular-indeterminate-bar-rotate {
to {
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
</style>
</head>
<body>
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>
<script>
window.location.href = 'http://httpbin.org/delay/100';
</script>
</body>
</html>
This is working Fine in safari also.
.circular {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -30px;
margin-top: -30px;
position: fixed;
top: 50%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 60px;
}
.circle {
-webkit-animation: circular-indeterminate-bar-rotate 2s linear infinite;
animation: circular-indeterminate-bar-rotate 2s linear infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.path {
-webkit-animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
fill: none;
stroke: rgba(12,18,28, 0.87);
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-miterlimit: 20;
stroke-width: 4;
-webkit-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
-o-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
}
#-webkit-keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes circular-indeterminate-bar-rotate {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#-webkit-keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
#keyframes circular-indeterminate-bar-dash {
0% {
stroke-dasharray: 1.25, 250;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -43.75;
}
to {
stroke-dasharray: 111.25, 250;
stroke-dashoffset: -155;
}
}
<div class="circular">
<svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
</div>