How to transform Image with CSS based on the JavaScript variable? - javascript

This is the example of how it should look like on a website:
https://imgur.com/a/st9df
In the gif, Chart.js is used for the Chart (Canvas)
The arrow in the middle is being rotated with the CSS transform
Let's say the JavaScript variable is "0", that would mean the arrow has to stop on the start, and if the variable is "33" it should stop at ~1/3 of the chart and so on.
And also the arrow should also change it's color the one it stops at. It needs another variable from the JavaScript.
Here is the website link where you can see the chart yourself:
http://ripskins.net/round/59891/50+otFELF0-eo4PL0md8

You can achieve something like this by using css animation keyframes and jquery to add class and changing the resultant color.
You can set a timeout to change the final color as well.
$(document).ready(function(){
$("#demo").addClass("trans");
})
.square
{
width:100px;
height:100px;
background:red;
}
.trans
{
transition: all 2s ease-out;
animation: transrotate 2s;
}
#keyframes transrotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
background: blue;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="square" id="demo">
</div>

Related

Transition between desired amounts

An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?
The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp
I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later
You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Animating Transform Scale via Javascript

So, I'm animating a SVG button and I want to animate transform property combined with a fadeout with opacity attributes via Javascript.
The code would look like something like this: (Considering it's coming with opacity 0 and scale 0)
(I know the way I'm doing it it's incorrect because it's overriding till last set attribute)
function hiA(){
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("opacity", "1");
}
And the same but in reverse: (Considering it's coming with opacity 1 and scale 1)
function byeA(){
pathA.setAttribute("transform", "scale(.5)");
pathA.setAttribute("transform", "scale(1)");
pathA.setAttribute("transform", "scale(0)");
pathA.setAttribute("opacity", "0");
}
I don't know if it's possible or if it's better to add a class with the animation on CSS.
you can set class and style in css: https://www.w3schools.com/css/css3_animations.asp
JS:
pathA.className+="hiA"
CSS:
#keyframes example {
0% {transform:scale(1);}
50% {transform:scale(.5)}
100% {transform:scale(1);opacity:1;}
}
.hiA{
animation: example 1s;
}
See example:
function hiA(){
var pathA=document.getElementById("pathA");
pathA.className="hiA";
setTimeout(function(){ pathA.className=""; }, 3000);
}
#keyframes example {
0% {transform:scale(.5);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}
.hiA{
animation: example 3s;
}
<button onclick="hiA()" id="pathA">animation me</button>
ED
You could define keyframes in css:
#keyframes hia{
0%{
transform: scale(1);
}
50%{
transform: scale(0.5);
}
}
... and so on, and then add the animation in css to a class or add it to the element with js:
.element{
animation: hia 3s;
}
I quickly tested you example code on a SVG. It works.
But I would prefer defining the animations in CSS and simply adding and removing CSS classes to/from the SVG or its sub elements. This is a cleaner separation of concerns, in my opinion. And you enable possible performance accelerations by the browser, since it known about the animations beforehand and can do it on the GPU, theoretically.

Add custom animation delay for every div with the class "bounce"?

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.
example:
<div class="360player bounce">
<a href="audio/The_Song.mp3">
The Song
</a>
</div>
Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.
I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times.
Example below
#keyframes fallingstars {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-870px, 500px) rotateZ(310deg);
}
}
#keyframes fallingstars2 {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(25deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-570px, 600px) rotateZ(210deg);
}
}
#fallstar {
animation: fallingstars 12s infinite;
animation-delay:5s;
z-index:-1;
}
#fallstar2 {
animation: fallingstars2 12s infinite;
z-index:-1;
}
<img src="stars-ALL.svg" id="fallstar" alt="Stars" style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />
You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.
I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.
CSS:
.wait300ms {
animation-delay: 300ms;
/*TODO: Add cross-browser attributes */
}
HTML:
<div class="360player bounce wait300ms">

Need help to add/modify to my script to include some rotation using jquery and css

Here is the fiddle:
http://jsfiddle.net/7txt3/29/
I want to have the record needle on the record like you see in my image below rotate on to the record when the user clicks the play button(see the fiddle)
The needle placement is not necessarily final and I might want it to be in the top right corner.(I've included the image needed for that and the css at the bottom)
Right now if you click play(see the fiddle, hover over on one of the record covers, click play) the record needle comes in from the left and then if you click stop on the same record it goes back out to the left. If you click play on another record before stopping the playing one it just stays in the same place.
I want it to be like the image below where it is always showing but not on the record unless you click the play button and then it rotates on. Then if you click play on another record while one is currently playing it just shifts/moves like its changing. Then of course if you click stop it goes off the record.
Here is my current script:
$(function(){
var station = $('.player-station'),
record = $('.record2:first'),
playBtns = $('.play'),
info = $('.nprecinfo');
var isPlaying = false;
playBtns.click(function()
{
var btn = $(this);
if(btn.text() == 'STOP')
{
btn.text('PLAY');
record.css({'-webkit-animation-play-state': 'paused',
'-moz-animation-play-state': 'paused'});
$('#needle').show().animate({"left": "-=120px"}, "slow");
isPlaying = false;
return;
};
playBtns.text('PLAY');
var album = btn.closest('.album');
station.text(album.find('h3').text());
info.text(album.find('.recordinfo').text());
record.css({'-webkit-animation-play-state': 'running',
'-moz-animation-play-state': 'running'});
if (isPlaying == false)
{
$('#needle').show().animate({"left": "+=120px"}, "slow");
isPlaying = true;
}
$('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
$('#lrvinyl').hide().fadeIn();
btn.text('STOP');
});
});
and here is the current css for the record needle:
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:-115px;
top:185px;
z-index:10;
overflow:hidden;
}
if you want to put the needle in the top right corner here is the image and css to use in the fiddle for that. You might have to move the record (.record2) a bit so just change the css to left:-4px;
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle4.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
left:205px;
top:10px;
z-index:10;
overflow:hidden;
}
+1 for detailed question! :)
You're already relying on css3 for the rotating disc, and since this is quite doable with css transitions, all you need to do with the javascript is to add/remove a class.
Demo: http://jsfiddle.net/7txt3/31/
This is essentially what I added (plus some vendor prefixes)
css
#needle
transition: all .2s ease;
}
#needle.playing {
transform: rotate(-10deg);
}
jquery
changed from .animate(...) to .removeClass() and .addClass() calls.
I also changed the #needle css a bit in order to rotate from the left of the needle hand, but you could look at https://developer.mozilla.org/en-US/docs/CSS/transform-origin instead.
edit
Sorry, I missed the part about animating between record changes. One thing you can do is to remove the class and then add it back after a delay, something like this:
http://jsfiddle.net/7txt3/53/
I think this should give the desired effect.
To have the needle rotate correctly you need to set the transform origin.
http://jsfiddle.net/7txt3/35/
You of course will want to modify the speeds/percentages.
#needle {
background-image:url(http://benlevywebdesign.com/somafm/images/recordneedle2.png);
background-repeat: no-repeat;
width:220px;
height:220px;
position:absolute;
top:185px;
z-index:10;
overflow:hidden;
}
#needle.playing {
-webkit-animation-name: needle_move;
-webkit-animation-duration:8s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-transform-origin: 0px 10px;
-webkit-transform: rotate(0deg);
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
}
#-webkit-keyframes needle_move {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(-15deg);
}
70% {
-webkit-transform: rotate(-15deg);
}
0% {
-webkit-transform: rotate(0deg);
}
}
Here's a demo using CANVAS to get the needle animation you wanted in your question.
http://jsfiddle.net/7txt3/46/
Because of the vender prefix spammed CSS3 and the lack of browser support for rotation-point. I think going CANVAS is a little cleaner.

Categories

Resources