I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<script>
var loader = document.getElementById("gif-wraper");
window.onload = function() {
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>
You should move var loader = document.getElementById("gif-wraper"); into onload event function like this:
window.onload = function () {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}
The code you have returns this error:
Uncaught TypeError: Cannot read property 'style' of null
It is because document.getElementById("gif-wraper"); returns null
To fix this you need to place your script tag below the body tag, so that the script will be able to find the DOM element.
As you can see from the console, you have an error: "Uncaught TypeError: Cannot read property 'style' of null". This happens because you are trying to select the loader before it actually exists. You simply have to move the line var loader = document.getElementById("gif-wraper"); inside the window.onload function.
body {
width: 100%;
height: 100%;
background: wheat;
}
.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}
#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}
#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}
#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}
#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}
#keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}
#keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}
#-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<script>
window.onload = function() {
var loader = document.getElementById("gif-wraper");
loader.style.display = 'none';
}
var x = 0;
function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);
</script>
<body>
<div class="content">
<img src="https://picsum.photos/300/?random" />
</div>
<div id="gif-wraper">
<div id='gif'></div>
<div id="text">MK</div>
</div>
</body>
</html>
Related
I have this floating circle with a logo. Is there a way to make it sway left and right as a 3d image? I have added a minimalistic reproducible example showing what I have at the moment. If anything is unclear, feel free to ask questions.
I want it to go sway to the left, then to the right and make it 3d. I am not sure how to transform this into a 3d image or add the effect. Can anyone help me?
I know understand that you have to use an SVG if I want this effect to occur. Here is an example of the effect. Look at the icons on the landing page of this website matruecannabis.com/en
body, html {
height: 100%;
margin: 0;
padding: 0;
background: #ffc60b;
}
#-webkit-keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
-webkit-transform: translatey(-20px);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
-webkit-transform: translatey(-20px);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
-webkit-animation: float 3s ease-in-out infinite;
animation: float 3s ease-in-out infinite;
}
.avatar img {
width: 70%;
height: auto;
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Floating Logo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<a href="https://google.com">
<div class="avatar">
<img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami"/>
</div>
</a>
</div>
<!-- partial -->
</body>
</html>
Is this anything like what you're after?
Just animating transform: translateX on the <a> tag:
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: #ffc60b;
}
#keyframes float {
0%,
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translateY(0);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translateY(-20px);
}
}
#keyframes horizontal {
0%,
100% {
transform: translateX(-20px);
}
50% {
transform: translateX(20px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
animation: horizontal 10s cubic-bezier(.81,.14,.57,.73) infinite;
}
.avatar {
position: relative;
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translate(0px, 0px);
animation: float 3s ease-in-out infinite;
}
.avatar img {
width: 70%;
height: auto;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="container">
<a href="https://google.com">
<div class="avatar">
<img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami" />
</div>
</a>
</div>
Or maybe a bit faster?
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: #ffc60b;
}
#keyframes float {
0%,
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translateY(0);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translateY(-20px);
}
}
#keyframes horizontal {
0%,
100% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateZ(0)
}
a {
animation: horizontal 3s cubic-bezier(.3, .5, .7, 1.73) infinite;
}
.avatar {
position: relative;
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translate(0px, 0px);
animation: float 3s ease-in-out infinite;
}
.avatar img {
width: 70%;
height: auto;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="container">
<a href="https://google.com">
<div class="avatar">
<img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami" />
</div>
</a>
</div>
With 3d turning:
body,
html {
height: 100%;
margin: 0;
padding: 0;
background: #ffc60b;
}
#keyframes float {
0%,
100% {
box-shadow: 6px 7px 10px -2px rgba(0, 0, 0, 0.6);
transform: translateY(0) skew(-2deg) rotateY(15deg);
background-color: rgb(255, 198, 41);
filter: brightness(0.9);
}
50% {
box-shadow: -10px 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translateY(-20px) skew(2deg) rotateY(-20deg);
background-color: rgb(245, 190, 41);
filter: brightness(1.1);
}
}
#keyframes horizontal {
0%,
100% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// Hardware acceleration
transform: translateZ(0);
}
a {
animation: horizontal 3s cubic-bezier(.3, .5, .7, 1.73) infinite;
}
.avatar {
position: relative;
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform-origin: top;
animation: float 3s ease-in-out infinite;
}
.avatar img {
width: 70%;
height: auto;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="container">
<a href="https://google.com">
<div class="avatar">
<img src="https://i.ibb.co/2Y8J8TC/logo.png" alt="Skytsunami" />
</div>
</a>
</div>
Here's quick way to do it.
body, html {
height: 100%;
margin: 0;
padding: 0;
background: #ffc60b;
}
#-webkit-keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
-webkit-transform: translatey(-20px);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
#keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
-webkit-transform: translatey(-20px);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(0px);
transform: translatey(0px);
}
}
.container {
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.avatar {
width: 150px;
height: 150px;
box-sizing: border-box;
border: 5px white solid;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
}
.rotate {
animation: rotation 8s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Floating Logo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<a href="https://google.com">
<div class="avatar">
<img src="https://i.ibb.co/2Y8J8TC/logo.png" class="rotate" width="100" height="100" />
</div>
</a>
</div>
<!-- partial -->
</body>
</html>
To make 3d image, you can make a gif-image
The easiest for coding is to make a insert gif-image instead of the logo/icon.
The gif-file is an animated images itself and no need to code anything.
It might be a bit of work for whoever has to make the gif(animated images), but it's easy if you know how.
There are plenty of resources on how to make a gif and also tools to make a gif online as well.
HTML example (simply added the src-path to gif-image online):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Click image and say hi to google</h1>
<div class="container">
<a href="https://google.com">
<div class="avatar">
<!--<img src="<replace image.gif location/path here to test>" alt="test.gif"/>-->
<img src="https://media4.giphy.com/media/OhkMiKX0uMmLC/giphy.webp?cid=ecf05e47ben5f39yax86yjdknevq6lklvbb7x4gcnz9zdo89&rid=giphy.webp" alt="image.gif (Graphics Interchange Format)"/>
</div>
</a>
</div>
</body>
</html>
So, I have some animations running on a page that I'm working on, and I'd like to know if there's a way to make the animations NOT run 'till the animated element(s) are visible on-screen
I've already done some research but the things I have tried (a couple of scripts, actually) didn't work..
Sorry for the size of the CSS code, it's the animation and I left the comment there because I didn't write the animation code.
.text-pop-up-top {
-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
* Generated by Animista on 2019-10-22 1:23:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
#-webkit-keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
#keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<i class="fas fa-at text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>
The expected results are, like above, for the animation to begin once the user has scrolled down enough so the element being animated is visible on the screen. Right now the problems I have seen arise are that the animation just starts once the page loads, without the icon being visible, and 2, the animation not happening at all.
Since I'm guessing you're new to code of all sorts, here's a quick example using wowjs and since you stated you tried and it didn't work I can only guess you didn't initialize it, or the file path to the js file you should have saved locally is not correct. Either way, run the snippet attached and cheers!
new WOW().init();
.text-pop-up-top {
-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
* Generated by Animista on 2019-10-22 1:23:40
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
#-webkit-keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
#keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<h1>scroll down....</h1>
PS, notice we don't care about any animate.css stuff at all..
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<i class="fas fa-at wow text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>
I need to reverse the wipe animation when the mouse moves off the button. Is there a way to do this in only CSS?
I know I can reverse the animation, but I'm not sure where to put in the CSS file in order to get the right animation. If I put it in .get-started, it wipes the border and I'm unable to interact with the button completely.
HTML:
<div class="get-started" id="button">
<h4 class="part1">Get <span class="part2">Started</span></h4>
</div>
CSS:
body {
background:black;
}
#button {
display: flex;
font-size: 2.5rem;
color: white;
align-items: center;
justify-content: center;
width: 250px;
height: 75px;
position: relative;
top: -30%;
left: calc(50% - 125px);
}
.get-started {
--borderWidth: 5px;
position: relative;
border-radius: var(--borderWidth);
background-color: #8551FF;
box-shadow: inset 0 0 0 5px white;
z-index:1;
}
.get-started h4.part1 {
color: #FFFFFF;
font-family: 'Coves Light';
font-weight: normal;
}
.get-started span.part2 {
color: #5EFF00;
font-family: 'Coves';
font-weight: bold;
}
.get-started:after {
content: '';
position: absolute;
}
.get-started:hover:after {
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
background-size: 300% 300%;
animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}
/* motion */
#keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
#keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 0% 100%);
}
}
Runnable Snippet
You could try
.get-started:not(:hover):after {}
with an inversed animation. But it can have unwanted behaviour on initial pageload, it always starts with this animation I guess. Sometimes you can't avoid javascript. Adding a class on mouseout and removing it again on mouseenter might work, so you can assign a reverse animation to this class.
var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('mouseleave', function(e) {
e.target.classList.add('mouseleaveAnimationClass');
});
els[i].addEventListener('mouseenter', function(e) {
e.target.classList.remove('mouseleaveAnimationClass');
});
}
I have a CSS3 animation set up and I just want to change the box-shadow color on hover. However, when I do it, the animation abruptly resets. Is there any way to continue the seamless animation on hover with no jumping? If I need to use javascript or jquery, that's fine, but I'd prefer if there was a CSS3 solution. Any help is appreciated.
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite;
}
table:hover {
animation: glowing2 5000ms infinite;
}
#keyframes glowing {
0% { box-shadow: 0 0 -10px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 -10px #e9458a;}
}
#-webkit-keyframes glowing {
0% { box-shadow: 0 0 -10px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 -10px #e9458a;}
}
#keyframes glowing2 {
0% { box-shadow: 0 0 -10px #ad45e9; }
40% { box-shadow: 0 0 20px #ad45e9; }
60% { box-shadow: 0 0 20px #ad45e9;}
100% { box-shadow: 0 0 -10px #ad45e9;}
}
#-webkit-keyframes glowing2 {
0% { box-shadow: 0 0 -10px #ad45e9; }
40% { box-shadow: 0 0 20px #ad45e9; }
60% { box-shadow: 0 0 20px #ad45e9;}
100% { box-shadow: 0 0 -10px #ad45e9;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
To do hover animations, transition is a great feature that reverse the animation when unhover.
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
box-shadow: 0 0 -10px #e9458a;
transition: box-shadow 2500ms;
}
table:hover {
box-shadow: 0 0 20px #e9458a;
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
If to still use animation, use animation-play-state and animation-fill-mode: forwards to make it run when hovered and keep state when unhovered
In below sample I used their longhand properties, though they can be added to the shorthand, i.e. like this for the animation-fill-mode animation: glowing 5000ms infinite forwards;.
I would keep animation-play-state as longhand, as it won't work on IE (and, if I remember correct, on older versions of Edge).
Note, negative <blur-radius> values on box-shadow is not allowed (and I noticed it won't work on IE/Edge but it did on Chrome)
table {
max-width:1000px!important;
padding:15px;
word-wrap:
break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite;
animation-fill-mode: forwards; /* persist state */
animation-play-state: paused; /* pause the animation */
}
table:hover {
animation-play-state: running; /* play the animation */
}
#keyframes glowing {
0% { box-shadow: 0 0 0px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 0px #e9458a;}
}
#-webkit-keyframes glowing {
0% { box-shadow: 0 0 0px #e9458a; }
40% { box-shadow: 0 0 20px #e9458a; }
60% { box-shadow: 0 0 20px #e9458a;}
100% { box-shadow: 0 0 0px #e9458a;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
Updated based on a comment
It is also possible to change color during the animation
table {
max-width:1000px!important;
padding:15px;
word-wrap: break-word;
background-color:#ffffff;
border: 7px solid #454ce9;
animation: glowing 5000ms infinite forwards;
animation-play-state: paused;
}
table:hover {
animation-play-state: running;
}
#keyframes glowing {
0% { box-shadow: 0 0 0px red; }
25% { box-shadow: 0 0 20px blue; }
50% { box-shadow: 0 0 20px green;}
75% { box-shadow: 0 0 20px yellow;}
100% { box-shadow: 0 0 0px red;}
}
<table border="10"><tr><td colspan="2">Hover over me</td></tr></table>
Sure, use this to stop it from jumping back once the animation is complete
animation-fill-mode: forwards;
Also seems to have been answered here - CSS Keyframe Animations on Hover - Animation Resetting with Mouse Movement
I have done s simple heart using pure CSS.
It consists of two pieces, so one piece has a white box-shadow, the other one has a red one.
An example can be found here: JsFiddle (it has a simplified styling with no gradients, so it may not look beautiful :)
So, the question is: how to create animated shadows? All I need is to make white and red shadows pulsating to create an effect of heartbeat.
I have followed through some similar questions already, but they won't work, unfortunately, just because in my case I use :after and :before pseudo-classes, which can not been manipulated via jQuery.
I set it to infinite so it beats non-stop (which is a good thing, so the heart doesn't die right?) But you can change it to n number of times instead. Also, you can change the 5 seconds to longer or shorter obviously. And if you don't want the box shadow going to 0, you can always change that to like 10px or something too.
#b:before {
animation: heartbeat 5s infinite;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
body {
width:100%;
margin:0;
background: #000;
}
#b {
position:relative;
width:500px;
height:90px;
margin: 100px auto;
font-size: 12px;
}
#b:before {
position: absolute;
content:"";
left: 208px;
top: 10px;
width: 208px;
height: 320px;
background: red;
border-radius: 200px 200px 0 0;
box-shadow: 0 0 50px #fff;
animation: heartbeat 5s infinite;
}
#b:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#b:after {
position:absolute;
content:"BlaBla!";
color: #fff;
left:0;
top:10px;
width:208px;
height:320px;
background: red;
border-radius:200px 200px 0 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
box-shadow: 10px 10px 100px #6d0019;
}
#keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
<div class="a">
<div id="b"></div>
</div>