I want to set multiple animation on single element on the phone, when trigger them one by one. I achieve this by the under method , but have 2 problems:
I need accurate position and size, so I use top bottom width height. But I know use these properties, the browser need to render again, so it is not efficient.
On the second animation, although I set animation-fill-mode: forwards, but still need to set 0% keyframes to assure second animation start point is on the first animation end point.
Thanks for more efficient method.
my demo
html:
<button id="first">first</button>
<button id="second">second</button>
<div class="moon"></div>
css:
.first {
animation-name: first;
}
.second {
animation-name: second;
}
#-webkit-keyframes first {
100% {
height: 2.5rem;
width: 2.5rem;
left: 4.1rem;
bottom: 11.7rem;
}
}
#-webkit-keyframes second {
0% {
height: 2.5rem;
width: 2.5rem;
left: 4.1rem;
bottom: 11.7rem;
}
100% {
height: 4rem;
width: 4rem;
left: 5.8rem;
bottom: 10.5rem;
}
}
js:
var $moon = $('.moon');
$('#first').click(function() {
$moon.addClass('animated first');
});
$('#second').click(function() {
$moon.addClass('animated second');
});
You might want to try with the JQuery keyframe plugin, you can download it here:
https://github.com/Keyframes/jQuery.Keyframes
You can then initialize a set of variables such as height width top and left like this:
var $moon = $('.moon'),
newHeight = '0',
newWidth = '0',
newTop = '0',
newLeft = '0';
And then for the clicks you could try dynamic variables for each click incrementing 40 each time it clicks?
$('#first').click(function() {
newHeight = $moon.height() + 40+'px';
newWidth = $moon.width() + 40+'px';
newTop = $moon.position().top + 80+'px';
newLeft = $moon.position().left + 80+'px';
$moon.removeClass('first');
$moon.removeClass('second');
$.keyframe.define([{
name: 'first',
'0%': {'height': $moon.height()+'px',
'width': $moon.width() +'px',
'left': $moon.position().left+'px',
'top': $moon.position().top+'px'
},
'100%': {'height': newHeight,
'width': newWidth,
'left': newLeft,
'top': newTop
}
}]);
$moon.addClass('first');
});
$('#second').click(function() {
newHeight = $moon.height() + 40+'px';
newWidth = $moon.width() + 40+'px';
newTop = $moon.position().top + 80+'px';
newLeft = $moon.position().left + 80+'px';
$moon.removeClass('first');
$moon.removeClass('second');
$.keyframe.define([{
name: 'second',
'0%': {'height': $moon.height()+'px',
'width': $moon.width()+'px',
'left': $moon.position().left+'px',
'top': $moon.position().top+'px',
},
'100%': {'height': newHeight,
'width': newWidth,
'left': newLeft,
'top': newTop,
}
}]);
$moon.addClass('second');
});
Thought you might give that a try, Leo.
Related
Fist of all, sorry for my bad english.
I've this site with a company logo at the top and a navbar down it. I wanna change the navbar position to the top when I scroll past the company logo.
I try to change it with CSS in:
.navbar-fixed {
position: relative;
height: 56px;
z-index: 1000;
}
to...
.navbar-fixed {
position: top;
height: 56px;
z-index: 1000;
}
using Materialize.js on the $(document).ready(function (){}) with the next algorhythm:
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-fixed").css('position', 'top');
} else {
$('.navbar-fixed').css('position', 'relative');
}
});
}
but it didn't works.
First of all, css property position doesn't have top value.
Okay, here's a script taken 3 minutes of my time. I believe you can easily improve it to let it suit your needs. Say your company logo has id="logo":
function fixNavbar() {
var $logo = $('#logo'),
$nav = $('.navbar-fixed'),
offset = $logo.offset(),
logoHeight = $logo.height(),
distance = offset + logoHeight,
scroll = $(window).scrollTop();
if (scroll >= distance) {
$nav.css({
'position': 'fixed',
'top': '0',
'right': '0',
'left': '0'
});
} else {
$nav.css({
'position': 'relative',
'top': 'auto',
'right': 'auto',
'left': 'auto'
});
}
}
$(window).scroll( function() {
fixNavbar();
});
i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});
You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().
I'm scaling the entire using a CSS scale transform. The problem is that I get the wrong cursor position. I want to create a new div where the cursor is clicked but div is being created in wrong position.
$(document).ready(function() {
$('body').css({
transform: 'scale(0.5,0.5)'
});
var k = 1;
$('.container').off('click').on('click', function(e) {
var top = e.pageY;
var left = e.pageX;
$('<div />', {
id: 'temp' + k
}).css({
position: 'absolute',
top: top + 'px',
left: left + 'px',
width: '50px',
height: '50px',
border: '1px solid red'
}).appendTo('.container');
k++;
});
});
I have an element div in a shape of a ball. What I am trying to do is, when I refresh the page I want to the ball to fall to the bottom of the webpage and then bounce back up to the top of the page.
This is my jQuery function where the ball falls to the bottom of the web page
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
});
Am I using a correct approach? Should I use slideDwon and slideUp instead?
Try utilizing jQuery UI .effect()
$(function() {
var div = $("div");
// `elem`: element to apply bounce effect,
// `n`: number of bounce effects to apply to `elem`
var bounce = function bounce(elem, n) {
var fx = function fx(el) {
return (el || $(this))
.effect({
effect: "bounce",
easing: "swing",
duration: 400,
distance: window.innerHeight
- (el.height() + el.offset().top * 1.5),
direction: "down",
times: 1
}).promise()
};
return fx(elem).then.apply(elem, $.map(Array(n - 1), function() {
return fx(elem)
}));
};
bounce(div, 1).then(function(el) {
// do stuff when bounce effect complete
console.log("complete", el)
});
});
div {
position: relative;
width: 100px;
height: 100px;
background: rgb(212, 98, 44);
border: 2px solid navy;
border-radius: 50%;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>
Take advantage of jQuery's animation chainability. Also, you probably shouldn't assume a static value of 585 will be suitable for every screen size. I suggest using calculated values for generating the offsets, check this fiddle:
$(document).ready(function () {
var viewportH = $(window).height();
var elem = $('div');
var elemH = elem.height();
elem.animate({
top: '+=' + (viewportH - elemH) // bottom of screen
}, 400).animate({
top: '-=' + (viewportH - elemH) // original position
});
});
Using this HTML :
<div id="myDiv" class="myRelativeDiv">test</div>
1st step is to set the position of your div as "relative" :
.relative {
position:relative;
}
2nd step is animate with Jquery (You can chain many animate):
$(function() {
$("#myDiv").animate({ top: '+=585'}, 400).animate({ top: '0'}, 400);
});
JsFiddle
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
setTimeout(
function()
{
$("div").animate({ top: '-=585'}, 400);
}, 400);
});
I have the following: http://jsfiddle.net/JfGVE/318/
The issue is that it's not a smooth animation. How I wanted it to work was:
Center the icon to the middle of the screen before displaying it.
Fade it in, and while it's fading in, resize it to something slightly larger, while staying in the dead center of the screen.
Fade it out.
How can I fix the animation to be completely smooth and feel as if it's a "pulse".
HTML:
Click Me!
<i class="fa fa-heart"></i>
CSS:
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
display: none;
}
jQuery:
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left': center_width, 'top': center_height });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '60px' }, 300);
$('.fa-heart').fadeOut();
});
Check this out: http://jsfiddle.net/JfGVE/336/
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left' : center_width - 24, 'top': center_height - 24 });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').animate({ fontSize: '60px', opacity: 1, 'left' : center_width - 30, 'top': center_height - 30}, 250);
$('.fa-heart').animate({ fontSize: '48px', opacity: 0, 'left' : center_width - 24, 'top': center_height - 24}, 250);
});
What I did is instead of using the fadeIn() and fadeOut() I used the animate() to change the size and opacity at the same time. You can change the times so they resemble a real heart beat but because both the size change and opacity change are in the same animate() they will happen at the same time. The third value in the animate() is to set the center of the picture to the center of the page. This needs to be center_height (or center_width) - 1/2 of the picture height so the center of the image is aligned with the center of the screen. You need the offset because in normal CSS the position tag aligns your picture with the specified value relative to the top left corner (0, 0 of the picture). The times of the animate can be changed depending on how fast / slow you want the heart to "beat".
You can animate CSS properties instead of using fadeIn() and fadeOut(). And for centering the heart you need to:
(width/height) of the window (width/height) of the heart
---------------------------- - ---------------------------
2 2
Demo on Fiddle
jQuery:
$(document).on("click", "a", function() {
var w = ($(window).width() / 2) - ($('i').width() / 2);
var h = ($(window).height() / 2) - ($('i').width() / 2);
$('.fa-heart').css({ 'left': w, 'top': h });
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 100);
$('.fa-heart').animate({ fontSize: '60px', opacity: '1'}, 700);
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 500);
});
CSS:
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
opacity: 0;
}
You could achieve a smooth and (arguable) faster animation using Julian Shapiro's velocity.js plugin
just tweak your css giving opacity: 0 instead of display: none to your element
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
/* display: none; */
opacity: 0;
}
then velocity's loop option will give you the effect you want
jQuery(document).ready(function ($) {
$("body").on("click", ".click", function () {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
$('.fa-heart').css({
left: center_width,
top: center_height
}).velocity({
opacity: 1,
fontSize: "60px"
}, {
loop: true, // animate from initial values back and forth
duration: 400 // adjust as needed
});
});
});
... that way you don't need fadeIn or fadeOut, or animate back to the original values or chain several animate() methods
See JSFIDDLE
Notice that you can set how many times you want the animation to take place by setting the number in the loop option like
loop: 1 // or twice, three times, etc (true does infinite loop)
http://jsfiddle.net/nao9k1Lx/1/
Also notice I gave a class click to the <a> tag to be more specific.
I've updated your JsFiddle, tell me if this is what you needed, i can explain the differences.
html
Click Me!
<div class="anim-container">
<i class="fa fa-heart"></i>
</div>
javascript
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '55px' }, {duration: 300, queue: false});
$('.fa-heart').animate({ fontSize: '48px' }, 300);
$('.fa-heart').fadeOut();
});