We Keep Coding

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.

Facebook messenger plugin would not close

I added the messenger plugin script and DIV right above the HEAD section on my HTML.
The plugin does not work as described in https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#steps
Cannot close the text bubble.
Plugin do not default on hidden for mobile.
The attributes do not seem to work either.
Any thoughts?

I just found a solution:
<style>
.fb_customer_chat_bounce_out_v2 { animation-fill-mode: forwards; display: unset !important; }
.fb_customer_chat_bounce_in_v2 { display: unset !important; }
.fb_iframe_widget iframe { display: none; }
</style>
This worked for me.

Until Facebook will fix this bug, you can temporarily fix this by adding display: none to their .fb_customer_chat_bounce_out_v2 class:
.fb_customer_chat_bounce_out_v2 {
display: none;
}

if you select left direction
so you can add this css
<style>
#keyframes fb_bounce_in_from_right {
0% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left
}
50% {
transform: scale(1.03, 1.03);
transform-origin: bottom left
}
100% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left
}
}
#keyframes fb_bounce_out_from_right {
0% {
opacity: 1;
transform: scale(1, 1);
transform-origin: bottom left
}
100% {
opacity: 0;
transform: scale(0, 0);
transform-origin: bottom left
}
}
</style>

How do I animate div with background image along curved path but stop at X percentage

I have been able to animate a div with a background image as well as resize it along the path. However, I am trying to get this CSS-based animation to stop at a certain percentage of the progress.
The premise is to visually show a student her/his progress of completing a varying number of tasks (8 of 12 complete. 68%). That is not a problem with a straight progress bar, but I am looking to use an image of a mountain with a hiker moving along a path. I can get the hiker image from start to end with the following code, but I need it to stop based on the progress of the student.
I am trying to keep this as simple as I can, but do not have to use CSS.
.mtnBg
{
height:306px;
width:450px;
border:1px silver solid;
background-image: url(https://comps.canstockphoto.com/mountain-with-trail-and-sun-retro-style-eps-vector_csp43572145.jpg);
background-repeat: no-repeat;
background-size: 100%;
display:block;
opacity:.18;
z-index:-1;
}
.animSurround {
margin:0;
padding:0;
height:32px;
width:32px;
display:block;
position:relative;
left:140px;
bottom:50px;
border:1px none black;
animation: yAxis 2.8s 1 ease;
}
.anim {
background-image: url(https://www.tenstickers.co.uk/wall-stickers/img/preview/hiker-icon-sticker-8451.png);
background-repeat: no-repeat;
min-height:32px;
min-width:32px;
background-size: 100%;
animation-iteration-count:1;
animation: zoom-move 2.8s ease 1;
animation-fill-mode: forwards;
}
.anim::after {
/* Render dot, and animate along Y-axis */
min-height:96px;
min-width:96px;
}
#keyframes zoom-move {
0% {
transform: scale(3) translateX(calc(0px)) translateY(0px);
opacity: 0.50;
border-radius:32px;
background-color: rgba(256 , 256, 256, 1);
}
25% {
transform: scale(2.6) translateX(60px) translateY(-19px);
opacity: 1;
border-radius:32px;
background-color: rgba(256 , 256, 256, 1);
}
50% {
transform: scale(1.7) translateX(68px) translateY(-50px);
opacity: 1;
border-radius:32px;
background-color: rgba(256 , 256, 256, 1);
animation-play-state: paused;
}
93% {
background-color: rgba(256 , 256, 256, 1);
}
99% {
transform: scale(1.1) translateX(161px) translateY(-122px);
opacity: 1;
border-radius:32px;
background-color: rgba(76, 175, 80, 1);
}
100% {
transform: scale(1.1) translateX(161px) translateY(-122px);
opacity: 1;
border-radius:32px;
background-color: rgba(76, 175, 80, 1);
}
}
<div class="mtnBg"></div>
<div class="animSurround">
<div class="anim"></div>
</div>
Any help would be appreciated.

You can rely on the animation-play-state property. The is idea to convert the % value to the time when the animation should be paused. So you using JS/jQuery you run the animation and after this amount of time you set the property animation-play-state:
Here is an example with a simplied animation:
/* if we want the animation to run until 10%
we consider a duratioon of Xs and we should run until 0.1 * Xs
The duration will only affect the speed
so use a small value to simulate an instant change.
*/
var duration = 3;
function stop_animation(element, percent) {
var stop = (percent / 100) * duration; /* we get the value un second*/
stop *= 1000 /* we transform to milliseconds */
element.css('animation', 'anim ' + duration + 's linear');
setTimeout(function() {
element.css('animation-play-state', 'paused');
}, stop);
}
stop_animation($('.element').eq(0),50);
stop_animation($('.element').eq(1),20);
.container {
width: 200px;
height: 50px;
border: 1px solid;
border-left: 0;
background: linear-gradient(to right, #000 10%, transparent 11%) 0 0/20px 100%;
}
.element {
height: 100%;
width: 20px;
margin-left: 0;
background: red;
}
#keyframes anim {
from {
margin-left: 0;
}
to {
margin-left: calc(100% - 20px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="element"></div>
</div>
<div class="container">
<div class="element"></div>
</div>

vue.js v class binding is overriding other bindings and not removing classes properly

I have a punching bag "game" where I want to add an animation class one every click event. And when the health meter is down to zero, I am replacing the bag picture with an image of a burst bag.
This works ok as long I don't try to add the animation classes. When I try to add the animations, neither functionality is working.
The link is here: https://codepen.io/damianocel/pen/mqXady
This is the HTML:
<div id="vue-app-one">
<!-- the bag images -->
<div id="bag" v-bind:class="[animationToggle ? activeClass : 'swingLeft',
'noSwing']" v-bind:class="{ burst: ended }"></div>
<!-- health meter -->
<div id="bag-health">
<div v-bind:class="[danger ? activeClass : 'dangerous', 'safe']" v-
bind:style="{ width: health + '%'}"></div>
</div>
<!-- the game buttons -->
<div id="controls">
<button v-on:click="punch" v-show="!ended">Punch it!</button>
<button v-on:click="restart">Restart game</button>
</div>
</div>
The problematic part is this:
<div id="bag" v-bind:class="[animationToggle ? activeClass : 'swingLeft',
'noSwing']" v-bind:class="{ burst: ended }"></div>
// Above I try to bind the noSwing CSS class as default and change it to swingLeft if the animationToggle property changes. However, this adds both classes when I check dev tools, and no animation is happening.Can I have 2 class bindings on 1 element like that?
// Further, I bind the ended property to the burst CSS class, this only works if I remove the animationToggle binding and all the relevant CSS.
The instance looks like this:
var one = new Vue({
el: '#vue-app-one',
data: {
health: 100, //init health bar, this works
ended: false, // init ended state, works partially
punched: false, //init punched, don't need for now
danger: false, // this works
animationToggle: false, // there is a problem with this
activeClass: "" // have to init or I get the errors in the console
},
methods: {
punch: function(){
this.health -=10; //works
this.animationToggle= true; // is set on click
if(this.health <= 0){
this.ended = true; // works partially, the background img change is not working ,though
}
if(this.health <= 20){
this.danger = true; // works
}
else{
this.danger = false;
}
setTimeout(function () {
this.animationToggle = false // I am not sure this ever works, give no error, but I am still not sure
}.bind(this),500);
},
restart: function(){
this.health =100;
this.ended = false; // works partially, no img change when health is 0, though
}
}
});
The relevant CSS:
#bag.noSwing {
width: 300px;
height: 500px;
margin: -80px auto;
background: url("https://3.imimg.com/data3/VM/TI/MY-18093/classical-heavy-
bag-250x250.png") center no-repeat;
background-size: 70%;
-webkit-animation-name: swingRight;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: cubic-bezier(.11,.91,.91,.39);
-webkit-animation-fill-mode: forwards;
-webkit-transform-origin: center;
transform-origin: center;
}
#bag.swingLeft {
width: 300px;
height: 500px;
margin: -80px auto;
background: url("https://3.imimg.com/data3/VM/TI/MY-18093/classical-heavy-
bag-250x250.png") center no-repeat;
background-size: 70%;
-webkit-animation-name: swingLeft;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: right;
transform-origin: right;
-webkit-transition-timing-function: cubic-bezier(.91,.11,.31,.69);
}
#keyframes swingLeft {
0% { -webkit-transform: rotate (0deg); transform: rotate (0deg); }
20% { -webkit-transform: rotate (-20deg); transform: rotate (-20deg); }
50% { -webkit-transform: rotate (20deg); transform: rotate (20deg); }
70% { -webkit-transform: rotate (-10deg); transform: rotate (-10deg); }
100% { -webkit-transform: rotate (0deg); transform: rotate (0deg); }
}
#keyframes swingRight {
0% { -webkit-transform: rotate (0deg); transform: rotate (0deg); }
20% { -webkit-transform: rotate (20deg); transform: rotate (20deg); }
50% { -webkit-transform: rotate (-20deg); transform: rotate (-20deg); }
70% { -webkit-transform: rotate (10deg); transform: rotate (10deg); }
100% { -webkit-transform: rotate (0deg); transform: rotate (0deg); }
}
#bag.burst {
background: url("http://i.imgur.com/oRUzTNx.jpg") center no-repeat;
background-size: 70%;
}
#bag-health {
width: 200px;
border: 2px solid #004;
margin: -80px auto 20px auto;
}
#bag-health div.safe {
height: 20px;
background: #44c466;
}
#bag-health div.dangerous {
background: #00ffff;
}
So why are the animations not applied when the "punch it" button is clicked, why does it add both the noSwing and swingLeft class? And it overrides the functionality which changes the background image to a burst bad when the health meter reaches a value of zero.

First of all you can't have 2 class bindings on the same element, nor should you need them.
You have quite a lot of logic regarding adding/removing classes, so i would suggest extracting it to a computed:
computed: {
className () {
let classes= [];
if (this.animationToggle){
classes.push(this.activeClass)
}
else{
classes.push('swingLeft')
}
return classes;
}
}
}
<div id="bag" :class="className"></div>

Make field appear using CSS and Jquery

I just want to create a field which will appear if the user clicks on a button. I know that would also work with just a simple target in CSS, but in my use, I need to do this in the way I tried it. I know it's very much CSS, but I think it shouldn't be too hard to check.
Here is my try:
function brief() {
$('.envelope-wrapper').toggleClass('animate');
}
.envelope-wrapper {
opacity: 0;
width: 735px;
height: 440px;
left: 50%;
margin-left: -367px;
top: 300px;
margin-top: -220px;
border-radius: 10px;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
overflow: visible;
background: #008da9;
}
.envelope-wrapper.animate {
-webkit-animation-name: visible;
-webkit-animation-duration: 2s;
-webkit-animation-direction: forward;
-webkit-animation-timing-function: ease-out;
}
#-webkit-keyframes visible {
0% {
opacity: 0;
}
10% {
opacity: 10;
}
90% {
opacity: 10;
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="brief()" class="gogogo">go</div>
<div class="envelope-wrapper"></div>

It might because the envelope-wrapper seems to be forming a overlay on top of the gogogo element which would not fire a click event.
Set position:relative for both the elements.
.gogogo {
position: relative;
}
.envelope-wrapper {
position: relative;
Check Fiddle
Also opacity values varies between 0 and 1
#-webkit-keyframes visible {
0% {
opacity: 0;
}
10 {
opacity: 0.1;
}
90% {
opacity: 0.9;
}
100% {
opacity: 1;
}
}
Check Update Fiddle

Why not just use jQuery .fadeToggle()
http://api.jquery.com/fadetoggle/