I am doing a Vanilla JS and css practice and I am trying to run 2 keyframes in CSS on different elements but it doesn't seem to be working and I have no clue why.
Basically, when one clicks on the button, the classes 'applejuice; and 'pearjuice' are supposed to be added to the divs respectively and then the div with A will slide to the left and that with B will slide to the right. However, so far only the div with A is working, but not the B div.
Could anyone help me with this? Thank you in advance!!
**HTML:**
<body>
<button onClick="opena()">press</button>
<div class="pack">
<div class="left" class="apple">A</div>
<div class ="right"class="pear" >B</div>
</div>
</body>
CSS:
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
float:left;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
width:50vw;
padding-left:0;
margin-left:0;
margiin-right:0;
float:right;
}
.applejuice{
animation-name:gorda;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}}
}
.pearjuice{
animation-name:gordi;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
#keyframes gordi{
0%{width:50vw;}
100%{width:0vw;right:0vw;}
}
JS:
function opena() {
var eleme = document.getElementsByClassName("left")[0];
var elemo = document.getElementsByClassName("right")[0];
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice");
}
you put one extra } in gorda
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}
}
function opena() {
var eleme = document.getElementsByClassName("left")[0];
var elemo = document.getElementsByClassName("right")[0];
eleme.classList.add("applejuice");
elemo.classList.add("pearjuice");
}
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
float:left;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
width:50vw;
padding-left:0;
margin-left:0;
margin-right:0;
float:right;
}
.applejuice{
animation-name:gorda;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes gorda{
0%{width:50vw;}
100%{width:0vw;left: 50vw;}
}
.pearjuice{
animation-name:gordi;
animation-duration:2.0s;
animation-iteration-count:1;
animation-fill-mode:forwards;
}
#keyframes gordi{
0%{width:50vw;}
100%{width:0vw;right:0vw;}
}
<button onClick="opena()">press</button>
<div class="pack">
<div class="left" class="apple">A</div>
<div class ="right"class="pear" >B</div>
</div>
Related
I have implemented a nav tab-like view. Three buttons and when we click on one button the text corresponding to the other two buttons get hidden. But I want that when we update the text then we must be seeing some animation like fade in.
var prevId = 1;
function updateView(id) {
document.getElementById("subsec"+prevId).style.visibility = "hidden";
document.getElementById("subsec"+id).style.visibility = "visible";
prevId = id;
}
<div id="subsec1" >
Tab 1
</div>
<button onclick="updateView(1)"></button>
<div id="subsec2" style="visibility: hidden">
Tab 2
</div>
<button onclick="updateView(2)"></button>
<div id="subsec3" style="visibility: hidden">
Tab 3
</div>
<button onclick="updateView(3)"></button>
Can anyone help me with this. I have attached an example of how my view looks.
Example: I am currently on tab 3 and I click on tab 1 then tab 3 content should disappear but through animation and content of tab 1 must appear on-screen through animation only(like fade in).
Please read this from w3schools.com.
Try adding css like
.fadeIn {
animation-name: FadeIn;
animation-duration: 4s;
animation-fill-mode: both;
}
.fadeOut {
animation-name: FadeOut;
animation-duration: 4s;
animation-fill-mode: both;
}
#keyframes FadeIn {
from { opacity: 0%; }
to { opacity: 100%; }
}
#keyframes FadeOut {
from { opacity: 100%; }
to { opacity: 0%; }
}
and then adding javascript like so:
var prevId = 1;
function updateView(id) {
document.getElementById("subsec"+prevId).className = "fadeOut";
document.getElementById("subsec"+id).className = "fadeIn";
preId = id;
}
replace visibility: in html to opacity: 0%, and set the classes at the beginning if you want them to have animation at the beginning.
This is not optimalized.
I had a little play about to show how you might use a slightly simplified HTML markup and a modified button clickhandler function to trigger adding new styles (animations) to your tabs.
The CSS animations here are very basic examples but should serve to illustrate the effect of fading in.
const clickhandler=function(e){
document.querySelectorAll('button[data-tab]').forEach(bttn=>bttn.classList.remove('activebttn') );
document.querySelectorAll('div[data-tab]').forEach( div=>div.classList.remove('active','initial') );
document.querySelector('div[ data-tab="'+this.dataset.tab+'" ]').classList.add('active');
this.classList.add('activebttn');
}
document.querySelectorAll('button[data-tab]').forEach( bttn=>bttn.addEventListener('click',clickhandler) );
div[data-tab]{
background:white;
border:1px solid rgba(0,0,0,0.25);
border-radius:1rem 0 1rem 0;
box-shadow:0 0 1rem rgba(0,0,0,0.25);
margin:1rem auto;
width:600px;
min-height:400px;
padding:1rem;
opacity:0;
}
div[data-tab]:not(.active){
display:none;
}
#keyframes fadein{
0% { opacity:0; }
100% { opacity:1; background:whitesmoke; }
}
#keyframes fadeout{
0%{ opacity:100%;display:block; }
100%{ opacity:0%; background:white; display:none; }
}
#keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.active{
animation-name:fadein, shake;
animation-duration:1s, 1s;
animation-timing-function:ease-in-out;
animation-fill-mode: forwards;
animation-delay: 250ms,750ms;
}
.hide{
animation-name:fadeout;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode: forwards;
animation-delay: 250ms;
}
.initial{
display:block!important;
opacity:1!important;
}
button{
background:rgba(0,0,0,0.25);
border-radius:1rem;
border:1px solid transparent;
width:200px;
cursor:pointer;
padding:1rem;
transition:ease-in-out 250ms all;
}
button:hover{
border:1px solid gray;
background:rgba(255,255,255,0.25);
box-shadow:0 0 5px rgba(0,0,0,0.25);
}
button:active,
.activebttn{
border:1px solid gray;
background:rgba(0,255,0,0.25);
}
<button data-tab=1>Tab 1</button>
<button data-tab=2>Tab 2</button>
<button data-tab=3>Tab 3</button>
<div data-tab=1 class='initial'>
Code finance. Let's put a pin in that one-sheet we need to button up our approach optimize for search nor my supervisor didn't like the latest revision you gave me can you switch back to the first revision?.
</div>
<div data-tab=2>
We need to socialize the comms with the wider stakeholder community prairie dogging, roll back strategy drink the Kool-aid meeting assassin, but form without content style without meaning, yet can we jump on a zoom.
</div>
<div data-tab=3>
Cloud native container based knowledge process outsourcing blue sky. Tribal knowledge. I called the it department about that ransomware because of the old antivirus, but he said that we were using avast 2021 let's schedule a standup during the sprint to review our kpis.
</div>
Hover is kind of funny as in this code a new layer .hide which get appear when hover as it transition it response differently I try diffent thing like hide:hover +img{} and other if anybody know about it please help is there is any hack in this issue.
Thing is there is two layer first layer should fade Opacity and another layer transition with animation that is only word. Which is .hide Class that but if then i hover on .hide class which transition when hover cause issue.,
Right Now i using with z index different But then Text hide behind the back of image.
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog img:hover{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog img:hover + .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>
This issue happens because you add the styles on img:hover, simply, by default, these events are triggered for the selector itself or one of its children, in this case, the image and the div.hide are siblings, to avoid this behavior you can update your code to add these styles on catalog:hover, which is a parent of both, so whenever you hover on of them, you will be hovering the parent too
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog:hover img{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog:hover .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>
I found some CSS that moves a needle like a VU meter. This mimics what I want to do. However it does a full animation from start to finish. Whereas I would like to make the change happen through a series of clicks. I'm trying to figure out how to do that and I am unsuccessful. I would like to know how I can make the needle move in the same way only through clicks
CSS
.gauge {
position:relative;
width:120px;
height:120px;
margin:10px;
display:inline-block;
}
.needle-assembly {
position:absolute;
top: 0%;
left:46%;
height:100%;
width:10%;
-webkit-transform: rotate(-45deg);
}
.needle-holder {
position:relative;
top:0;
left:0;
height:60%;
width:100%;
}
.needle {
position:absolute;
background-color:#A00;
height:100%;
width:20%;
left:40%;
}
#-webkit-keyframes moveNeedle
{
0% {-webkit-transform: rotate(-45deg);}
60% {-webkit-transform: rotate(55deg);}
65% {-webkit-transform: rotate(50deg);}
100% {-webkit-transform: rotate(65deg);}
}
#gauge {
-webkit-transform-origin:50% 50%;
-webkit-animation: moveNeedle 5s;
-webkit-animation-fill-mode: forwards;
}
HTML
<div class="gauge" style="height:140px; width:140px;">
<div class="needle-assembly" id="gauge">
<div class="needle-holder">
<div class="needle"></div>
</div>
</div>
</div>
jQuery
$('#gauge').click(function(){
$('#gauge').css({transform: 'rotate(45deg)'})
});
fiddle
It doesn't move when you click it because you are setting it to a static value.
You need to change the value somehow.
var deg=45;
$('#gauge').click(function(){
var t = 'rotate(' + deg +'deg)';
$('#gauge').css({transform: t})
deg = deg+5;
});
http://jsfiddle.net/4xc3wnux/6/
Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.
This is the fiddle animation in jQuery. How can this be made only with CSS considering different heights of the images?
The HTML:
<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg"/>
</div>
The CSS:
.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
max-width:100%;
min-width:100%;
}
The jQuery:
$(document).ready(function () {
move();
});
function move() {
$img = $(".image");
diff = $img.height()-$img.parent().height();
speed = diff * 50;
$img.animate({
bottom: -diff
}, speed, 'linear', function(){
$(this).animate({bottom:0}, speed, 'linear', move);
});
}
see this answer: CSS transition between left -> right and top -> bottom positions
which combined with your fiddle, gives you: http://jsfiddle.net/3n1gm4/dvqfs/
#-webkit-keyframes pan {
0% {
-webkit-transform: translate(0%,0%);
}
100% {
top: 100%;
-webkit-transform: translate(0%,-100%);
}
}
.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
top: 0;
max-width:100%;
min-width:100%;
-webkit-animation: pan 3s alternate infinite linear;
}