CSS Translate already translated element - javascript

I'm trying to apply the "bounce" effect from animate.css to an element that already has the following property in it's style element (added by a third-party JS library):
style="... transform: translate(625px, 471px); ..."
When applying the following bounce animation:
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
The element's position prior to the animation doesn't stick and the element moves to the top of the page and animates there.
Is there a variation on this CSS that will apply a bounce effect without overriding the transform already on the element via the style attribute? I don't really want to hack in to a third party library to wrap the element or anything unless I can help it.
Thanks in advance.

You have to wrap it in another element, if you want relative animations.
You don't have to hack into a third party library to do so. You can dynamically insert a div without messing with existing code.
I'd do the following:
// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');
// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);
Read more here:
https://developer.mozilla.org/en-US/docs/Web/API/Node.replaceChild

Related

How to get CSS animated background image which is currently displaying using java script

Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations

FullCalendar Scheduler : Parallelogram Shaped Events

I would like to change the event shape from a square to a parallelogram, see image below for an example:
I tried changing the CSS
.fc-event-container{
background-color:rgba(2,2,2,0.9);
float:left;
Skew
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
-o-transform: skew(-60deg);
transform: skew(-60deg);
}
But it distorted the event container, see image
Using info from here How to skew element but keep text normal (unskewed)
.fc-content {
Skew -webkit-transform: skew(60deg);
-moz-transform: skew(60deg);
-o-transform: skew(60deg);
transform: skew(60deg);
}
Seems to work
https://jsfiddle.net/qjLs3tfa/
The float: left may cause it to shrink the event though as seen in month view in fiddle

Velocity.js removes style attribute after animation completion

My Velocity.js animation is being reverted to stylesheet defined values after completion by removing style attribute. I've checked all in docs, there isn't anything that gives me a clue.
Simple enough, span is styled like this:
.csstransforms3d #naslov h1 span{
display: inline-block;
-webkit-transform: perspective(400px) rotateX(90deg);
-moz-transform: perspective(400px) rotateX(90deg);
-o-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
}
and animated with this:
$.Velocity.hook( $('#naslov h1 span') , "rotateX", "90deg");
$('#naslov h1 span').velocity({rotateX:'0deg'},3000)
I'm watching my animation in dev tools. Everything goes fine, transform: rotateX is gradually lowering it's value in style tag of a span and - boom, whole style tag is gone once rotateX reaches 0;
Does anyone know what's going on here?
If I'm not mistaken, the default behavior of Velocity is to remove transforms with null-like values, see here.
The problem is that your end value is 0deg which is the basically a null rotate transform.
Not sure this will work, but I think if you simply add 360 to all values you could trick the system into not cleaning the transform:rotateX at the end.
Update:
As per #Miloshio's comment it's better to add 0.01 to all values instead of 360 (not tested).

Javascript to change keyframe values in external css sheet (No Inline Style Changes!)

What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position.
.arrow {
-webkit-animation: rotate 3s linear 0 1;
animation: rotate 3s linear 0 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-play-state: paused;
animation-play-state: paused;
visibility: visible !important;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Any help will be much appreciated! I have been trying to find something that would work for about a week now.
It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.
So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.
The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.

Page transition animation similar to Medium.com

I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}

Categories

Resources