Create an animation that includes several boxes [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 days ago.
This post was edited and submitted for review 6 days ago.
Improve this question
I want to make an animation like the example below.
Can you help me with info on how I could get it to show the demo?
Demo link :
https://xd.adobe.com/view/c48c552d-fe63-4fee-afa5-c8400ed20f18-91df/screen/d65e20e0-12f5-4d3f-91d9-c66ca699e2aa
ps: If you want the animation to start from the beginning, click on the logo
Or do you have ideas on how I could implement it in a web page
Thanks, Any help is welcome
I tried to do it like this
but I can't add another box to connect as in the demo above
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
vertical-align: middle;
}
.draw {
overflow: hidden;
position: relative;
}
.draw:hover:before, .draw:hover:after {
content: '';
box-sizing: border-box;
position: absolute;
border: 2px solid transparent;
width: 0;
height: 0;
}
.draw:hover:before {
bottom: 0;
right: 0;
border-bottom-color: #60daaa;
border-left-color: #60daaa;
animation: border 2s infinite;
}
.draw:hover:after {
top: 0;
left: 0;
animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}
#keyframes border {
0% {
width: 0;
height: 0;
}
25% {
width: 100%;
height: 0;
}
50% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
#keyframes borderColor {
0% {
border-top-color: #60daaa;
border-right-color: #60daaa;
}
50% {
border-top-color: #60daaa;
border-right-color: #60daaa;
}
51% {
border-top-color: transparent;
border-right-color: transparent;
}
100% {
border-top-color: transparent;
border-right-color: transparent;
}
}
<button class="draw">Content</button>

Related

Expand/collapse transition for a span on button press

I'm switching from a collapsible object to another one since the latter has better features but, as a drawback, it seems harder to style.
I'd like to style the new transition animation as the old one.
Here you can see the code of the two buttons: demo and snippet
var coll = document.getElementsByClassName("oldcol");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
.oldcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s;
}
.oldcon {
padding: 0 18px;
margin: 3px 0;
max-height: 0;
overflow: hidden;
transition: .3s ease-out;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.container {
position: relative;
margin: 0em;
}
.newcon {
display: none;
padding: 0.6em;
margin: 0.5em;
background: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.newcol {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
transition: .3s ease-out;
}
.newcol:focus {
pointer-events: none;
margin-bottom: 3em;
}
.newcol:focus + .newcon
{
display: block;
margin-top: -2.5em;
position: absolute;
left: 0;
right: 0;
}
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
Old button: does <button class="oldcol">this</button> work?
<div class="oldcon"><p>Yes!<p/></div>
<hr>
<div class=container>
New button: does <button class="newcol">this</button><span class=newcon>Quite good</span> work?<br>
New button fadein: does <button class="newcol">this</button><span class="newcon fadein">Quite good</span> work?<br>
</div>
What I've tried so far
put transition: all 3s; in the newcon css (doesn't work)
added the following classes to span (and writing <span class="newcon visible hidden"> in the html)(doesn't work)
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.newcon.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
added the following class to span which let fade in the content, it works but I don't know how to do the same for the fade out effect. I think the problem is that to close the button it is not needed to click on it, but it is enough to click everywhere (this is not a good behaviour, how to fix it?).
.fadein {
animation: fadein 1s;
}
#keyframes fadein {
from {opacity:0}
to {opacity:1}
}
There are easy implementations
of the expand/collapse transition, such as the first answer to How can I transition height: 0; to height: auto; using CSS?, but I don't uderstand how to apply it in my case.
Here's a working version with the line-height transition that I proposed in the comments.
.container {
width: 250px;
}
.col {
cursor: help;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: green;
border-bottom: 1px dashed;
}
.con {
display: block;
padding: 0 18px;
margin: 3px 0;
overflow: hidden;
transition: all .3s ease-out;
line-height: 0em;
background-color: #f1f1f1;
box-shadow: 5px 5px 10px 3px inset rgba(0,0,0,0.60);
}
.col:focus {
color: red;
}
.col:focus + .con
{
line-height: 1.2em;
padding: 8px 18px;
margin: 10px 0;
}
<div class="container">
This should work
<button class="col">right?</button>
<span class="con">Yes absolutely, but only with text!</span>
And it should also be responsive.
</div>

Hover/click mismatch on fixed side button on my webapp?

I have a fixed red button which shows some info on click.On hovering the button, a small info shows up.Click and hover both are working on a same button.I have 2 problem scenario doing this thing -
Problem 1 - When I mouse hover on the red button DummyText div comes up and hides in 2-3 second ,that is working fine as I want .But when I remove the mouse from button i.e mouse out the DummyText hides quickly but I want it to hide out in 2-3 seconds only.
Problem 2- When I click the red button the divs on right open up, Now I want hover event to stop working in all cases.
Below is the code of what I have tried. Hope Someone has a better solution on this.
Thanks in Advance!
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
}
.ConservativeLikely:hover>.hoverLikely {
animation-name: ShowHideNew;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-duration: 2s;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-webkit-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#-moz-keyframes ShowHideNew {
0% {
opacity: 1;
visibility: visible;
}
80% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>
Problem 1 can be solved with just CSS. Here is a working demo.
HTML
<div class="box show-pop-up">
<div class="pop-up">this is popup</div>
</div>
CSS
.box {
background: red;
width: 100px;
height: 100px;
position: relative;
}
.pop-up {
outline: 1px solid yellow;
background: white;
position: absolute;
right: -20px;
bottom: 10px;
opacity: 0;
transition: opacity 1s step-end;
}
.show-pop-up:hover > .pop-up {
transition-duration: 0s;
opacity: 1;
}
The basic idea is to have nonzero transition-duration on our pop up element and set transition-duration to 0s on hover, so the pop up shows up immediately. But when we remove the mouse, the 'original' duration kicks in so the pop up stays for the animation duration. And since transition-timing-function is specified as step-end, the pop up opacity goes from 1 to 0 at the end of animation.
Now the problem 2 is trivial. Since we can just toggle the show-pop-up class with javascript.
EDIT:
As suggested by Adam K. transition-delay can be added, which enables us to add pop up fading animation. demo
Transition and transition delay can be used
.elem{
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.elem:hover{
opacity: 1;
visibility: visible;
transition: opacity 0, visibility 0;
transition-delay: 0;
}
This makes exiting hover delayed.
$('.FilIcon').click(function() {
$('.ConservativeLikelyBox').toggle(100);
setTimeout(function() {
$('.hoverLikely').toggleClass('showMeNot');
}, 100);
});
$(document).click(function(e) {
e.stopPropagation();
var container = $(".ConservativeLikely");
if (container.has(e.target).length === 0) {
$('.ConservativeLikelyBox').hide(100);
$('.hoverLikely').removeClass('showMeNot');
}
});
ul,
li {
margin: 0px;
padding: 0px;
list-style: none
}
.ConservativeLikely {
position: fixed;
right: 0px;
top: 30%;
}
.FilIcon {
float: left;
width: 40px;
height: 40px;
background: red;
}
.DefineScopeForBC .ActButtonNew1 span {
background: #fff;
border: 2px solid rgb(15, 170, 255);
}
.ConservativeLikely img {
position: relative;
top: 5px;
left: 5px;
}
.ConservativeLikelyBox {
width: 100px;
display: none;
height: auto;
border: 1px solid rgb(15, 170, 255);
float: left;
}
.ConservativeLikelyBox li {
float: left;
width: 100%;
text-align: left
}
.ConservativeLikelyBox li a {
padding: 5px 10px;
display: block;
}
.ConservativeLikelyBox li.active a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:hover a {
color: rgb(15, 170, 255);
}
.ConservativeLikelyBox li:first-child a {
border-bottom: 1px solid rgb(15, 170, 255)
}
.hoverLikely {
position: absolute;
right: 42px;
top: 47px;
width: auto;
background: #fff;
color: #000;
padding: 2px 15px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s;
transition-delay:1s;
}
.ConservativeLikely:hover>.hoverLikely {
animation: hide 1s forwards;
animation-delay:1s;
animation-iteration-count: 1;
animation-timing-function: linear;
transition: opacity 0s;
transition-delay: 0;
opacity: 1;
visibility: visible;
}
.ConservativeLikely:hover>.hoverLikely.showMeNot {
opacity: 0;
display: none;
}
#keyframes hide {
0% {opacity:1;visibility: visible;}
100% {opacity:0;visibility: hidden;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ConservativeLikely">
<span class="hoverLikely">DummyText</span>
<div class="FilIcon"><img src="../../../images/cons_lik.png" width="30" /></div>
<div class="ConservativeLikelyBox">
<ul>
<li class="active"> Lorem</li>
<li> Ipsum</li>
</ul>
</div>
</div>

Changing class from disable to active

I'm having some issues changing my class to active when adventwindow <= day, I want it to change the class from disable to active when true. If anyone could help that would be amazing!
var day = 5;
var adventwindow = 1;
if (adventwindow <= day) {
document.getElementsByClassName('disable').className = 'active';
}
.door {
color: #fff;
font-size: 70px;
position: absolute;
top: 0;
left: 0;
background-color: #91c1cc;
box-sizing: border-box;
border-top: 2px #eee dashed;
border-right: 2px #eee dashed;
border-bottom: 2px #eee dashed;
border-left: 1px #eee solid;
border-radius: 6px;
padding: 15px;
width: 130px;
height: 130px;
transform-origin: 0 40%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
text-align: center;
}
a.disable {
pointer-events: none;
cursor: default;
}
a.enable {
pointer-events: auto
}
<a class="disable" href="test">
<div class="door">1</div>
</a>
getElementsByClassName returns a collection of elements with the given class name. You can access the elements by index which start from 0.
document.getElementsByClassName('disable')[0].className = 'active';

Issues in animated menu with single click button in javascript

I have been created simple menu with single button from this link http://codepen.io/MrBambule/pen/jIseg
Now i want to reduce the size of the button,
So that i changed the code like this,
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 43px;
height: 7px;
margin: 5px auto;
}
.line__first {
margin-top: 9px;
}
index.js:
// function to trigger animation
$('.button').click(function() {
// check if the menu-items are hidden behind the button
if ($('.menu__list').hasClass('hidden')) {
// add class to make the menu-items drop down
$('.item1').addClass('list--animation');
// the following items trigger the animation after a certain delay
$('.item2').addClass('list--animation--delay1');
$('.item3').addClass('list--animation--delay2');
// remove the hidden class from the ul container to show that the items are not hidden anymore
$('.menu__list').removeClass('hidden');
}
else {
// remove class to make the menu-items disappear
$('.item1').removeClass('list--animation');
$('.item2').removeClass('list--animation--delay1');
$('.item3').removeClass('list--animation--delay2');
// add the hidden class to the ul container to show that the items are now hidden again
$('.menu__list').addClass('hidden');
}
});
So the button size reduced, but when i click the button, it shows the lists are not properly.
Can anybody help me, how to solve this one, thanks in advance.
Change your CSS as below.
Workin JSFIDDLE Here
CSS
.button {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}
.line {
background: #ccc;
width: 15px;
height: 5px;
margin: 2px auto;
}
.line__first {
margin-top: 15px;
}
.menu {
z-index: 1;
float: left;
width: 100%;
}
.menu__list {
width: 100%;
margin-left:-110px;
margin-top:-10px;
}
/* Animation keyframes for the drop down */
#keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
animation-timing-function: ease-in;
}
to {
top: 70px;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes drop {
from {
top: 0px;
}
70% {
top: 85px;
-webkit-animation-timing-function: ease-in;
}
to {
top: 70px;
-webkit-animation-timing-function: ease-out;
}
}
li {
position: relative;
list-style: none;
padding-bottom: 0px;
top: 0px;
}
li a {
text-decoration: none;
color: grey;
text-align: center;
font-size: 0.7em;
font-family: 'Open Sans', sans-serif;
}
Working Demo Here
Update 1 : See the Updated Link here
Update 2: Working Demo with large font
.button {
margin: auto; //try this.
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
background: #2E3F47;
z-index: 10;
}

CSS ::after selector animates slower

so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.

Categories