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>
Related
I am trying to display a passing text animation in the homepage of my website.
There are two texts that needs to show up. "you've come to the right place" and " we care about you", next to the welcome text.
For some reason, this is how it looks like:
I want the welcome! text to appear followed quickly by the first quote, after a few seconds, the welcome and the first quote should dissapear and the second quote should appear.
CSS
/* animation welcome text styling */
.intro{
display: inline-block;
white-space:nowrap;
overflow: hidden;
}
.intro1 {
animation: showup 7s infinite;
font-family: Arial, Helvetica, sans-serif;
font-size:35px;
color: purple;
}
.intro2 {
font-size:30px;
animation: reveal 7s infinite;
width:400px;
}
.sub-head {
margin-left:-355px;
animation: slidein 7s infinite;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
width: 100px;
background-color: darkolivegreen;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-600px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
/* end of text animation */
HTML:
<div class= "first-box">
<!-- a welcome text is placed here to grasp the users' attention to the website. -->
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> You've come to the right place</span>
<span class="sub-head inactive">We care about you </span>
</div>
</div>
JS:
// sets the interval for which the function will run, in this case 8 seconds, (8000)
setInterval(function() {
// grab all elements with class 'sub-head' and stores it in the elems const.
const elems = document.querySelectorAll('.sub-head')
elems.forEach(e => {
// check if the element has a class 'inactive', if there is one, remove it
if (e.classList.contains('inactive')) e.classList.remove('inactive')
// if not, add it. This is how it creates a loop.
else e.classList.add('inactive');
});
}, 8000)
make some changes
const timeout = 15000
const elems = document.querySelectorAll('.sub-head')
//for each slide make equal times
const forEachSlide = timeout / elems.length
const intro1 = document.querySelector('.intro1')
const intro2 = document.querySelector('.intro2')
//change timeouts of intros (also can set in the css file)
intro1.style.animationDuration = `${timeout}ms`
intro1.style.animationIterationCount = 'infinite'
intro2.style.animationDuration = `${timeout/2}ms`
intro2.style.animationIterationCount = 'infinite'
//timeout of each '.inactive'changes
let showId = setTimeout(function blockShow(){
elems.forEach(e => {
if (e.classList.contains('inactive')) {
e.classList.remove('inactive')
} else e.classList.add('inactive');
});
showId = setTimeout(blockShow, forEachSlide)
}, forEachSlide)
.intro{
display: inline-block;
white-space:nowrap;
overflow: hidden;
}
.intro1 {
animation-name: showup;
font-family: Arial, Helvetica, sans-serif;
font-size:35px;
color: purple;
}
.intro2 {
font-size:30px;
animation-name: reveal;
/*width auto makes the block size of this content so all words fit in it*/
width:auto;
/*max-width makes maximum width of block where words can be placed*/
max-width: 1000px;
}
.sub-head{
display: none;
}
.sub-head.inactive {
display: inline-block;
margin-left:-355px;
animation: slidein 7s infinite;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
width: 100%;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-600px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:auto;}
80% {opacity:1;}
100% {opacity:0;width:auto;}
}
<div class= "first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> You've come to the right place</span>
<span class="sub-head inactive">We care about you </span>
</div>
</div>
Try to add inactive class and set width to 455 (at #keyframes reveal):
setInterval(function() {
const elems = document.querySelectorAll('.sub-head')
elems.forEach(e => {
if (e.classList.contains('inactive')) e.classList.remove('inactive')
else e.classList.add('inactive');
});
}, 8000)
.intro{
display: inline-block;
white-space:nowrap;
overflow: hidden;
}
.intro1 {
animation: showup 7s infinite;
font-family: Arial, Helvetica, sans-serif;
font-size:35px;
color: purple;
}
.intro2 {
font-size:30px;
animation: reveal 7s infinite;
width:400px;
}
.inactive {
display: none;
}
.sub-head {
margin-left:-5px;
animation: slidein 7s infinite;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
width: 200px;
background-color: darkolivegreen;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-600px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:455px;}
80% {opacity:1;}
100% {opacity:0;width:455px;}
}
<div class= "first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> You've come to the right place</span>
<span class="sub-head inactive">We care about you </span>
</div>
</div>
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>
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>
The CSS styling for this fade in and out animation seems fine, but it is not reusable with javascript. Once the function performs once, it can not be triggered by button onClick again, what is the way around this?
//removeClass
//addClass
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<button onClick="animationfunction()">Button</button>
<div id="icon" class="elementToFadeInAndOut"></div>
You only need to have the button click add the class membership, wait until the animation is complete and then remove the class.
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
// Wait until the animation is over and then remove the class, so that
// the next click can re-add it.
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 4000);
});
.fade{
width:200px;
height: 200px;
background: red;
opacity:0;
}
.elementToFadeInAndOut {
animation: fadeInOut 4s linear forwards;
}
#keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button class="fadeButton">Button</button>
<div class="fade"></div>
The best way is to use jQuery for functions
here is the code for fade in and out effect for toggle button.
you can adjust the time by changing that (1000) in jQuery Thank you
$(document).ready(function(){
$('button.btn').click(function(){
$("div.elementToFadeInAndOut").fadeOut(1000);
$("div.elementToFadeInAndOut").fadeIn(1000);
});
});
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="btn">Button</button>
<div class="elementToFadeInAndOut"></div>
Right now I'm trying to put together something really simple, learn from it, and incorporate it in a bigger project.
I have a simple box I'm trying to move from one position to another using css webkit animations and the translate function (for iOS hardware acceloration purposes). I need it to move in an arc and then stay at that point at the top of the arc.
Now, I'm pretty new to CSS transitions. In the past I've used jQuery animations but that seems to run really slowly on mobile devices. I know there's probably some best practice ideas I can incorporate here for setting and manging these animations, but I'm kinda figuring them out as I go.
Right now the box moves all the way up and then appears back in the starting position. How do I get it to stay there?
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/M/march_madness/tmp/
<style type="text/css">
#ball {
display:block;
position: absolute;
width: 50px;
height: 50px;
overflow: hidden;
top: 500px;
left: 100px;
background-color: red;
} #action {
display: block;
font-weight:bold;
}
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes throwBall {
from { -webkit-transform: translate( 0px, 0px ); }
25% { -webkit-transform: translate( 75px, -25px ) }
50% { -webkit-transform: translate( 150px, -75px ) }
75% { -webkit-transform: translate( 225px, -150px ) }
to { -webkit-transform: translate( 300px, -300px ); }
}
</style>
<script type="text/javascript">
if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>
<a id='action'>Animate Me</a>
<div id='ball'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#action').bind('click',function(){
$('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
});
});
});
</script>
Just add the end state of the animation to your class as properties set by animation are removed when animation ends. Adding -webkit-transform: translate(300px, -300px); to your animation class fixes your problem.
.animation {
-webkit-animation-name: throwBall;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(300px, -300px);
}