How to refresh keyframe animation by click in js?

How to refresh keyframe animation by click in js? - javascript

I want make animation which started every click by button. It is work but only once. When pressed again nothing happens. Tried to remove and add the same class again. Did not help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
margin: 0;
padding:0;
widht: 100%;
}
</style>
</head>
<body>
<style>
#keyframes red-to-black {
0% {background: rgba(150,0,0,100);}
100% {background: rgba(0,0,0,100);}
}
.RedBack {
animation: red-to-black 1s ease-out;
}
</style>
<div id="back" style = "background: black; width: 100vw; height:100vh;">
<button onclick="document.getElementById('back').classList.add('RedBack');">Hello!</button>
</div>
</body>
</html>

You must remove the class after the animation ends. Then, when you add the class again, the animation will trigger again.
Here, I have removed the class after 1 second, because the animation duration is 1 second.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
margin: 0;
padding:0;
widht: 100%;
}
</style>
</head>
<body>
<style>
#keyframes red-to-black {
0% {background: rgba(150,0,0,100);}
100% {background: rgba(0,0,0,100);}
}
.RedBack {
animation: red-to-black 1s ease-out;
}
</style>
<div id="back" style = "background: black; width: 100vw; height:100vh;">
<button onclick="onClick()">Hello!</button>
</div>
<script>
function onClick() {
document.getElementById('back').classList.add('RedBack');
setTimeout(() => {
document.getElementById('back').classList.remove('RedBack');
}, 1000)
}
</script>
</body>
</html>

Related

Can i animated or transform a shadow

i want to ask something. Can i add animation style on shadow with css. The animation what i mean is the shadow can do fade in and fade out in several time.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Yes you can. You could use #keyframes.
h1 {
animation: shadow-animate 3s infinite ease;
}
#keyframes shadow-animate {
0% {
text-shadow: 20px 20px;
}
100% {
text-shadow: 0px 0px
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Moving background doesn't seem to be working

So i'm trying to make my background move endlessly from left to right repeatedly. I tried all sorts of things, but I don't know why the code doesn't work.
Here's my code
HTML:
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
Javascript:
var i=null;
window.onload = function(){
var move = setInterval(move, 30);
move();
}
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}

Here are updated code for your requirement.
You only need pass move method to setInterval, don't need call move() after setInterval
var i=1;
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
window.onload = function(){
var move1 = setInterval(move, 30);
//move();
}
#section1{
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg')
}
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>

You can use CSS animation to achieve this.
#section1 {
width: 200px;
height: 200px;
background: url('http://placehold.it/1000?text=test image');
background-size:cover;
animation-duration: 3s;
animation-name: scroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes scroll {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
<div id="section1"></div>

Hide an element after clicking on it

Todo :
Hide an element smoothly after clicking on it , like in this page https://www.alphafx.co.uk/ , when you click on the letter A it fades away smoothly
Achieve this effect with just HTML,CSS,JavaScript ?
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
Text
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

You can achieve this using jQuery fadeOut check working fidle below:
Using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
<script>
$(".hide").click(function() {
$(".hide").fadeOut("slow");
});
</script>
</body>
</html>
Using JavaScript
function fadeOutEffect() {
var fadeTarget = document.getElementById("hide");
var fadeEffect = setInterval(function() {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
#hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
</body>
</html>

You can easily achieve this using jQuery fadeOut() effect.
Below is the w3scool reference:
https://www.w3schools.com/jquery/eff_fadeout.asp
Click on "try it yourself>" button and you can modify the code as per your requirement.
Here is another working example for you:
https://jsfiddle.net/kag4jqyh/

Please try this:
$(function() {
$('#spantext').on('click', function() {
// $(this).hide();
$(this).fadeOut("slow"); // if you want to hide it slow
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>

Here's an answer in vanilla JavaScript (without using jQuery)
HTML
Text
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>
JavaScript
const hideButton = () => {
document.getElementById("foo").classList.add('hidden');
}
const showButton = () => {
document.getElementById("foo").classList.remove('hidden');
}
CSS
.foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
.foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}

What you want is just an animation to hide the view.
You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> for getting such beautiful effects. You can see the sample code below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity: 0});
});
$("#btn2").click(function(){
$("#box").animate({opacity: 1});
});
});
</script>
</head>
<body>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>

if you want to use JavaScript rather than using jQuery. then
Try this
/******define time-delay only in s(seconds)****/
var timeSlot = '.3s';
function hide(obj){
obj.style.visibility= 'hidden';
obj.style.opacity= 0.8;
obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
}
.div1 {
font-size: 1.2rem;
cursor: pointer;
text-align: center;
margin-top:-100px;
}
.logo {
font-size: 10rem;
}
<div class="div1" onclick="hide(this);">
<h1 class="logo">A</h1>
</div>

getElementById from a txt file

I'm trying to get ElementById from a txt file and pass it into marquee class. Do I need a javascript function for this?
Also, I can't get the white-space: nowrap to work. Here is what I have put together so far. The javascript function credit goes to Sid function readTextFile
function readTextFile(file){
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span> Test .</span></h1>
</body>
</html>
Any help is much appreciated. I'm brand new to html, javascript, and css but I'm excited to learn.
Thank you!

You need to get span element and replace its content (I've added id attribute to span element for simplicity: compare first two lines in snippet - commented one is shorter). white-space: nowrap should be applied for span element.
Remove that <a> element and call your readTextFile in js snippet. Replace alert(allText) with document.getElementsByClassName("marquee")[0].children[0].innerHTML = allText (or make it simpler)
Demo below shows how to replace strings:
//document.getElementById("mytext").innerHTML = "some test"
document.getElementsByClassName("marquee")[0].children[0].innerHTML = "some test"
setTimeout(function(){
document.getElementById("mytext").innerHTML = "bla bla bla"
}, 7000)
#-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0 ,0);
}
100%{
-webkit-transform: translate(-100%, 0);
}
}
.marquee {
display:block;
width:100%
white-space: nowrap;
overflow:hidden;
}
.marquee span {
display:inline-block;
padding-left:100%;
white-space: nowrap;
-webkit-animation:scroll 15s infinite linear;
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.CSS" type="text/CSS">
</head>
<body>
<h1 class="marquee"><span id="mytext">Need Text File String Here</span></h1>
</body>
</html>

Sliding out when a div is clicked

I'm making a website and I want it to be just one index page. And when you land, there will be a couple rows like this and when you click a row, it will expand the information that's been hiding to the bottom so it looks like this.
Now I searched around and I found this and I essentially copied and pasted the thing onto a new file just to fool around with it but it didn't work. I added the html tags, and important the proper files and such, well my code looks like this.
//Index
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="main.css" rel="stylesheet">
<script type="slide.js"></script>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
//main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
//slide.jsvar clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
However it doesn't seem to work. What am I missing?

var clicked=true;
is commented out. Uncomment this.
Hope this helps.

I think you are looking for something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").slideToggle('fast')
});
});
</script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
display:none; /* delete this line if you want to show your yellow div by default*/
background-color: yellow;
}
</style>
</head>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>

I am not sure how is your markup since in your previous answer you comment you have written
I just messed up when copy and pasting
Here is the complete mark up including JS and CSS
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
<script>
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
</script>
</body>
</html>
NOTE: I include the body , & head tag. Also please update are you referring the css and js from external file.Currently I have referring CSS and JS from same page
WORKING DEMO

Change
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html
and <script type="slide.js"></script> to <script src="slide.js"></script>
and embed your code in $(document).ready( function () { });
and Uncomment var clicked=true;
Final code will be
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slide.js"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</body>
slide.js
$(document).ready(function() {
var clicked = true;
$(".one").on('click', function() {
if (clicked)
{
clicked = false;
$(".two").css({"top": 0});
}
else
{
clicked = true;
$(".two").css({"top": "-40px"});
}
});
});
main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/

Develop Reference

JavaScript is the programming language of the Web.

How to refresh keyframe animation by click in js? - javascript

Related

Can i animated or transform a shadow

Moving background doesn't seem to be working

Hide an element after clicking on it

getElementById from a txt file

Sliding out when a div is clicked

Categories

Resources