Animation glitches on website - javascript

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:
http://jsfiddle.net/aritro33/v86tE/5/
However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:
I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.
Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?
Thanks so much to anyone who can help!
HTML for second experiment:
<div id="compose"><span id="firstspan">Compose</span>
<span id="fourthspan">Post</span>
</div>
<span id="noposts">- No Posts Yet -</span>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
<input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
<ul id="allposts"></ul>
CSS for second experiment:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
background-color: #2D3E50;
}
#compose {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
left: 100px;
top: 40px;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#compose:hover {
background-color: #219B86;
color: #EBF1F1;
}
#firstspan {
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 22px;
top: 75px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 175px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 275px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
.thirdspan2{
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
position: relative;
left: 365px;
bottom: 315px;
}
.bubble {
position: relative;
left: 440px;
bottom: 365px;
width: 145px;
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 15px;
}
#thehex {
font-family:'Roboto';
font-size: 20px;
height: 30px;
width: 115px;
background-color: white;
position: relative;
border: 0px none;
outline: 0px solid transparent;
top: 10px;
left: 28px;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#noposts {
color: white;
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 440px;
bottom: 100px;
}
#fourthspan {
color: #2c3e50;
font-family:'Roboto';
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
}
ul#allposts li{
min-height: 140px;
width: 500px;
position: relative;
left: 239px;
bottom: 432px;
}
.thecolor2{
height: 50px;
width: 50px;
border-radius: 100px;
background-color: #2AC0A3;
position: relative;
bottom: 591px;
left: 325px;
}
ul{
list-style-type: none;
}
.composeheader2{
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 581px;
left: 325px;
color: white;
}
.secondspan2{
color: white;
font-family:'Roboto';
font-size: 40px;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
position: relative;
left: 17px;
top: 13px;
}
.body2{
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 325px;
bottom: 371px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JS for second experiment:
var clicktwice = false;
var color;
var forrgb;
var finalrgb2;
var myheader;
//198 238 230
//rgb(42, 192, 163) #2AC0A3
//rgb(198, 238, 230) #C6EEE6
//+156, +46, +67
$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();
$('#compose').click(function () {
setInterval(function () {
$('#noposts').fadeTo(10, 0);
}, 3000);
});
$("#thehex").keyup(function () {
color = $("#thehex").val();
forrgb = $("#thehex").val();
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
forrgb = $('#thehex').val().replace('#', '');
var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
var conv = reg.match(/.{2}/g);
var r = parseInt(conv[0], 16);
r = r + 156;
var g = parseInt(conv[1], 16);
g = g + 46;
var b = parseInt(conv[2], 16);
b = b + 67;
var rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
var finalrgb = ('rgb(' + rgb + ')');
finalrgb2 = finalrgb;
$("#body").css("background-color", finalrgb);
});
$('#compose').click(function () {
if (clicktwice === false) {
color = "#2AC0A3";
finalrgb2 = "rgb(198, 238, 230)";
$("#secondspan").val("Write Header Here:");
$('#thirdspan').text("Write context text here:");
$('#thehex').val(color);
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
$("#body").css("background-color", finalrgb2);
$('#thecolor').fadeTo(0, 1);
$('#body').fadeTo(0,1);
$('.bubble').fadeTo(0,1);
$('#composeheader').fadeTo(0, 1);
$('#firstspan').hide();
$('#fourthspan').show();
$('#thecolor').show();
$('.bubble').show();
$('#composeheader').show();
$('#body').show();
$(".composeheader2").animate({
bottom: '-=248px'
}, 400);
$(".body2").animate({
bottom:'-=248px'
}, 400);
$(".thecolor2").animate({
bottom:'-=245px'
}, 400);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
clicktwice = true;
} else if (clicktwice === true) {
myheader = $("#secondspan").val();
$('.bubble').fadeTo(300, 0);
$('#firstspan').show();
$('#fourthspan').hide();
clicktwice = false;
var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.className = "thecolor2";
var composeheader2 = document.createElement('div');
composeheader2.className = "composeheader2";
var secondspan2 = document.createElement('span');
secondspan2.className = "secondspan2";
var body2 = document.createElement('div');
body2.className = "body2";
var thirdspan2 = document.createElement('span');
thirdspan2.className = "thirdspan2";
var bodytext = $('#thirdspan').html();
thirdspan2.innerHTML = bodytext;
body2.style.backgroundColor = finalrgb2;
secondspan2.innerHTML = myheader;
thecolor2.style.backgroundColor = color;
composeheader2.style.backgroundColor = color;
secondspan2.style.backgroundColor = color;
secondspan2.style.borderColor = color;
$('#thecolor').fadeTo(0, 0);
$('#body').fadeTo(0, 0);
$('#composeheader').fadeTo(0, 0);
thestream.appendChild(body2);
thestream.appendChild(thecolor2);
thestream.appendChild(composeheader2);
composeheader2.appendChild(secondspan2);
body2.appendChild(thirdspan2);
$('#thecolor').removeClass('box animated bounceInDown');
$('.bubble').removeClass('box animated bounceInDown');
$('#composeheader').removeClass('box animated bounceInDown');
$('#body').removeClass('box animated bounceInDown');
}
});


I've cleaned this up A LOT, the code should be much easier to read and follow now:
HTML
<script id="empty-message" type="html/template">
<div class="message new box animated bounceInDown">
<div class="thecolor"></div>
<div class="bubble">
<input type="text" class="hexcolor" value="#2AC0A3" />
</div>
<div class="composeheader">
<input type="text" value="Write Header Here:" />
</div>
<div class="body">
<span contenteditable="true">Write context text here:</span>
</div>
</div>
</script>
<div id="message-actions">
<span class="compose">Compose</span>
<span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>
JavaScript
var getRGB = function(color) {
var rgb = color.replace('#', '');
rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
var conv = rgb.match(/.{2}/g);
var r = parseInt(conv[0], 16) + 156;
var g = parseInt(conv[1], 16); + 46;
var b = parseInt(conv[2], 16); + 67;
rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
rgb = ('rgb(' + rgb + ')');
return rgb;
};
$(document).ready(function() {
$('#all-posts').on('keyup', '.message.new .hexcolor', function () {
var color = $(this).val();
$(".message.new .thecolor, .message.new .composeheader").css("background-color", color);
$(".message.new .body").css("background-color", getRGB(color));
});
$('#message-actions').click(function () {
if ($('.compose').is(':visible')) {
$('#all-posts').prepend($('#empty-message').html());
} else {
var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
$message.find('.composeheader > input').attr('readonly', true);
$message.find('.body > span').attr('contenteditable', false);
}
$('#no-posts').hide();
$('.compose, .post').toggle();
});
});
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
/* css for animation */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* page */
body {
background-color: #2D3E50;
font-family:'Roboto';
min-width: 960px;
}
/* message compose */
.message {
margin-top: 40px;
}
.composeheader {
background-color:#2AC0A3;
color: white;
padding: 10px 15px;
clear: both;
}
.composeheader INPUT {
color: white;
font-size: 40px;
background-color: transparent;
border-width: 0;
font-family: 'Roboto';
}
.body {
min-height: 80px;
overflow: hidden;
padding: 20px;
background-color: #C6EEE6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.body > span {
color: black;
outline: 0px solid transparent;
}
.thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
float: left;
margin-bottom: 10px;
}
.bubble { display: none; }
.message.new .bubble {
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
margin-left: 20px;
display: block;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 55px;
top: 15px;
}
.hexcolor {
font-size: 20px;
height: 30px;
width: 100px;
background-color: transparent;
border-width: 0px;
margin: 10px 5px
}
/* compose button */
#message-actions {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
float: left;
margin: 40px 100px 10px;
}
#message-actions:hover {
background-color: #219B86;
color: #EBF1F1;
}
#no-posts {
color: white;
font-size: 39px;
float: left;
margin-top: 120px;
}
.compose {
font-size: 39px;
position: relative;
left: 22px;
top: 75px;
}
.post {
color: #2c3e50;
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
display: none;
}
/* messages */
#all-posts {
min-height: 140px;
width: 500px;
float: left;
}
jsFiddle Demo
Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.
I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.
EDIT 2:
I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page).
I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.
I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.

Related

How to prevent an animated icon from bleeding out from within an input box

I have an input field with a search Icon inside. When the user clicks inside the input field the Icon fades out to the left, in doing so, it bleeds out of the input box.
Is there a way to prevent the search Icon from bleeding out? I don't want the Icon to be visible past the border of the input box.
cshtml page:
<header>
<nav id="navBar" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="search-bar center">
<img id="searchIcon" src="https://svgur.com/i/XUB.svg" class="icon search-icon" />
<input id="searchBox" class="input-text" placeholder="Find games for sale" type="text">
</div>
</nav>
</header>
js:
$('#searchBox').on({
focus: function () {
document.getElementById("searchIcon").classList.remove("fadeRightSearchIcon");
document.getElementById("searchIcon").classList.add("fadeLeftSearchIcon");
},
blur: function () {
document.getElementById("searchIcon").classList.remove("fadeLeftSearchIcon");
document.getElementById("searchIcon").classList.add("fadeRightSearchIcon");
}
});
css:
.search-bar {
position: relative;
}
.search-bar.active .input-text {
max-width: 80%;
border: 1px solid #ccc;
background: #eee;
}
.icon {
position: absolute;
top: -2px;
left: 0;
padding: 13px 15px 13px 11px;
}
.search-icon {
width: 50px;
height: auto;
}
.search-bar .input-text {
height: 45px;
padding: 8px 6px 8px 40px;
max-width: 200%;
border-radius: 25px;
outline: none !important;
border: 2px solid;
width: 550px;
transition-property: padding;
transition-duration: 0.5s;
}
.input-text:active, .input-text:focus {
padding: 8px 6px 8px 15px;
}
.fadeLeftSearchIcon {
animation-name: fadeInLeft;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.fadeRightSearchIcon {
animation-name: fadeInRight;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25px);
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-25px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.center {
margin: 0 auto;
text-align: center;
display: inline-block;
top: 0;
bottom: 0;
}

Try to change to -25% ,check official site:
#keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
#-webkit-keyframes fadeInLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-25%);
}
}
Result:

Issue with adding a new animation to the text

I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?

The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>

Noty (notification library) dialog has a transparent background - AngularJS Web Application

I currently am in the process of making an AngularJS web application from scratch and am new to AngularJS, which is important to note because I could always be missing something fundamental.
The issue is this:
I have a fully functional Noty dialog that works exactly as it should aside from having no background. I installed Noty using npm install noty and included its JavaScript and CSS files in my index HTML file.
<link href="node_modules/noty/lib/noty.css" rel="stylesheet">
<script src="node_modules/noty/lib/noty.js" type="text/javascript"></script>
The CSS file's contents:
.noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
position: fixed;
margin: 0;
padding: 0;
z-index: 9999999;
-webkit-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
filter: blur(0);
-webkit-filter: blur(0);
max-width: 90%; }
#noty_layout__top {
top: 0;
left: 5%;
width: 90%; }
#noty_layout__topLeft {
top: 20px;
left: 20px;
width: 325px; }
#noty_layout__topCenter {
top: 5%;
left: 50%;
width: 325px;
-webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
#noty_layout__topRight {
top: 20px;
right: 20px;
width: 325px; }
#noty_layout__bottom {
bottom: 0;
left: 5%;
width: 90%; }
#noty_layout__bottomLeft {
bottom: 20px;
left: 20px;
width: 325px; }
#noty_layout__bottomCenter {
bottom: 5%;
left: 50%;
width: 325px;
-webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
#noty_layout__bottomRight {
bottom: 20px;
right: 20px;
width: 325px; }
#noty_layout__center {
top: 50%;
left: 50%;
width: 325px;
-webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); }
#noty_layout__centerLeft {
top: 50%;
left: 20px;
width: 325px;
-webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
#noty_layout__centerRight {
top: 50%;
right: 20px;
width: 325px;
-webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
.noty_progressbar {
display: none; }
.noty_has_timeout.noty_has_progressbar .noty_progressbar {
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #646464;
opacity: 0.2;
filter: alpha(opacity=10); }
.noty_bar {
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
-ms-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1);
-webkit-font-smoothing: subpixel-antialiased;
overflow: hidden; }
.noty_effects_open {
opacity: 0;
-webkit-transform: translate(50%);
-ms-transform: translate(50%);
transform: translate(50%);
-webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.noty_effects_close {
-webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
.noty_fix_effects_height {
-webkit-animation: noty_anim_height 75ms ease-out;
animation: noty_anim_height 75ms ease-out; }
.noty_close_with_click {
cursor: pointer; }
.noty_close_button {
position: absolute;
top: 2px;
right: 2px;
font-weight: bold;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 2px;
cursor: pointer;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out; }
.noty_close_button:hover {
background-color: rgba(0, 0, 0, 0.1); }
.noty_modal {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
z-index: 10000;
opacity: .3;
left: 0;
top: 0; }
.noty_modal.noty_modal_open {
opacity: 0;
-webkit-animation: noty_modal_in .3s ease-out;
animation: noty_modal_in .3s ease-out; }
.noty_modal.noty_modal_close {
-webkit-animation: noty_modal_out .3s ease-out;
animation: noty_modal_out .3s ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; }
#-webkit-keyframes noty_modal_in {
100% {
opacity: .3; } }
#keyframes noty_modal_in {
100% {
opacity: .3; } }
#-webkit-keyframes noty_modal_out {
100% {
opacity: 0; } }
#keyframes noty_modal_out {
100% {
opacity: 0; } }
#keyframes noty_modal_out {
100% {
opacity: 0; } }
#-webkit-keyframes noty_anim_in {
100% {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1; } }
#keyframes noty_anim_in {
100% {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1; } }
#-webkit-keyframes noty_anim_out {
100% {
-webkit-transform: translate(50%);
transform: translate(50%);
opacity: 0; } }
#keyframes noty_anim_out {
100% {
-webkit-transform: translate(50%);
transform: translate(50%);
opacity: 0; } }
#-webkit-keyframes noty_anim_height {
100% {
height: 0; } }
#keyframes noty_anim_height {
100% {
height: 0; } }
/*# sourceMappingURL=noty.css.map*/
The only other places I have seen this issue posted, the answer was just "You forgot to include CSS files." However, I have done a little digging and I don't see what I could be missing.
Thank you in advance for suggestions/solutions
I appreciate your time and help.

I've had the same issue. I fixed it by adding the following two lines in my app.scss:
#import "~noty/src/noty.scss";
#import "~noty/src/themes/mint.scss";

Getting Data-ID "Undefined"

I used floatingMenu
and I want get ID numbers with Data-id but I can not get the ID number of the buttons
Output:
example.com/?id=undefined
Why am I getting this error?
var myDiv = document.querySelector('.designer-actions');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + myDiv.dataset.idNo
}, ]
});
ul.floating-menu {
position: absolute;
background-color: #000;
border-radius: 4px
}
ul.floating-menu[data-fm-floated="top"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #000
}
ul.floating-menu[data-fm-floated="left"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
right: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #000
}
ul.floating-menu[data-fm-floated="right"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
left: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #000
}
ul.floating-menu[data-fm-floated="bottom"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #000
}
ul.floating-menu li {
position: relative;
float: left;
height: 100%
}
ul.floating-menu li a {
position: relative;
float: left;
color: #fff;
font-size: 13px;
padding: 4px 12px;
text-decoration: none;
line-height: 32px
}
ul.floating-menu li .fm-icon {
position: relative;
float: left;
margin-right: 8px;
font-size: 24px;
line-height: 32px;
color: #fff
}
ul.floating-menu.animated {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s
}
ul.floating-menu.visible-transit {
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="left"].fadeInPosition {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="right"].fadeInPosition {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="top"].fadeInPosition {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="bottom"].fadeInPosition {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://test3.moverals.com/mdm/floating-menu.js"></script>
<div id='designer-actions' class='designer-actions'>
<a class='icon ion-ios-more' data-idNo='1' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button1</a>
<a class='icon ion-ios-more' data-idNo='2' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button2</a>
</div>
JSFiddle

Updated answer:
You need to loop through the array:
$('.designer-actions a').each(function(){
idNo = $(this).data('idno');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + idNo
}, ]
});
});

Keep div static when other appears

I have a jsfiddle as follows:
http://jsfiddle.net/aritro33/uX7HG/
And I have a problem that when you hit the compose button, the post that appears gets pushed down slightly, but noticeably, by the arrangement of colors that pops up seconds later. How do I keep the post from moving as the arrangement of colors pops up?
Thanks!
HTML:
<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
<div id = "sidebarhex"></div>
<div id = "taghex"><span id = "withhex" contenteditable = "true">#2AC0A3</span></div>
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
CSS:
#red {
background-color: #2ac0a3;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
bottom: 220px;
left: 365px;
}
#orange {
background-color: #25ac92;
position:relative;
bottom:236px;
left: 405px;
}
#yellow {
position: relative;
bottom: 252px;
left: 445px;
background-color:#219982;
}
#green {
position: relative;
left: 485px;
bottom: 268px;
background-color: #1d8672;
}
#turquoise {
position: relative;
left: 525px;
bottom: 284px;
background-color: #197361;
}
#blue {
position: relative;
left: 565px;
bottom: 300px;
background-color: #156051;
}
#purple {
position: relative;
left: 605px;
bottom: 316px;
background-color: #104c41;
}
#gray {
position: relative;
left: 645px;
bottom: 332px;
background-color: #0c3930;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 320px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 100px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 320px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#sidebarhex{
height: 30px;
width: 7px;
background-color: #156051;
position: relative;
left: 500px;
bottom: 30px;
}
#taghex{
height: 30px;
width: 80px;
background-color: #219982;
position: relative;
left: 420px;
bottom: 60px;
}
#withhex{
font-family: 'Roboto';
position: relative;
top: 4px;
left: 9px;
border: 0px solid transparent;
outline: none;
}
.color{
height: 16px;
width: 40px;
}
#red.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 218px;
}
#orange.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 233px;
}
#red.orangeselected{
position: relative;
bottom: 215px;
}
Animation CSS:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
JS:
$('#red').click(function(){
$('#red').addClass('active');
$('#red').removeClass('orangeselected');
$('#orange').removeClass('active');
});
$('#orange').click(function(){
$('#orange').addClass('active');
$('#red').removeClass('active');
$('#red').addClass('orangeselected');
});
$('#sidebarhex').fadeTo(0,1);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
setTimeout(function () {
setTimeout(function () {
$('#red').fadeTo(0, 400);
$('#orange').fadeTo(0, 400);
$('#yellow').fadeTo(0, 400);
$('#green').fadeTo(0, 400);
$('#turquoise').fadeTo(0, 400);
$('#blue').fadeTo(0, 400);
$('#purple').fadeTo(0, 400);
$('#gray').fadeTo(0, 400);
}, 400);
$('#red').addClass('box animated bounceInUp');
$('#orange').addClass('box animated bounceInUp');
$('#yellow').addClass('box animated bounceInUp');
$('#green').addClass('box animated bounceInUp');
$('#turquoise').addClass('box animated bounceInUp');
$('#blue').addClass('box animated bounceInUp');
$('#purple').addClass('box animated bounceInUp');
$('#gray').addClass('box animated bounceInUp');
}, 500);
setTimeout(function(){
$('#red').addClass('active');
}, 1050);

Categories