How do I make an element on my webpage slide in after 3 seconds, and once user get it active (select what they want), it slides out automatically.
I want the element to be hidden upon load, untill 3 seconds before it slides in. And once user selects what they want, it slides out.
I've made my research but all I can see is with a button attached. How do I make this happen without that. Automatically.
JavaScript might be involved but I don't know how to go about that.
Please I really would appreciate any suggestion
#keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
#mmj {
position: relative !important;
/* This section calls the slideInFromRight animation we defined above */
animation: 2s ease-out 3s 1 slideInFromRight !important;
}
<div id="mmj">
<div id="google_translate_element"></div>
<div class="vl"></div>
</div>
1- the code you provided doesn't reproduce any issue.
2- according to your words
I want the element to be hidden upon load, until 3 seconds before it slides in. And once user selects what they want, it slides out.
I simply used margin to achieve that. here is the code.
let container = document.getElementById("container");
let btns = container.children;
setTimeout(() => {
container.style.marginRight = "0px";
}, 3000); // to slide it in after 3 seconds
for (const btn of btns) {
btn.addEventListener("click", clicked =>{
container.style.marginRight = "-350px";
// to slide it out after clicking one of the cards.
})
};
body {
background: lightgrey;
display: flex;
justify-content: right;
}
#container {
background: lightcoral;
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-right: -350px;
transition: 1s;
}
.btn {
width: 33%;
height: 50%;
}
<body>
<div class="container" id="container">
<button class="btn">click me</button>
<button class="btn">click me</button>
<button class="btn">click me</button>
<button class="btn">click me</button>
<button class="btn">click me</button>
<button class="btn">click me</button>
</div>
</body>
Related
So I have this original box lets say box #1 (shown on left). Box #1 has a button on it that when it is clicked, it opens box #2 (shown on right). Box #2 contains a button on it that when that is clicked, I want box #1 to highlight to show that box #2 came from box #1. Any ideas on how to do this?
I was trying stuff with ng-click but can't figure out what exactly needs to be in it
There are many ways to achieve this with varying levels of complexity depending on what you need from the system and the components in place.
To start, here's a very basic solution that achieves what you are after, all achieved through an object which holds the state of the system. Added an *ngFor to demonstrate how you could easily achieve multiple boxes (assuming this would be beneficial). Stackblitz
.html
<div class="box-group-container">
<div
*ngFor="let box of boxes"
class="box-group">
<div
class="box box-one"
[class.is-flashing]="box.flashBoxOne">
<button (click)="box.showBoxTwo = !box.showBoxTwo">{{ !box.showBoxTwo ? 'Show' : 'Hide' }}</button>
</div>
<div
*ngIf="box.showBoxTwo"
class="box box-two">
<button (click)="box.flashBoxOne = !box.flashBoxOne">{{ !box.flashBoxOne ? 'Flash' : 'Stop' }}</button>
</div>
</div>
<button (click)="addBoxGroup()">Add Box Group</button>
</div>
.ts
boxes = [
{
showBoxTwo: false,
flashBoxOne: false,
},
]
addBoxGroup() {
this.boxes.push({
showBoxTwo: false,
flashBoxOne: false,
})
}
.scss
.box-group-container {
display: flex;
flex-direction: column;
gap: 8px;
.box-group {
display: flex;
flex-direction: row;
gap: 8px;
.box {
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
&.is-flashing {
animation: flashing 0.5s infinite;
}
}
.box-one {
background-color: blue;
}
.box-two {
background-color: red;
}
}
}
#keyframes flashing {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
I have several images that I need to horizontally cross the page to the right, exit the page and then re-enter the page from the left. Some of the images will already be out of view, so they will have to enter first.
This is a sketch of what I've tried so far:
var elems = document.getElementsByClassName("child");
for (const elem of elems) {
elem.animate(
[
// keyframes
{transform: "translateX(300px)"},
],
{
// timing options
duration: 5000,
iterations: Infinity
},
);
}
.container {
background-color: aqua;
width: 1000px;
display: flex;
flex-direction: row;
overflow:hidden;
padding: 20px 0;
gap: 10px;
}
.child {
background-color: red;
flex: 0 0 20%;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
For start I tried to slide out all the divs, but even that I don't understand why is not working.
I'm using your code as a starting point however there are 2 major differences between my code and yours. The first is that this solution is not using JavaScript, which is a plus, but it may not be what you are looking for. The second difference is that rather of animating the div elements with the class child, this solution is animating a wrapper div with the class slider.
One important thing to note, is that some calculations must be used for the animation to work properly. Adding or removing elements will require that the values are updated. The formula is the following:
Child div size: 20% (CHILD_SIZE)
Gap between children divs: 10px (GAP)
Amount of the children: 8 (CHILDREN_AMOUNT)
So together it goes like this: translateX(calc((CHILD_SIZE - GAP) * CHILDREN_AMOUNT));
var slider = document.getElementsByClassName('slider')[0];
slider.innerHTML += slider.innerHTML;
.container {
background-color: aqua;
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
flex-direction: row;
padding: 20px 0;
gap: 10px;
animation: slideRight 10s infinite linear;
}
.child {
background-color: red;
flex: 0 0 20%;
}
#keyframes slideRight {
from {
transform: translateX(calc((-20% - 10px) * 8));
}
to {
transform: translateX(100% + 10px);
}
}
<div class="container">
<div class="slider">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
</div>
Updated considering the comment:
There are a few ways, the simpler way though is just to duplicate the div.child elements without touching the animation formula. This can be done just in the markup or using JavaScript to have a more dynamic solution (I have updated the code above to have the desired result).
What I consider a better way, though (not going to elaborate here as many libraries already solve this problem, just search for carousel js libraries), is to just prepend and append the necessary amount of elements to have the desired result instead of duplicating all of them.
I'm trying to create a website with a mock terminal that has the appearance of lines being typed, one after the other. I found a CSS animation that displays one character at a time, but I'm running into issues with delaying the animations of each line so that they aren't appearing all at once.
Here's my code:
//attempted javascript loop
// var code_lines =document.getElementsByClassName("line");
// for (i=0; i<=5; i++){
// code_lines:nth-child(i).style.animation = "typing 2.5s steps(30, end)";
// }
//attemped jquery loop
//$('#terminal_text').children('line').each(function () {
// for (i=0; i<=5; i++){
// i.style.animation = "typing 2.5s steps(30, end)";
//}
//});
.terminal {
width: 500px;
height: 500px;
background-color: black;
color: white;
padding: 20px;
}
.line {
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
animation: typing 2.5s steps(30, end);
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
<div class="terminal">
<div id="terminal_text">
<p class="line"> Last login: </p>
<p class="line">megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
<p class="line">Cloning into 'Rae_Portfolio"...</p>
<p class="line">remote: Loading website illustrations: 172 objects, done.</p>
<p class="line">remote: Counting objects: 100% (172/172) done.</p>
</div>
</div>
I'll tweak timing, but for now I just want the animations to start one after another. I'm having a hard time finding clear examples of how to use class children to apply the animation. Any guidance would be greatly appreciated!
Codepen: https://codepen.io/coloradical/pen/gOaMzjm
Here's how I'd do it: first, remove the line class from your <p> tags and set them to display:none. Then, have a Javascript program add the line class to the first <p> and also add an event listener for the animationend event on that element. (Also change the CSS for .line so it has an additional rule for display: block.) When that event fires, it removes class line from the current <p> and adds the line class and the same event listener to the next <p>. (See How do you detect when CSS animations start and end with JavaScript?.)
In other words, every time animationend fires, it removes its triggering element's line class and adds the line class as well as an event listener to the next <p>.
https://codepen.io/km0ser/pen/xxwOjNb
function do_it() {
$("p.line")
.removeClass("line")
.addClass("done")
.next()
.addClass("line")
.on("animationend", function () {
do_it();
});
}
$("#terminal_text p.line").on("animationend", function () {
do_it();
});
.terminal {
width: 500px;
height: 500px;
background-color: black;
color: white;
padding: 20px;
}
.done {
display: block !important;
}
#terminal_text p {
display: none; /* hide by default */
}
.line {
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
animation: typing 2.5s steps(30, end);
display: block !important;
}
/* The typing effect */
#keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="terminal">
<div id="terminal_text">
<p class="line"> Last login: </p>
<p>megan-byers:~ designelixir$ git clone https://github.com/coloradical/Rae_Portfolio.git </p>
<p>Cloning into 'Rae_Portfolio"...</p>
<p>remote: Loading website illustrations: 172 objects, done.</p>
<p>remote: Counting objects: 100% (172/172) done.</p>
</div>
</div>
First post, so hopefully it is clear enough.
I have been tasked to create a modal object that overlays a multi-column/-row grid layout on a page. The modal should appear on hover of a particular grid item. When the modal appears, the background of the grid area only should dim. I was asked not to use any additionally libraries (e.g., jQuery).
To complete this task, I added two modal objects, one for the actual modal window and the other for the dimmer object. I could not get the CSS hover to work for both objects on the hover of the item in question, so I used JavaScript to add the CSS changes.
The transition effect works for the transition in but not the transition out. I assume I am overthinking this task so appreciate any suggestions.
<style type="text/css">
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
margin: 0;
padding: 0;
}
.column {
background-color: hsl(0,80%,70%);
}
#modal_maker {
font-size: 5vw;
height: 100%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
#modal_maker, #modal {
z-index: 2;
}
#modal {
visibility: hidden;
background-color: hsl(200,50%,70%);
width: 80%;
height: 80%;
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
opacity: 0;
transition: opacity 1s;
}
#background-dimmer {
visibility: hidden;
background-color: black;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
</style>
<body>
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column" id="modal_maker">Hover Here</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div id="modal"></div>
<div id="background-dimmer"></div>
</div>
<script type="text/javascript">
document.querySelector(".container").addEventListener("mouseover", function(el) {
if (el.target.id=="modal_maker" || el.target.id=="modal") {
document.getElementById("modal").style.cssText = "visibility:visible; opacity: 1;"
document.getElementById("background-dimmer").style.cssText = "visibility:visible; opacity: 0.75;"
} else {
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
}
})
</script>
</body>
Its all because of visibility:hidden
in js
...
} else {
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
}
...
in instant way you change opacity to 0 but also visibility:hidden so there is no time for transition, right away when code fires element is hiding.
You use cssText to change properties of element so visibility:visible won't be there when you move mouse on the other element, instead there will be visibility:hidden from the css(so you need to delete that also).
I know that it casues #modal to capture mouseover event then... thats the problem to figure out
I don't know if this solution is on purpose to hide modal when you mouseover other element only, what if I will leave mouse entirely from the table, the modal will stay... just wanted to mention maybe its not relevent.
I made fiddle based on your code: https://jsfiddle.net/svh6dpfk/1/
One idea to fix this #modal capturing event is adding proper visibility as a callback(there is transitionend event which will capture moment when animation is done, so something like this would help:
document.querySelector("#modal, #background-dimmer").addEventListener("transitionend", function(el) {
if(parseFloat(el.target.style.opacity) > 0){
el.target.style.cssText = "visibility:visible;opacity:1";
alert("animation end visible");
}else{
el.target.style.cssText = "visibility:hidden;opacity:0";
alert("animation end unvisible");
}
});
Update
it does work right now for me...
its a bit tricky, your css needs to have visibility:hidden for modal and background-dimmer(like your code has)
this seems to work for me:
document.querySelector(".container").addEventListener("mouseover", function(el) {
if (el.target.id=="modal_maker" || el.target.id=="modal") {
document.getElementById("modal").style.cssText = "visibility:visible;opacity: 1;"
document.getElementById("background-dimmer").style.cssText = "visibility:visible;opacity: 0.75;"
} else {
if(document.getElementById("modal").style.opacity == "1"){
document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="visibility:visible;opacity: 0; ")
}
/* alert("should be on leave") */;
}
})
this part .forEach(x => x.style.cssText="visibility:visible;opacity: 0; ") changes because your css has always visibility:hidden, so you need to perform transition always on visible.
full example:
https://jsfiddle.net/Loary65w/1/
you need to remember to have cross browser support you need to cover all those events
webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend
Hope it helps. Maybe there is better solution much simpler and I overcomplicated that one :F
I've come across some strange behavior in Chrome 60.0 when removing a class from an element with a very specific configuration.
I removed the fade class from an <h1> element and it makes it completely disappear. The problem can be reproduced by removing the class in the dev-tools element inspector as well. Can anyone tell me what's going on here?
The element should just go back to full opacity after clicking the button.
var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function(){
h1.classList.remove('fade');
});
.center {
overflow: hidden;
}
h1 {
float: left;
overflow: hidden;
}
.fade {
opacity: .2;
}
<div class="center">
<div>
<h1 class="fade">Watch me disappear</h1>
</div>
</div>
<button>Click</button>
Removing the overflow: hidden property defined for h1, will solve your problem.
var button = document.querySelector('button');
var h1 = document.querySelector('h1');
button.addEventListener('click', function() {
h1.classList.remove('fade');
});
.center {
overflow: hidden;
}
h1 {
float: left;
}
.fade {
opacity: .2;
}
<div class="center">
<div>
<h1 class="fade">Watch me disappear</h1>
</div>
</div>
<button>Click</button>