Closeable bottom bar with slide animation

Closeable bottom bar with slide animation - javascript

I want a bar for the bottom of my webpage that has a nice animation, similar to this one: http://css-tricks.com/pop-from-top-notification/ but stays on screen until it is closed. This is all the css I have so far:
.about {
background: black;
text-align: left;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
color: #0f0;
font-size: 21px;
font-family: Timeburner;
padding: 10px;
}
I don't care if it takes jquery or somthing else, as long as it works.

you need to add this css:
#-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(0px); }
}
#-moz-keyframes slideUp {
0% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(0px); }
}
#note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideUp 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideUp 2.5s 1.0s 1 ease forwards;
}
here is the Fiddle Demo
here is your example with the Css animation: Fiddle (you will need to add the JS for the close button)
here is and example with slide down on close: Fiddle it uses Jquery but can also be done using pure JS:
close = document.getElementById("close");
close.addEventListener('click', function() {
$("#note").slideUp();
}, false);

Related

Hide loading icon after 3 sec, when we click on a link <a

I have a loading icon in CSS, when someone clicks on a link the problem is in the mobile version I have a slide menu that open with one tag, or link, and the CSS icon is showing and never disappear.
I need to hide the CSS icon after 3 sec, this is my code.
$('a').click(function(){
$('.loadingDiv').fadeIn('slow', function(){
$('.loadingDiv').delay(3000).fadeOut();
});
$('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
});
.loadingDiv {
position: fixed;
left: 45%;
top: 30%;
width: 100%;
height: 100%;
z-index: 9999;
opacity: .5;
width: 40px;
height: 40px;
background-color: #333;
width: 40px;
height: 40px;
background-color: #333;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
But is not working, any help will be great, because the

Don't forget about setTimeout.
You can simply:
setTimeout(function () {
... do the fading out here ...
}, 3000);
I always prefer vanila-js solution over jQuery one. ;)
Cheers!

Css Custom Loader Animation

My Custom CSS Loader
.LoaderWrap {
width:100%;
margin-top:25px;
box-sizing:border-box;
}
.sampleContainer {
float:left;
height: 40px;
width: 100%;
margin:10px 10px 20px 10px;
box-sizing:border-box;
}
.loader,
.loader.Large {
position:absolute;
left:50%;
box-sizing:border-box;
}
.dot,
.loader.Large .dot {
display: inline-block;
margin-top:20px;
width: 8px;
height: 8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.loader.Large .dot {
width: 24px;
height: 24px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius: 12px;
}
/** Large Dots **/
.loader.Large .dot_1 {
animation: LargeDot1 1.5s linear infinite;
left:38px;
}
#keyframes LargeDot1 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(180deg) translateX(-38px); }
75% { transform: rotate(180deg) translateX(-38px); }
100% { transform: rotate(360deg) translateX(-38px); }
}
.loader.Large .dot_2 {
left:76px;
animation: LargeDot2 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot2 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(-180deg) translateX(-38px); }
75% { transform: rotate(-180deg) translateX(-38px); }
100% { transform: rotate(-360deg) translateX(-38px); }
}
.loader.Large .dot_3 {
left:38px;
animation: LargeDot3 1.5s linear infinite;
}
#keyframes LargeDot3 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(180deg) translateX(38px); }
75% { transform: rotate(180deg) translateX(38px); }
100% { transform: rotate(360deg) translateX(38px); }
}
.loader.Large .dot_4 {
left:76px;
animation: LargeDot4 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot4 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(-180deg) translateX(38px); }
75% { transform: rotate(-180deg) translateX(38px); }
100% { transform: rotate(-360deg) translateX(38px); }
}
<div class="LoaderWrap clearfix">
<div class="loader Large">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
So What's Wrong?
Nothing is 'wrong' as such, feel free to use this loader by all means! However I would like to make this more interesting, turn the dots into stars for example and maybe even go one step further by having the dots (circles) transform into different shapes.
As much as I love CSS and consider myself to be an expert, animating CSS is fairly new to me whereas this is the first CSS animation I have made and I want to make this more unique and crazy for the theme of the website I am working on, not to say that I don't love this loader and asking for, call it improving my skills?, means people will also use, but nevertheless, it is a learning path!
Minimal Question:
How can I have myh dots (circles) as starts OR have my dots (circles) tranform into different shapes, whether it is transforming from basic squares to circles or whatnot using pure CSS and/or JS/jQuery?

Alternative to using position absolute for page transitions in a SPA

I am building a Single Page Application and I am using position absolute on my views (pages) in order to achieve page transitions while I navigate to different pages. I am using css animations and the effect I am after is one page to slide out to the right and at the same time the next page to slide in from the left.
This works fine as it is, but the problem is that most mobile browsers render the absolute positioned elements as a different layout and this has a negative effect on performance.
I wonder if there is an alternative to absolute positioning in order to achieve the effect I described above. I have tried to use display: flex and float: left, but could not achieve the same effect.
Check a very basic example of what I am doing:
#-webkit-keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); }
}
#keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
#-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
#keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
.moveFromLeft {
-webkit-animation: moveFromLeft .7s ease both;
animation: moveFromLeft .7s ease both;
}
.moveToRight {
-webkit-animation: moveToRight .7s ease both;
animation: moveToRight .7s ease both;
}
html,
body,
.page-container {
height: 100%;
position: relative;
width: 100%;
}
.page {
height: 400px;
color: #FFF;
position: absolute;
left: -100%;
top: 0;
width: 100%;
display: none;
}
.page.active {
display: block;
left: 0;
}
.page1 {
background: #000;
}
.page2 {
background: #0F0;
}
Fiddle

Scaling a element inside an animation with same property

I'm trying to scale an element that's in an animation on hover. My animation consists of three elements
li{
&.current-projects {
-webkit-animation: first 5s infinite ease-in-out;
animation: first 5s infinite ease-in-out;
}
&.secret {
-webkit-animation: second 5s infinite ease-in-out;
animation: second 5s infinite ease-in-out;
}
&.favorite {
-webkit-animation: third 5s infinite ease-in-out;
animation: third 5s infinite ease-in-out;
}
&:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
}
in each of my animations the transform method is called.
#-webkit-keyframes first {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
right: 50%;
top: 0%;
}
33% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
right: 0;
top: 100%;
}
66% {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
top: 100%;
right: 100%;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
right: 50%;
top: 0%;
}
}
My problem, is on hover I have set the images to freeze in place on hover of one of them, but I cannot get it to scale. It seems to be from having transforms in my animation (the brightness works but no scale), is there a way I can scale these using css or js and have them actually scale?
http://cdpn.io/oKpBh

I tried out something but I am not sure if this what you wanted: http://codepen.io/nighrage/pen/qywCi/
The animations on the li seem to stop the object from scaling up. So the trick that you can do is add animations on the li and add the background to the a tag and give the link a height and width of 6em.
http://codepen.io/nighrage/pen/ExvHq/
I didnt polish up the code but I am sure that you would be able to do that.

Possible to reverse a css animation on class removal?

Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})

In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake

CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)

You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.

Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.

Develop Reference

JavaScript is the programming language of the Web.

Closeable bottom bar with slide animation - javascript

Related

Hide loading icon after 3 sec, when we click on a link <a

Css Custom Loader Animation

Alternative to using position absolute for page transitions in a SPA

Scaling a element inside an animation with same property

Possible to reverse a css animation on class removal?

Categories

Resources