im really hoping someone can help me out with this project requirement as im new to JS or rather not advanced with it and i only have today to crack this one and no idea how.
Below is an image iwth how the effect needs to be, starts off from top to bottom, your see how it expands but curved at top and bottom until fully open.
Anyone have any ideas on how i can do this is JS / jQuery (non plugin based) i would be forever greateful if someone could help me on this.
Thanks a bunch
You can do that without Javascript / jQuery using just CSS3 border-radius. However, if you need to fire this up through your existing JS code, then simply wrap the style in a class, and apply that class on some event in your JS code.
Remember that in order to have that elliptical effect you have in your question, the block has to be rectangular and not square, otherwise you will end up in a circle.
A simple example snippet:
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
a:focus ~ div {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
Click
<div></div>
Snippet using jQuery to fire the effect:
$("#btn").on("click", function() {
$("#d1").addClass("effect");
});
div {
margin: 16px;
height: 10px; width: 240px;
background-color: red;
border-radius: 50%;
opacity: 0;
transition: all 2s ease-in;
}
div.effect {
height: 120px; width: 240px;
border-radius: 0px;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" href="#">Click</a>
<div id="d1"></div>
You can try this.
Demo on dabblet
body {
background-color: black;
margin: 0 auto;
overflow: hidden;
}
#overlay {
border-top-left-radius: 1000px 100px;
border-top-right-radius: 1000px 100px;
border-bottom-left-radius: 1000px 100px;
border-bottom-right-radius: 1000px 100px;
width: 100%;
height: 100px;
background-color: white;
margin: 0;
position: absolute;
top: calc(50% - 50px);
-webkit-animation: anim 4s infinite;
animation: anim 4s infinite;
height: 800px;
top: calc(50% - 400px);
}
#-webkit-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
#-moz-keyframes anim {
0% {
height: 1px;
top: calc(50% - 0.5px);
}
100% {
height: 800px;
top: calc(50% - 400px);
}
}
<div id="overlay"></div>
Related
I have a circle div, and I want to make it so when it is clicked it expands outwards in all directions and then comes back in. The trouble is, because position is defined by the top-left corner, the circle gets bigger, but expands only down and to the right, which creates a weird looking effect.
document.getElementById("circle").onclick = function(e){
document.getElementById("circle").classList.add("animate")
document.addEventListener("animationend", function(){
document.getElementById("circle").classList.remove("animate")
});
};
#circle{
width: 20px;
height: 20px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
.animate{
animation-name: expand;
animation-fill-mode: forwards;
animation-duration: 1s;
}
#keyframes expand{
0%{width: 20px; height: 20px;}
50%{width: 50px; height: 50px;}
100%{width: 20px; height: 20px;}
}
<div id = "circle"><div>
I would really prefer it it would expand at all sides, like if position were defined from the center and you just increased the radius. Is there any way to get this effect?
Use clip-path
document.getElementById("circle").onclick = function(e){
document.getElementById("circle").classList.add("animate")
document.addEventListener("transitionend", function(){
document.getElementById("circle").classList.remove("animate")
});
};
#circle{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
inset:0;
margin: auto;
border-radius: 50%;
clip-path: circle(20%);
transition: .5s;
}
#circle.animate{
clip-path: circle(50%)
}
<div id = "circle"><div>
I am trying to get a CSS animation to make a text like it's filling with liquid. I've followed an example (Filling water animation) but what I need is doing the same with a text, not a circle.
Can I do it only using CSS? I don't need to correlate percentaje text with how much does the text fills. I mean, if I write 73% I don't need to automatically fill until 73% capacity.
#banner {
width: 300px;
height: 300px;
position: relative;
background: #ccc;
border-radius: 50%;
overflow: hidden;
}
#banner::before {
content: '';
position: absolute;
background: #ff0019;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
#keyframes wipe {
0% {
height: 0;
}
100% {
height: 73%;
}
}
<div id="banner">73%</div>
Here is text that fills like liquid.
Works great in Chrome but needs tweaking in Firefox.
#banner {
position: relative;
overflow: hidden;
font-family: sans-serif;
font-size: 40pt;
font-weight: bold;
background: #ccc
}
.inner {
background: #000;
color:#fff;
mix-blend-mode: multiply;
}
#banner::before {
content: '';
position: absolute;
background: #0f0;
width: 100%;
bottom: 0;
animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
#keyframes wipe {
0% {
height: 0;
}
100% {
height: 73%;
}
}
<span id="banner">
<span class="inner">73%</span>
</span>
I am trying to move a div left from its original position i.e. right , the effect that i'm aiming at is that the div goes to left and then slides to the right a bit.
Vanilla JS only.
Code:
CSS:
leftBtn.addEventListener("click", function() {
pushDiv.style.right = "420px";
pushDiv.style.right = "360px";
});
* {
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
transition: 0.5s ease;
}
.holder{
position: absolute;
left: 50%;
top: 50%;
height: 300px;
width: 800px;
margin: 0 auto;
background: #eee;
transform: translate(-50%, -50%);
box-shadow: 4px 9px 2px #000;
}
.push-div {
width: 350px;
position: absolute;
background: #F44336;
height: 370px;
right: 0;
top: -35px;
border-radius: 5px;
}
<div class="holder">
<button type="button" name="button" id="btn1">Left</button>
<button type="button" name="button" id="btn2">Right</button>
<div class="push-div" id="pushDiv">
</div>
But on clicking on the button it shows 360px rather than giving the effect.
How do I achieve that? I have tried adding a delay but that doesn't seems to work.
var leftBtn = document.getElementById('leftBtn'),
pushDiv = document.getElementById('pushDiv');
leftBtn.addEventListener("click", function() {
pushDiv.style.right = "410px";
setTimeout( function() {
pushDiv.style.right = "360px";
}, 600 );
});
#pushDiv {
position: absolute;
background: red;
top: 100px;
right: 200px;
width: 100px;
height: 100px;
transition: all .6s;
}
<button id="leftBtn">Move It</button>
<div id="pushDiv"></div>
Try using css animations
JS
const pushDiv = document.querySelector('.pushdiv');
leftBtn.addEventListener('click', animate());
function animate(){
pushDiv.addClass('animation');
{
CSS
.animation{
animation: slideleft 0.7s ease-in;
}
#keyframes slideleft{
// enter your animation keyframes there are some cool tutorials that will show you how to do that same effect
}
I am attempting to get a panel to slide up when a trigger is selected. This is working in my snippet. The issue is that the contents within the #proposal-panel are showing, even though I have #proposal-panel set to opacity: 0, until the trigger is clicked (.active is added). It is showing at the bottom of the page.
Also, for some reason on my actual site, the panel is not sliding up. I have multiple sections, just like the example. The panel just sets at the bottom of the page. The only thing that happens when the active class is added is the z-index takes effect.
I am wanting the panel to slide from the bottom to the top when triggered. That is what I am trying to do with translateYin the active class.
Does anyone know why the contents are showing and possibly why the panel is not sliding up?
Here is a fiddle.
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
background: #3B3B3B;
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
bottom: -100vh;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
transform: translateY(0vh);-webkit-transform: translateY(0vh);
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
Assuming it's the little black box you see at the bottom, that's from #proposal-trigger. #proposal-panel is hidden. I removed the background color from #proposal-trigger to get rid of that.
And to have the element slide up, use transform: translate().
$('#proposal-trigger').on('click', function() {
$('#proposal-panel').addClass('active');
});
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
height: 100vh;
position: fixed;
padding: 15px 0;
right: 0;
opacity: 0;
transition: 0.3s;
transform: translateY(100%);
bottom: 0;
}
#proposal-panel.active {
transform: translateY(0);
z-index: 99;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
You don't need to use translateY to do this animations, just need to use top and bottom with the fixed position. And remove the background-color from #proposal-trigger so it doesn't show anymore
Here is a demo
$('#proposal-trigger').on('click', function () {
$('#proposal-panel').addClass('active');
});
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger">
<input>
<input>
</div>
<div id="proposal-panel"></div>
#red {
height: 100vh;
width: 100%;
background: red;
}
#blue {
height: 100vh;
width: 100%;
background: blue;
}
#proposal-trigger {
width: 100px;
height: 100px;
position: fixed;
bottom: 0;
right: 200px;
}
#proposal-panel {
background: #333333;
width: 58%;
position: fixed;
padding: 15px 0;
right: 0;
bottom: 0;
top: 100%;
opacity: 0;
transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-panel.active {
transition: ease 0.3s;-webkit-transition: ease 0.3s;
bottom: 0;
top: 0;
z-index: 99;
opacity: 1;
}
I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the fadeShow class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.
Here is a fiddle that shows it in action:
Click here to see
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at left: 25%;, left: 45%; and left: 65%;, then I would want the boxes to be 150px to the left of that and then transition into place.
Firstly, to have the boxes slide over from the left, you should apply the negative transformation to the .info-box class:
transform:translatex(-150px);
And then reset it in the .fadeShow class:
transform:initial;
Secondly, you have the display property of the .info-box class set to inline, you'll need to change that as transformations can't be applied to inline elements.
Finally, for performance purposes, it's best to explicitly state which properties you want to apply transitions to:
transition:opacity 1s,transform 1s;
Or:
transition-duration:1s;
transition-property:opacity,transform;
Without CSS animations and calc function:
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute;
transform: translateX(-150px);
opacity:0
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}
#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
With CSS animations and calc function:
*{box-sizing:border-box}
body{margin: 0; padding-top: 20px}
.box{
width: 150px;
height: 150px;
position: absolute
}
#green{
background: green;
left: 25%;
animation:slideinGreen .3s ease
}
#red{
background: red;
left: 45%;
animation:slideinRed .6s ease
}
#yellow{
background: yellow;
left: 65%;
animation:slideinYellow .9s ease
}
#keyframes slideinGreen {
from {
left: calc(25% - 150px); opacity: 0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px); opacity: 0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px); opacity: 0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
Now you can add EventTarget.addEventListener() and Element.classList
window.addEventListener("scroll", function(event) {
var top, green, red, yellow;
top = this.scrollY;
green = document.querySelector("#green"),
red = document.querySelector("#red"),
yellow= document.querySelector("#yellow");
if(top > 100){
green.classList.add("green", "active");
red.classList.add("red", "active");
yellow.classList.add("yellow", "active");
}
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}
.box{
width: 150px;
height: 150px;
opacity:0;
position: absolute
}
#green{
background: green;
left: 25%;
}
#red{
background: red;
left: 45%;
}
#yellow{
background: yellow;
left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
#keyframes slideinGreen {
from {
left: calc(25% - 150px);opacity:0
}
}
#keyframes slideinRed{
from {
left: calc(45% - 150px);opacity:0
}
}
#keyframes slideinYellow {
from {
left: calc(65% - 150px);opacity:0
}
}
<section>
<article>
<div id=green class=box></div>
<div id=red class=box></div>
<div id=yellow class=box></div>
</article>
</section>
you need to set css transition to: transition: all 1s;
since you need to tell what properties you need to animate.
and using all means animate all css properties. also you need to set display: inline-block
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline-block;
margin: 0 100px;
transition:all 1s;
opacity: 0;
}
The transform isn't working because the child divs are set to display:inline.
Change that to inline-block.
JSfiddle Demo