I have two div those contain h tag inside which I have a span tag those contain letters
First Div
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters">E</span>
<span class="letters">F</span>
</h6>
</div>
Second Div
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters"> </span>
<span class="letters">I</span>
<span class="letters">J</span>
</h6>
</div>
First div starts from left top of the screen and scales to a particular location using keyframe
Second div starts from few pixels below the first div of the screen and scales to a particular location using keyframe
I want letters EF in startname and <whitespace>IJ in lastname to disappear after few seconds of startname and lastname align
Here's the code I found which pages div disappear after few seconds
Tried it out in svelte doesn't seem to be working here's the entire code below. How do I achieve the desired result?
<script>
window.onload = function() {
window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
document.getElementById('fadeout').style.opacity = '0';
}
</script>
<style>
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 5s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
}
#fadeout {
opacity: 1;
transition: 3s opacity;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 5s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
</style>
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters" id="fadeout">E</span>
<span class="letters" id="fadeout">F</span>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters" id="fadeout"> </span>
<span class="letters" id="fadeout">I</span>
<span class="letters" id="fadeout">J</span>
</h6>
</div>
Here's a solution with these modifications:
set the transition class after a timeout via Svelte's use:action
(the class has to have the :global() flag so it gets compiled even though the class is not directly used. And both classes are needed :global(.letters.fadeout) so that the specificity is enough to overwrite the setting of the first class, because these elements have the Svelte suffix added .letters.svelte-5nw7mj)
get rid of the whitespace between <span> elements by setting display:flex on the <h6> (a question on this)
if the width should be animated, it must be set before on the <span> elements. This can be done by giving them display: inline-block; and the desired width
->> a REPL
(I reduced the time to 3s so it was faster to try out...)
<script>
function handleFadeout(node) {
setTimeout(() => {
node.classList.add('fadeout')
},3000)
}
</script>
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters" use:handleFadeout>E</span>
<span class="letters" use:handleFadeout>F</span>
</h6>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters" use:handleFadeout> </span>
<span class="letters" use:handleFadeout>I</span>
<span class="letters" use:handleFadeout>J</span>
</h6>
</div>
<style>
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 3s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 3s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
.letters {
display: inline-block;
width: 12px;
}
h6 {
display:flex;
}
:global(.letters.fadeout) {
opacity: 0;
width: 0px;
padding: 0;
overflow: hidden;
transition: all 300ms;
}
</style>
You can't use same id in several elements. Please use class.
The method getElementById() will return only the first element with that id. You can use classes and getElementsByClassName(), which returns the list of elements with that class name. Here is the code.
The error is on repeating id fadeout more than once.
You need to create a new class with the styles you want and put it together with letters: class="letters fadeout". Just a space between.
Read more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors
Here is the result which can help you.
Steps need to remember
HTML attribute ID will be use on single element
You can use getElementsByClassName() or querySelectorAll() to apply opacity in multiple elements.
window.onload = function() {
window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
document.querySelectorAll('span.fadeout').forEach(el => {
el.style.display = "none";
});
}
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 5s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
padding-right: 10px;
}
.fadeout {
opacity: 1;
transition: 3s opacity;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 5s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters fadeout">E</span>
<span class="letters fadeout">F</span>
</h6>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters fadeout"> </span>
<span class="letters fadeout">I</span>
<span class="letters fadeout">J</span>
</h6>
</div>
Related
so I have this program I am trying to type and I found different ways to write the code but the same popup screen comes how do I call the same function but show different headers when clicked? I have tried to use the same function with different classes called but IDK why everything disappears but I haven't coded javascript very much and still new to me. Please help me the way I am trying to am at is when Wedding button is clicked I want to show "you clicked wedding button" when the birthday is clicked "birthday button"..etc, problem is that the wedding functions is only showing how do I fix it?
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP">Birthday</button>
<button id="occassion_layout" class="Party_POPUP">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>
Add an attribute to the button that relates it to the corresponding modal, so you can toggle that modal.
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function closeModal() {
document.querySelectorAll(".modal").forEach(el => el.classList.remove("show-modal"));
}
function toggleModal(e) {
let modal = document.getElementById(e.target.dataset.rel);
if (modal) {
document.querySelectorAll(".modal").forEach(el => {
if (el == modal) {
el.classList.toggle("show-modal");
} else {
el.classList.remove("show-modal");
}
});
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal(event);
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP" data-rel="wedding_modal">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP" data-rel="birthday_modal">Birthday</button>
<button id="occassion_layout" class="Party_POPUP" data-rel="holiday_modal">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div id="wedding_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div id="birthday_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div id="party_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>
This code isn't fully working, but I have to leave now.
I took liberty to format a bit using flex.
I suggest a "toggle" for display using data attribute so you only have to "change" it not add/remove it - and you can use that in the CSS (I used "show" and "hide" values.
To open a modal, I used a "target" data as a class and selected by that - it could be a number of values/combinations.
I set up a "close" event for the X and then triggered them all to close when a button was clicked so if one is already open we only have one at a time open.
I did away with all the "position" css and used flex instead of px this way and that etc. which is hard to maintain from my experience.
Something you can build upon I think.
const modals = document.querySelectorAll(".modal");
const actionButtons = document.querySelectorAll(".modal-activator");
const closeButtons = document.querySelectorAll(".close-button");
/* not used but could trigger the closeEvent etc. */
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
// create close event
const closeEvent = new Event('close-modal');
// Listen for the event.
closeButtons.forEach(btn => btn.addEventListener('close-modal', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
actionButtons.forEach(btn => btn.addEventListener('click', event => {
// console.log(event.target.getAttribute("data-target-modal"));
const dataAttrMap = event.target.dataset;
const modalSelector = ".modal." + dataAttrMap.targetModal;
// console.log(modalSelector);
closeAllModals(closeButtons);
const modalTarget = document.querySelector(modalSelector);
modalTarget.dataset.showToggle = "show";
}));
closeButtons.forEach(btn => btn.addEventListener('click', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
function closeAllModals(buttons) {
buttons.forEach(btn => btn.dispatchEvent(closeEvent));
}
.contaner {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: start;
}
.occasion.contaner {
flex-direction: row;
column-gap: 0.5em;
align-self: flex-start;
margin-bottom: 1rem;
}
.modal {
display: flex;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.modal-content {
border-radius: 0.5rem;
background-color: white;
padding: 1rem 1.5rem;
margin-top: 1rem;
margin-left: 0.5rem;
margin-bottom: 1rem;
}
.close-button {
align-self: flex-start;
margin-left: auto;
width: 1.5rem;
line-height: 1.5rem;
cursor: pointer;
text-align: center;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/* not used
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
*/
.modal[data-show-toggle="show"] {
opacity: 1;
display: flex;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal[data-show-toggle="hide"] {
display: none;
}
[data-target-modal]{padding: 0.5rem;border-radius: 0.5rem;}
[data-target-modal="wedding"]{background-color:pink;border-color:#ff8888;}
[data-target-modal="holiday"]{background-color:#AAAAFF;}
<div class="page container">
<div id="occasion" class="occasion contaner">
<button class="wedding_POPUP modal-activator" data-target-modal="wedding" type="button">Wedding</button>
<button class="Birthday_POPUP modal-activator" data-target-modal="birthday" type="button">Birthday</button>
<button class="Party_POPUP modal-activator" data-target-modal="holiday" type="button">Holiday</button>
</div>
<div class="container">
<div class="modal wedding" data-show-toggle="hide">
<div class="modal-content">
<p>Wedding button clicked</p>
</div>
<span class="close-button">×</span>
</div>
<div class="modal birthday" data-show-toggle="hide">
<div class="modal-content">
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
<div class="modal holiday" data-show-toggle="hide">
<div class="modal-content">
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
</div>
</div>
I am starting with JS and I would like to make the block on the following code appear after 10 seconds.
https://jsfiddle.net/74hmx0vb/1
<div class='popup1' id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img class="imgpopup" src="" />
</div>
<div class="textpopup">
<div class="textpopup1">
</div>
<div class="textpopup2">
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
I would also like to add a slide-in transition when the block appears.
How to do that?
This is using CSS for the animation.
Move .popup1 out of the view to prepare for its animation by setting left: -350px;
Then #keyframes leftSlideIn will contain the style to animate into.
Finally, get .popup1 to animate using leftSlideIn.
animation-fill-mode of forwards will keep the last keyframe state after animation ends.
.popup1 {
height: 100px;
width: 300px;
position: fixed;
z-index: 99999;
background: white;
bottom: 50px;
left: -350px;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
animation: 1s leftSlideIn forwards;
animation-delay: 10s;
}
#keyframes leftSlideIn {
to {
left: 50px;
}
}
.rowpopup {
display: inline-flex;
}
.textpopup {
padding: 10px;
margin-top: -15px;
}
.textpopup1 {
font-size: 16px;
}
.textpopup2 {
font-size: 14px;
}
.iconpopup {
padding: 10px;
}
.imgpopup {
width: 30px;
}
.hidepopup {
display: none !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="popup1" id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img
class="imgpopup"
src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339"
/>
</div>
<div class="textpopup">
<div class="textpopup1">
Order as soon as possible
</div>
<div class="textpopup2">
there is little time remaining for this deal to end
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
Here is a jQuery- CSS solution. I have added the hidepopup class to the main div of you content. I remove it after 10 seconds and add the animation class.
$(document).ready(function(){
setTimeout(displayBox, 10000);
});
function displayBox(){
$('.popup1').removeClass('hidepopup');
$('.popup1').addClass('anim-effect ');
}
.popup1 {
height: 100px;
width:300px;
position: fixed;
z-index: 99999;
background: white;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0,0,0,0.45);
}
.anim-effect{
bottom: 50px;
left:50px;
-webkit-animation: slideIn 1s forwards;
-moz-animation: slideIn 1s forwards;
animation: slideIn 1s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
.rowpopup {
display: inline-flex;
}
.textpopup {
padding: 10px;
margin-top: -15px;
}
.textpopup1 {
font-size:16px;
}
.textpopup2 {
font-size:14px;
}
.iconpopup {
padding:10px;
}
.imgpopup {
width:30px;
}
.hidepopup {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class='popup1 hidepopup' id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
</div>
<div class="textpopup">
<div class="textpopup1">
Order as soon as possible
</div>
<div class="textpopup2">
there is little time remaining for this deal to end
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
document.getElementById("div_to_display").style.display="block"},time);
so the sample code will look like this
document.getElementById("textpopup1").style.display="block"},10000);
the textpopup1 will display after 10 seconds.
I have this simple set of CSS animations that I want to run indefinitely. But for some reason, it only runs twice and stops.
Here's a CodePen example.
Here is how I implement it using Jquery (this is also seen on the code)
$('#slide1').one(animationEnd, () => {
$('#slide1').css('display', 'none').removeClass('animate-1')
$('#slide2').css('display', '').addClass('animate-2')
})
$('#slide2').one(animationEnd, () => {
$('#slide2').css('display', 'none').removeClass('animate-2')
$('#slide3').css('display', '').addClass('animate-3')
})
$('#slide3').one(animationEnd, () => {
$('#slide3').css('display', 'none').removeClass('animate-3')
$('#slide1').css('display', '').addClass('animate-1')
})
See that #slide3 should revert to #slide1 for animation. It did, but it stops after 2 cycles.
You have defined counter variable as const, but it needs to be let to allow later reassignment.
let counter = 0;
Also you need to use $.on instead of $.one when binding to the animation end. $.on is used to bind handler to some event (every time it occurres), while $.one is used for one time binding only (run the handler first time the event occurres, but no more that that).
Here is your updated example:
https://codepen.io/anon/pen/WXNOKQ
answer already given and accepted, this is only for infos since the javaScript takes only three boxes into account.
animation-delay can be used to keep animation looping infinitly:
body {
color: #FFFFFF;
background-color: #27292d;
overflow: hidden;
background: #27292d url('bg.jpg') no-repeat fixed center;
font-family: 'Roboto', sans-serif;
}
.slider-container {
position: absolute;
right: 0;
top: 40%;
}
.slider-content {
position: relative;
font-size: 32px;
text-transform: uppercase;
}
.boxes {
float: left;
padding: 10px 20px;
margin: 5px;
position: relative;
}
.sub-box {
clear: both;
margin-left: 60px;
}
.sub-box span {
color: #000000;
padding: 10px 20px;
background-color: #FFFFFF;
}
.box1 {
background-color: #FF4F80;
}
.box2 {
background-color: #4CA2F0;
}
.box3 {
background-color: #53CEC8;
}
#keyframes heartbeat {
0% {
transform: translate(100px, 200px) scale(0)
}
50% {
transform: translate(100px, 200px) scale(0)
}
60% {
transform: translate(-100px) scale(1.5)
}
70% {
transform: translate(-100px) scale(1.5)
}
80% {
transform: translate(-100px) scale(1.5)
}
100% {
transform: translate(100px, -200px) scale(0)
}
}
.slider-single {
position: absolute;
right: 0;
width: 400px;
height: 50px;
margin: 20px;
transform: scale(0);
}
.animate-1 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -3s infinite;
}
.animate-2 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -1s infinite;
}
.animate-3 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s 1s infinite;
}
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single animate-2">
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single animate-3">
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single" style='display:none;'>
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single" style='display:none;'>
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
I have problem with my button on site. I have to disable onclick function while animation will not end. I using jQuery,Bootstrap library and CSS webkit animations for this elements.
I must do this because CSS and jQuery animation bugged on site and when animation continues, button jumping onclick.
Here is main code:
$(".start button").click(function(){
$("#first-layer").fadeOut("slow", function(){});
$(".start button").addClass("animated fadeOut");
});
button{
display: inline;
width: 200px;
font-family: 'Rajdhani', sans-serif;
font-weight: bold;
color: #56E39F;
margin-left: 15px;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 5s;
}
.button-bg-clr, .button-bg-clr:focus, .button-bg-clr:active, .button-bg-clr:visited {
background-color: #56E39F;
transition: background-color 1000ms linear, color 1s linear;
outline: none !important;
font-weight: bold;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 5s;
}
.button-bg-clr:hover{
background-color: white;
color: black;
}
#img-rain{
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<header>
<div id="first-layer">
<div id="header-elements">
<div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"></div>
<div id="typed-strings" class="text">
<span class="animated fadeInUp" id="typed"></span>
<br/>
<span class="description animated fadeIn">Your weather in one place</span>
</div>
</div>
<div id="typed-strings">
</div>
<div class="start">
<button type="button" class="btn btn-primary btn-lg responsive-width button-bg-clr animated fadeInUp">Get Started</button>
</div>
</div>
</header>
</main>
You can use bind and unbind jQuery methods to create and remove event listener. Here is the example (if anything isn't cleare - feel free to ask):
$(".start button").mouseover(function() {
setTimeout(function() {
$(".start button").bind("click", afterClickAnimation);
}, 1000);
});
$(".start button").mouseleave(function() {
$(".start button").unbind("click", afterClickAnimation);
setInterval(function() {
$(".start button").unbind("click", afterClickAnimation);
}, 1000);
});
function afterClickAnimation() {
$("#first-layer").fadeOut("slow", function(){});
$(".start button").addClass("animated fadeOut");
}
button{
display: inline;
width: 200px;
font-family: 'Rajdhani', sans-serif;
font-weight: bold;
color: #56E39F;
margin-left: 15px;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 5s;
}
.button-bg-clr, .button-bg-clr:focus, .button-bg-clr:active, .button-bg-clr:visited {
background-color: #56E39F;
transition: background-color 1000ms linear, color 1s linear;
outline: none !important;
font-weight: bold;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 5s;
}
.button-bg-clr:hover{
background-color: white;
color: black;
}
#img-rain{
-webkit-animation-duration: 0.5s;
-webkit-animation-delay: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<header>
<div id="first-layer">
<div id="header-elements">
<div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"></div>
<div id="typed-strings" class="text">
<span class="animated fadeInUp" id="typed"></span>
<br/>
<span class="description animated fadeIn">Your weather in one place</span>
</div>
</div>
<div id="typed-strings">
</div>
<div class="start">
<button type="button" class="btn btn-primary btn-lg responsive-width button-bg-clr animated fadeInUp">Get Started</button>
</div>
</div>
</header>
</main>
You can use jQuery ":animated" selector and .is() within click event handler to check if the element is currently animated
function toggle() {
if (!$(this).is(":animated")) {
$(this).animate({
top:this.getBoundingClientRect().top < 50 ? "50px":"0px"
}, 1500)
}
}
$("div").on("click", toggle);
div {
top: 0px;
position: relative;
font-size: 36px;
background: green;
width: calc(18px * 5);
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>click</div>
so as per the jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/
For the purpose of this question the focus is between the first and second slide transition... when you get to the second transition the classes don't get added immediately on the slide they wait for about 1 second the slider area... Can someone explain why as I want to have the classes added immediately on slide load.
p.s I am using getscript from another part of the site to load the script ... this is the script , (slider-animation.js)..
$(function() {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// do something here
$slides.find(".slide-container [class^='add-anim']").removeClass("animat fadeInUpBig bounceInUp");
var $radio = $slides.find(":radio[name='radio-btn']:checked");
and this is the getscript just after the loading of the slider, (.slides) to another page....
$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
$.getScript("js/slider/slider-animations.js");
So I finally found the solution: http://jsfiddle.net/ea55zpe3/
Don't forget the line: overflow: hidden;in body, this gets rid of the scroll bar appearing for a second.
HTML
<div class="tile-area-main" id="tam-content">
<ul class="slides animated bounceInUp">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">thisis an area for some text</p>
<p class="add-anim-left">Thisthis is another text area</p>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slideM">
<p class="add-anim-up">some more text to have some classes added to</p>
<p class="add-anim-up">some more text with something to do</p>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slideM">
<div id="referrals" class="add-anim-up">
<div id="company-title">
<h2>Referrals</h2>
</div>
<p class="add-anim-up">herapist or speech and language therapist) referrals are accepted, music therapy is unfortunately not currently available on the NHS. Schools are able tssions. If you have any questions or enquiries about musitate to contact us. (contact icon)</p>
</div>
<div id="local-links" class="add-anim-up">
<div id="company-title">
<h2>Local Links</h2>
</div>
<br/>
<p class="add-anim-left">MusAbility are always interested in networking and making local links with other businesses, charities and organisations in the North-West. Please send us a message to tell us about yourselves or to arrange to meet for a coffee and a chat (other beverages are accepted!) If you are interested in building a more formal partnership or co-promoting, please get in touch.</p>
</div>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slideM">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
</ul>
CSS
body {
background-color:#000;
overflow:hidden;
}
.metro .tile-area-main {
position: fixed;
left: 290px;
top: 150px;
display: inline-block;
color: #ffffff;
cursor: pointer;
width: 780px;
height: 450px;
overflow: hidden;
z-index : 3000;
}
.metro .tile-area-main p {
margin: 0;
padding: 0 2.4em 0.6em;
font-size: 1.2em;
line-height: 1.5;
color : #fff;
cursor: pointer;
}
.slides {
padding: 0;
width: 609px;
height: 420px;
display: block;
margin: 0 auto;
position: relative;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.slides input {
display: none;
}
.slide-container {
display: block;
}
.slideM {
top: 0;
opacity: 0;
width: 609px;
height: 420px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
.slideM img {
width: 100%;
height: 100%;
}
.slideM p {
color: #fff;
font-size : 22px;
}
.nav {
z-index:9999;
top:0;
}
.nav .prev {
margin-left:-80px
}
.nav .next {
right: -80px;
}
.nav label {
width: 100px;
height: 100%;
display: none;
position: absolute;
opacity: 1;
z-index: 9999;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 56pt;
text-align: center;
line-height: 20px;
font-family:"Varela Round", sans-serif;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slideM:hover + .nav label {
opacity: 0.5;
}
.nav label:hover {
opacity: 1;
}
input:checked + .slide-container .slideM {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
display: block;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 1000px, 0);
transform: translate3d(0, 1000px, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
}
.new-class .slideM {
border: 2px solid red;
}
JS
$(function () {
var $slides = $(".slides");
$slides.first().addClass("new-class");
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
$(".nav").on("click", function () {
$(".add-anim-up").removeClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").removeClass("animated fadeInUpBig bounceInUp");
if ($(".add-anim-up").css('opacity') == '1') {
$(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
$(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
};
});
});
If you switch your removeClass to after the addClass statements, you shouldn't see this behavior (http://jsfiddle.net/013481b9/25/):
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated fadeInUpBig");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated fadeInUpBig");
$slides.find(".slide-container [class^='add-anim']").removeClass("animated fadeInUpBig bounceInUp");
The pause/flicker you were seeing was the classes being removed before the next animation was added.
Another thing I noticed (but that was not causing this specific behavior) was that the transitionend event was being run multiple times (for each change css change to the box), so I added a check for the transform event:
if (e.originalEvent.propertyName == 'transform') {
// do stuff
}
Hopefully that's helpful. Best of luck!