manipulate CSS animations with javascript - javascript

This is a simple question, but I'm pretty new to programming and I'm not exactly sure how to do this.
I have a div that moves on a button press
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
box.addEventListener('click', function() {
checkbox.checked = true;
});
#box {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#checkbox:checked ~ #box {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="checkbox" />
<div id="box">
</div>
</body>
</html>
This is a simple animation, so doing it this way isn't really an issue for this case. The issue is when I want to add another animation to it via a checkbox, it sees that both checkboxes are "checked" and it runs both animations. With javascript and without a checkbox, how can I do the following:
-add a css animation
-remove it when I want to use another animation
Thanks!

This can be done, for example, by adding/removing a css class of box element.
(If I understood your question correctly)
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var box1 = document.getElementById('box1');
button1.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-right";
});
button2.addEventListener('click', function() {
box1.className = "";
box1.className += " moving-box-left";
});
#box1 {
position: absolute;
transform: translate3d(0, 0, 0);
height: 20%;
width: 20%;
background-color: red;
}
#keyframes moveRight {
0% {
transform: translate3d(0, 0, 0);
}
60% {
transform: translate3d(120%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#keyframes moveLeft {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
.moving-box-right {
animation-name: moveRight;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.moving-box-left {
animation-name: moveLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html>
<body>
<button id="button1">Move box right</button>
<button id="button2">Move box left</button>
<div id="box1"></div>
</body>
</html>
https://jsfiddle.net/kdnzqx52/2/

Related

How to reveal this image after some text is clicked?

I am trying to use this animation but I need that if some text is clicked then the image should be revealed.
Could you please help me as I am a beginner.
Thanks.
Codepen
let revealBox = document.querySelector('.reveal-box');
let animate = function() {
if (revealBox.classList.contains('enter')) {
revealBox.classList.remove('enter');
revealBox.classList.add('leave');
} else {
revealBox.classList.remove('leave');
revealBox.classList.add('enter');
}
}
document.body.addEventListener('click', animate);
You can wrap any text in a <span> tag. And give it an id or class.
<span id="click-to-reveal">Some text</span>
You can select it in the script:
const text = document.getElementById("click-to-reveal");
And add the eventlistener to it instead:
text.addEventListener('click', animate);
he is a possible upodate from the code that seems to work like you expect :
The idea is to switch the initial className used to hide/show the img at first : class="reveal-box enter animate" becomes class="reveal-box leave animate"
To avoid waiting the 0.9s duration time that takes to hide the img, you can add a négative delay equal or superior to the duration value. This negative delay should be fired only on load and then be reset to 0.
It can be added via a class by a custom delayremoved on the first click via revealBox.classList.remove('delay');.
Once class enter and leave are switched in the HTML and the delay class added to the HTML and created in the CSS, the img should not be seen untill the first click.
example:
let revealBox = document.querySelector('.reveal-box');
let animate = function() {
if (revealBox.classList.contains('enter')) {
revealBox.classList.remove('enter');
revealBox.classList.add('leave');
} else {
revealBox.classList.remove('leave');
revealBox.classList.remove('delay');
revealBox.classList.add('enter');
}
}
document.querySelector('.reveal-box p').addEventListener('click', animate);
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: #f7f7f7;
cursor: pointer;
box-sizing: border-box;
padding: 24px;
}
.reveal-box {
position: relative;
height: calc(100vh - 48px);
max-height: 480px;
width: calc((100vh - 48px) * 0.66);
max-width: 320px;
overflow: hidden;
}
.reveal-box__inner {
width: 100%;
height: 100%;
overflow: hidden;
}
.reveal-box__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #c1b294;
}
.reveal-box__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.enter .reveal-box__inner {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-right;
}
.enter .reveal-box__inner::after {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.6s both paused slide-out-right;
}
.enter .reveal-box__image {
animation: 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.3s both paused scale-in-down;
}
.leave .reveal-box__inner {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-right;
}
.leave .reveal-box__inner::after {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-left;
}
.leave .reveal-box__image {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-left;
}
.leave.delay .reveal-box__inner {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) -1s both paused slide-out-right;
}
.leave.delay .reveal-box__inner::after {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) -1s both paused slide-in-left;
}
.leave.delay .reveal-box__image {
animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-left;
}
.animate .reveal-box__inner {
animation-play-state: running;
}
.animate .reveal-box__inner::after {
animation-play-state: running;
}
.animate .reveal-box__image {
animation-play-state: running;
}
#keyframes slide-in-right {
0% {
transform: translate3D(-100%, 0, 0);
}
100% {
transform: translate3D(0, 0, 0);
}
}
#keyframes slide-out-right {
0% {
transform: translate3D(0, 0, 0);
}
100% {
transform: translate3D(100%, 0, 0);
}
}
#keyframes slide-in-left {
0% {
transform: translate3D(100%, 0, 0);
}
100% {
transform: translate3D(0, 0, 0);
}
}
#keyframes slide-out-left {
0% {
transform: translate3D(0, 0, 0);
}
100% {
transform: translate3D(-100%, 0, 0);
}
}
#keyframes scale-in-down {
0% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
<div class="reveal-box leave delay animate">
<p>Some text to click</p>
<div class="reveal-box__inner">
<img class="reveal-box__image" src="https://images.unsplash.com/photo-1575626465329-3704c434a524?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
</div>
</div>
forked codepen : https://codepen.io/gc-nomade/pen/vYyREYj to play with.

Is there a JavaScript function to do a animation in reverse after clicking a button a 2nd time?

I'm still learning JavaScript, and not too familiar with it or I have just flat out forgotten it. But I have a button on my page that looks like this:
function hiddenjs() {
var x = document.getElementById("hiddenjs");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.hiddenjsa {
margin: 0 auto;
background-color: red;
animation-name: expandz;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}
#keyframes expandz {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: rgb(71, 8, 8);;
}
100% {
transform: scale(1.5);
background-color: rgb(139, 139, 3);
}
}
<div class="btn4">
<button class="btn4a" onclick="hiddenjs()">List of Other Games I'm going to review!</button>
</div>
<div id="hiddenjs" class="hiddenjsa">
Note: These are NOT clickable links yet as I have yet to review them and add them to the site.
These are just references to which I am in the process of reviewing!
</div>
I was wondering, without jQuery, or any other forms of language if there is a way through JavaScript alone, that you can do a toggle button to do the animation (which I've done) and when you click said button again, it does the animation but in reverse?
I've read up a few things on it but can't find something without copy and pasting a jQuery snippet, and I don't want to do that because I want to understand what I'm doing.
You can set an animation on each click to either expand or reverse the expansion. Instead of display settings, set the scale at the start of the forward animation as 0.
This snippet deliberately has two keyframes which are identical but one set to run in reverse, just to make it clearer what is going on.
function hiddenjs() {
var x = document.getElementById("hiddenjs");
if ( x.style.animationDirection != "normal" ) {
x.style.animationDirection = "normal";
x.style.animationName = "expandz";
}
else {
x.style.animationDirection = "reverse";
x.style.animationName= "expandz1";
}
}
.hiddenjsa {
margin: 0 auto;
transform: scale(0);
background-color: red;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-fill-mode: forwards;
}
#keyframes expandz {
0% { transform: scale(0); }
1% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: rgb(71, 8, 8);;
}
100% {
transform: scale(1.5);
background-color: rgb(139, 139, 3);
}
}
#keyframes expandz1 {
0% { transform: scale(0); }
1% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: rgb(71, 8, 8);;
}
100% {
transform: scale(1.5);
background-color: rgb(139, 139, 3);
}
}
<div class="btn4" style=“z-index:100;”>
<button class="btn4a" onclick="hiddenjs()">List of Other Games I'm going to review!</button>
</div>
<div id="hiddenjs" class="hiddenjsa">
Note: These are NOT clickable links yet as I have yet to review them and add them to the site.
These are just references to which I am in the process of reviewing!
</div>

How to trigger a CSS animation from JS?

I have a balloon that when hovered, will expand n disappear (a popping-like animation). I made this in CSS but when the cursor moves, the balloon returned. I want the balloon to disappear forever until I refresh the page, so I guess it needs to be onclick, but that selector is not available in CSS.
Here's what I have in CSS
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon:hover
{
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
I saw another question that said the closest thing is :active but it requires the mouse to be held down. If I want it to be onclick, I need to use Javascript. But I don't know what I need to write to trigger the animation.
And is it also possible to make it so that when I pop 1 balloon, all the others will pop too automatically with a 1s delay inbetween? (There are 5 balloons).
You can add and remove the class of the animation with JS using classList.
Add:
object.classList.add('balloon');
Remove:
object.classList.remove('balloon');
Working example:
const add = () => {
document.getElementById('balloon').classList.add('animation')
}
const remove = () => {
document.getElementById('balloon').classList.remove('animation')
}
#keyframes pop {
from {
opacity: 1;
transform: translateZ(0) scale(1, 1);
}
to {
opacity: 0;
transform: translateZ(0) scale(1.5, 1.5);
}
}
.animation {
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
.balloon {
height: 125px;
width: 110px;
background-color: #FF6B6B;
border-radius: 50%;
}
.controls{
position: absolute;
bottom: 10px;
right: 10px;
}
<div id="balloon" class="balloon" onmouseover="add()"></div>
<div class="controls">
<button onClick="add()">Hide</button>
<button onClick="remove()">Show</button>
</div>
Here is a solution which makes balloons hiding one by one with interval .5s between them
var balloons = document.getElementsByClassName('balloon');
[...balloons].forEach( (e, i)=>{
e.onmouseover = function() {
this.classList.add('hidden');
setTimeout(hideAll, 500, balloons);
}
});
function hideAll(arg){
[...arg].forEach( (e, i)=>{
if ( ! e.classList.contains('hidden') ) {
e.style.animationDelay = i+'s';
e.classList.add('hidden');
}
});
}
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon.hidden
{
animation: pop .5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>

CSS animate Javascript

I am trying to install some Javacript to make my animation run more than once.
I have been given this script off the animate site but have no idea where to actually include the element that I want it to apply the animation to.
I wish to apply the animation 'animated zoomIn' to both the h2 and h3 headings that are in a div with the class of thumbtitle-box.
Here is my html:
div class="imagethumbnailleft">
<div class="thumbtitle-box"><h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3></div>
Here is my CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
And the Javascript - which is what the problem is:
$(document).ready(function() {
function animationHover(trigger, element, animation){
element = $(element);
trigger = $(trigger);
trigger.hover(
function() {
element.addClass('animated ' + 'zoomIn');
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
});
}
});
I am completely new to Javascript and any help would be much appreciated.
May be you are looking for this:
work for h2 and h3 tag under thumbtitle-box class
$(".imagethumbnailleft h2, .imagethumbnailleft h3").hover(function(){
animationHover(this,this,'zoomIn');
});
http://jsfiddle.net/a7r95y7x/2/

Dynamic word swapping animation

I'm trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, "This is cool," but I want "cool" to be replaced every few seconds by "neat/awesome/groovy/etc".
I'm honestly not sure the best way to go about this (in terms of what technology to use) and I can't find a blurb of code that works with modern browsers. Help is greatly appreciated!
in Pure JS
http://jsfiddle.net/M5gxH/3/
<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
return text.replace(/cool/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
$("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>
In jQuery, I'd do something like this:
http://jsfiddle.net/6SRaB/1/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
changer();
});
function changer() {
var words = ["nifty","groovy","far out"]; // add as many as you like
var idx = Math.floor(words.length * Math.random()); // randomizer
$('#change').text(words[idx]); // replaces the contents of "change"
var time = Math.floor(5000 * Math.random() + 3000); // in milliseconds
setTimeout(changer,time); // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>
The key is to use a SPAN tag with an ID that you can pick out quickly.
This question is quite old but it showed up in a google search for me. In 2018 you can easily implement this behavior with CSS Animations without the need for any additional JavaScript code.
The following should give you what you need:
<!DOCTYPE html>
<html>
<head>
<style>
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.animated span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.animated span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
</body>
</html>
Note that this is just an example with vertical sliding. There are basically endless possibilities with CSS in terms of animations/transitions.

Categories