How to reduce circle size? - javascript

I have a div which is circle in shape.I have done animation things with CSS .Now i want to do when circle go to bottom then circle size remain same (now this is ok for me) but when circle bounce back to top then circle reduce it's size.I don't know, is it possible with CSS ? I am very week in JS .Can anyone solve my problem or suggest me the right way?
JsFiddle Link
Thanks in advance.
HTML:
<div class="hello"></div>
CSS:
.hello{
width:100px;
height:100px;
border:5px solid black;
border-radius:55px;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

A couple of things. There's a JSFiddle at the bottom which shows everything I list:
To reduce the circle size, just add height: <whatever>px; and width:<whatever>px; to the last stage of your animation.
Note that if you want it to only decrease over the last section (where it bounces back up to the top), you will need to specify that the height and width values are still the starting values at the 75% stage.
Because you're changing the size of the circle, the animation will "jump" at the end back to its existing form. This is because, by default, CSS animations aren't persistent. Whatever changes you make only last as long as the animation before reverting to normal.
If you want the change to be persistent and stay after the end of the animation, you need to use animation-fill-mode: forwards;.
I've created an edit on your original JSFiddle with all of the above changes Here.

Try this - fiddle
100% {background-color:red; left:0px; top:0px; width:50px;height:50px}

You can modify width and height of the div in your keyframes to get desired effect.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;width:100px;height:100px;}
100% {background-color:red; left:0px; top:0px;width:50px;height:50px}
}
FIDDLE
We are reducing the width and height of circle in the keyframe 100% so when the ball bounces back i.e. from keyframe 75% to 100% ball is animated to a smaller size. Note that to keep the size of the ball same till keyframe 75% we are again defining height:100px and width:100px in that keyframe.

Related

CSS3 keep background color transitions the same

Various elements of the webpage have a background transition on them changing from color to color:
#-moz-keyframes backgroundTransition /* Firefox */ {
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
#-webkit-keyframes backgroundTransition /* Safari and Chrome */{
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
However, if an element is display: none and then displayed later through javascript, the color isn't consistent with the other elements, it starts the loop from the 0% color.
Is there a way to keep the transition universal? Thank you for your time.
Have you tried hiding the elements by making their opacity:0 and then setting it to 1 to unhide them? That should allow the background color to transition with all the other elements, but keep the element invisible.
Byh the way, the keyframes CSS directive is well supported by all major browsers at this point. There is no longer a need to use vendor prefixes with it.
document.querySelector("button").addEventListener("click", function(){
document.querySelector(".hidden").classList.remove("hidden");
});
div {
width:50px;
height:50px;
background-color:black;
border:1px solid black;
animation-duration: 8s;
animation-name: backgroundTransition;
}
/* The hidden elements will not take up space in the
normal document flow and will not be visible because
the will be 100% transparent. Simply removing this
class when its time to see the element(s) puts them
back into the normal flow and their background will
be the same as all the other div elements. */
.hidden { opacity:0; position:absolute; }
#keyframes backgroundTransition{
0% {background-color:#ff7b7b;}
33% {background-color:#7fceff;}
66% {background-color:#80e880;}
100% {background-color:#ff7b7b;}
}
<div></div>
<div class="hidden"></div>
<div></div>
<button>Click me during the animation to reveal the hidden div,<br>which will have its color in sync with the other div elements</button>
I don't think you can handle it using visibility css attribute or you cant cuz whenever it gets rendered it will start from 0
Transitions didn't work for element not rendered by browser, but work's for element 'hided' ;) try antoher option to hide your element:
opacity: 0
height:0; width:0;
z-index: <val>

Animate Frames Over What Time?

I'm trying to animate an image. It's a simple animation moving from left to right. This will eventually be a gif that is downloaded by the user.
I currently have this animation as 5 frames at 100ms each, but the animation looks a bit jittery. Then I increased to 20 frames of 50ms each, but still looks jittery. Wondering if there was any input on making easein / slidein animations smooth. Should I increase the frames even more?
My Current Animation Is (Each Frame at 100ms)
left: [x, x, x, x, x]
Thanks in advance!
It is better to use a CSS animation for this. It works smoother and the code can be simpler. Here is an example:
<style>
#movie {
transition-property: left;
transition-duration: 1s;
transition-timing-function: linear;
width:100px;
height:100px;
background-color:red;
position:absolute;
left:100px;
top:100px;
}
</style>
<script>
function move(d) {
d.style.left = '500px';
}
</script>
<div id="movie" onclick="move(this)"></div>
Click on the red rectangle will smoothly move it right.

Create the effect on this Apple "Your Verse" page?

Can anyone point me in the right direction of a JS library or alike with regards to creating the water/bubble effect on this Apple webpage.
I think it could have been done with a combination of parallax but the 'particles' appear as if they are a looping video rather than reacting to scrolling of the page.
The image below maybe a little too small, but it depicts what I am trying to accomplish.
There are a bunch of different parallax libraries out there (this is decent). Regarding the bubble effect, this is actually achieved pretty simply using this image and some CSS (no JavaScript required!). This jsFiddle has only the dust particles so you can see how it's put together.
The div has a class of .dust which positions it absolutely and sorts the layout:
.dust {
position:absolute; top:0; left:0;
width:100%; height:100%;
background-size:50% auto;
background-position:center center;
transform-origin:bottom center;
}
Then there are .dust-small and .dust-medium, which have the aforementioned background image, and some CSS animations applied. One such animation used:
#keyframes dustSmallAnim {
0% { opacity:0; transform:translate3d(-2%,0,0) scale(1.025); }
12.5% { opacity:0.4; transform:translate3d(-1.5%,0,0) scale(1.025); }
25% { opacity:0.75; transform:translate3d(-1%,0,0) scale(1.05); }
37.5% { opacity:0.4; transform:translate3d(-.5%,0,0) scale(1.075); }
50% { opacity:0.2; transform:translate3d(0,0,0) scale(1.1); }
62.5% { opacity:0.4; transform:translate3d(.5%,0,0) scale(1.125); }
75% { opacity:0.75; transform:translate3d(1%,0,0) scale(1.15); }
87.5% { opacity:0.4; transform:translate3d(1.5%,0,0) scale(1.175); }
100% { opacity:0; transform:translate3d(2%,0,0) scale(1.2); }
}
So, fairly simple CSS, and older browsers just fall back to a static background image. You should be able to play around with the general idea to achieve the effect you want.
I've left out vendor prefixes for this example, but you'll obviously need those.
check this out
you can always place the div where you want to and set the necessary fields in the script like count and size of the bubble.

Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

The idea is to have a responsive version of this fiddle(see below) that is 100% wide and has a height of 500px... If I adjust the width of this to 100% it messes up along the end of the animation.. How should I go about making a simple animation like this that will work cross browser, have a width of 100%, be displayed seamlessly, and a switchable height via media queries(I can do the queries part)..
my code: http://jsfiddle.net/hkJsm/
html
<div id="logo"></div>
css
#-webkit-keyframes slide {
from{
background-position:575px;
}
to{
background-position:1725px;
}
}
#logo{
text-align:center;
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
Thanks for all the help
Your problem is interesting, so I realized the image had to be cropped because in CSS3 you can't manually flip images, so I've edited it. It is working in this fiddle, and was fixed by editing this image to this, and changing the background-position property a bit on to in the animation:
background-position:1725px;
to
background-position:1645px;
The image conversions are shown below.
This image
To this
Here's what you can do:
Fiddle: http://jsfiddle.net/hkJsm/1/
CSS
.outer{
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
#logo{
min-height: 80px;
}
HTML
<div class="outer"><div id="logo"> </div></div>

JQuery, keep inner <div> orginal position on animation of container <div>

I'm building a small website, and i'm having an issue with jQuery animation,
Basically i have placed a small text (one character div) inside a circle (another div), and i want it to grow when the user hovers over it while keeping the inner div (text) at the original position, the circle will shrink back to original size upon mouseleave() event.
The growing/shrinking part is working quite good, the problem is with the inner text which changes position upon mouseenter().
Here's the HTML
<body>
<div class="steps">
<div id="one" class="number">
<div id="num-text">
<p><strong>1</strong>
</p>
</div>
</div>
</div>
</body>
with 'steps' serving as a container and 'number' the actual circle !
Here's a link to the JSFiddle of this question: http://jsfiddle.net/Rockr90/hZSKA/
Thank you !
Edit:
Actually, the flickering only happens on Chrome, the example with CSS3 works on IE and FireFox as expected, maybe it has something to do with webkit ?
This is possible with CSS only! You dont need jQuery for this and I will explain how to do it with this example. I've used display table for the circle so that we can use display table-cell for perfectly centered text
HTML
<div class="circle">
<p>1</p>
</div>
CSS
.circle {
position:relative; //set up a position, not needed, but for example
top:100px;
left:100px; // width and height
width:100px;
height:100px;
display:table; // display table for centered <p> with table-cell
background-color:blue;
border-radius:50%; // make it a circle!
-webkit-transition: all 0.5s; // transition
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.circle:hover {
margin-left:-10px; // on hover we will increase the height and width
margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
width:120px;
height:120px;
}
.circle p {
display:table-cell; // display table-cell magic
vertical-align:middle; // put the text in the middle!
text-align:center;
font-size:2em;
color:white;
}
FIDDLE
http://jsfiddle.net/n6D46/
If you give #num-text a height, you can vertically align it to the center using the absolute positioning you already have on it:
#num-text {
position:absolute;
text-align:center;
color:#eee;
font-size:24px;
width:100%;
height: 24px;
top:50%; margin-top:-12px; }
See fiddle here: http://jsfiddle.net/hZSKA/1/
As a side note, it's probably possible to do this same effect using CSS3 but that may not be backwards compatible with older browsers.
A quick (but rough and tumble) fix would be to also animate #num-text:
function () {
$(this).animate({
height: '-=10px',
bottom: '-=5px',
width: '-=10px'
}, 50);
$('#num-text').animate({'top': '-6px'}, 50)
});
});
JSFiddle: http://jsfiddle.net/hZSKA/5/
Although I'm sure there will be better answers.
EDIT: whoops, linked to the wrong JSFiddle.

Categories

Resources