I am trying to animate a diagonal line across the page from one corner to another. The line should be diagonal no matter the format of the screen. I figured (or so I think) that I have to use transform: rotate() in CSS. Using jquery or Javascript, I tried returning and calculating the degree at which the line has to rotate for the given screen format. That argument should be passed to rotate().
I've tried the following with jQuery and Javascript:
<script>
$('#move').css('transform', 'rotate(-' + Math.atan2($(window).width(), $(window).height()) + 'rad)').show();
</script>
or
<script>
document.querySelector('#move').style.transform = Math.atan2($(window).width(), $(window).height())+'rad';
</script>
And with CSS and HTML:
<style>
#move {
width: 0;
height: 4px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
transform-origin: top left;
}
#keyframes mymove {
from {top: 0; transform: rotate(0deg);}
to {width:100%; background-color: blue;}
}
</style>
<body>
<div id="move"></div>
</body>
The code draws a line across the screen, but it is not rotated.
How can that be fixed?
You have to put your <script> to the very bottom of <body>, so the code works after your DOM is loaded.
const move = document.querySelector('#move')
const angle = Math.atan2(document.documentElement.clientHeight, document.documentElement.clientWidth);
const width = document.documentElement.clientWidth / Math.cos(angle);
move.style.setProperty('--a', angle + 'rad');
move.style.setProperty('--w', width + 'px');
html, body, #move {margin:0; padding:0}
#move {
width: 0;
height: 4px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
transform: rotate(var(--a));
transform-origin: top left;
}
#keyframes mymove {
to {
width: var(--w);
background-color: blue;
}
}
<div id="move"></div>
Related
A bobblehead effect would be a "U" animation shape in my mind with slightly shorter stems.
I've tried using various arcs/semi-circles to create a bobblehead effect but nothing is working correctly.
I must use transform with translate due to it being an SVG. I am also using animejs but I cannot see a method to achieve this on that library either. jQuery animation steps seems the most simple?
This is the effect I'm looking to achieve:
[![enter image description here][1]][1]
Using this code:
function loopBobble() {
var end = 180;
$({
counter: 0
}).animate({
counter: end
},{
duration: 1000,
easing: "swing",
step: function(t, fx) {
var a = t / 60; // from degrees to radians
var x = Math.cos(a) * 10;
var y = Math.sin(a) * 10;
$('#bobble').attr('style', 'transform: translateX(' + x + 'px) translateY(' + y + 'px);');
if (t == end) {
loopBobble();
}
}
});
}
loopBobble();
The best I am able to achieve with the creepy face is this result:
[![enter image description here][2]][2]
Is my approach correct? I would have assumed a "U" shape animation would be built into animejs or jquery. I cannot find much online. I am no mathematician
How about css only?
.head {
background-color: #FA0;
border-radius: 50%;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
position: absolute;
animation-name: xOffset;
animation-duration: 1s;
animation:
xOffset 1s ease-in-out infinite,
yOffset .5s ease-in-out infinite;
}
#keyframes xOffset {
50% { left: 50px; }
100% { left: 0px; }
}
#keyframes yOffset {
50% { top: 25px; }
100% { top: 0px; }
}
<div class="head"></div>
transform: translate-Version
You'll have to add a wrapper in your csv to apply separated easing-times on x and y. Otherwise different easing-times are not possible using transform since transform is animated as a whole.
.head {
background-color: #FA0;
border-radius: 50%;
width: 100px;
height: 100px;
animation-name: xOffset;
animation-duration: 1s;
animation: xOffset 1s ease-in-out infinite;
}
.wrapper {
animation: yOffset .5s ease-in-out infinite;
}
#keyframes xOffset {
50% { transform: translateX(50px); }
100% { transform: translateX(0px); }
}
#keyframes yOffset {
50% { transform: translateY(25px); }
100% { transform: translateY(0px); }
}
<div class="wrapper">
<div class="head"></div>
</div>
Below is my code. I've implemented wave-like effect on image when page loads but unable to solve my other problem.
Problem - I want to change the image at every 3 sec and add wave-like animation when the image loads. I've three images and want to loop between them infinitely.
Link - https://codepen.io/354erytu/pen/OJVNYKQ
.wave {
position: absolute;
top: calc((100% - 30px)/2);
left: calc((100% - 30px)/2);
width: 30px;
height: 30px;
background: url('https://c4.wallpaperflare.com/wallpaper/755/29/195/chun-lo-tiger-japanese-art-samurai-demon-hd-wallpaper-thumb.jpg');
background-attachment: fixed;
background-position: center center;
}
.wave0 {
z-index: 2;
background-size: auto 106%;
animation: w 1s forwards;
}
.wave1 {
z-index: 3;
background-size: auto 102%;
animation: w 1s .2s forwards;
}
.wave2 {
z-index: 4;
background-size: auto 104%;
animation: w 1s .4s forwards;
}
.wave3 {
z-index: 5;
background-size: auto 101%;
animation: w 1s .5s forwards;
}
.wave4 {
z-index: 6;
background-size: auto 102%;
animation: w 1s .8s forwards;
}
.wave5 {
z-index: 7;
background-size: auto 100%;
animation: w 1s 1s forwards;
}
#keyframes w {
0% {
top: calc((100% - 30px)/2);
left: calc((100% - 30px)/2);
width: 30px;
height: 30px;
}
100% {
top: calc((100% - 300px)/2);
left: calc((100% - 300px)/2);
width: 300px;
height: 300px;
}
}
<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>
Your keyframe syntax should be exactly like this, no 0% and 100%, and try to copy this one and modifying it because if you change ANYTHING in the way the accolades and and brackets are set up it will not work. You can add or remove as many properties as you want to animate:
#keyframes walk-east{from{background-position:0px 0px;}
to{background-position:1764px 0px;}
}
It should work like that, never saw it before with the 0% and 100% outside the accolades but it always did work without those. Except if you move a brackets one space left or right to make it look cleaner, then it won't work anymore. It's very stick on the positions of the brackets and accolades. I can't do it without copying one that's already done for some reasons...
In this case, CSS won't be enough when you want to change image every 3s. It is possible using CSS sprites, however, you're using links of images so that option goes away. If I were you, I'd go with the JS solution because it is rather simple. You can read more how to implement it via JS in this thread - How do I change the background image every X seconds?
I am trying to do some animation using css or jquery .my ball is put into box when I run my project .I want to change the image if ball is successfully insterted in box.
here is my code
https://jsbin.com/coyarezeto/1/edit?html,css,output
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
I want to change image when ball inserted into box after 5sec
<img class="newImage" width="100" src="https://previews.123rf.com/images/boygointer/boygointer1511/boygointer151100234/49187556-open-gift-box-over-white-background-3d-illustration.jpg"
I don't think this is something CSS can do, but it is something jquery can do witht he following code :
function imgChange(){
setTimeout(function(){ $('.img').attr({'src' : 'insertnewimg'}); }, 5000);
}
function ballTouch(){
//yadda yadda code that makes the ball move and detects when its ina box
if(ballIsInTheBox == true)
imgChange();
}
ballTouch();
setTimeout makes the program wait x, in this case 5000, miliseconds (1000 miliseconds = 1 second) before executing the code inside of it, which changes the image src in jQuery. Good luck, let me know if I screwed anything up. Note : Keep in mind setTimeout doesnt stop the whole program, just delays the function inside of it.
You can use setTimeout and display image after 5 secs. i.e :
//display image after 5 seconds
setTimeout(function() {
document.getElementById('myimage').style.display = 'block';
}, 5000);
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position: relative;
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out;
/* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage {
display: none;
position: absolute;
top: 250px
}
#-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
opacity: 0
}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display: none
}
}
.img {
position: absolute;
top: 250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- <div class="container">
-->
<div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,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"
alt="">
<img class="newImage" id="myimage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg" </body>
This is What I reached so far .. With help from Detect the End of CSS Animations and Transitions with JavaScript
You need to create animate class holds the animation
Add this class using javascript
Use a function to detect the end of css animation
Finally you can use .toggle() to toggle between images
$(document).ready(function(){
var animationEvent = whichAnimationEvent();
$(".circle0").addClass("animate");
$(".circle0").one(animationEvent,
function(event) {
$(".img , .newImage").toggle();
// Do something when the transition ends
});
});
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement");
var animations = {
"animation" : "animationend",
"OAnimation" : "oAnimationEnd",
"MozAnimation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
}
.circle0.animate{
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
--> <div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,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" alt="">
<img class="newImage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg"
</body>
</html>
To be honest: simple way is to use setTimeout after 5 seconds .. If its not what you looking for then you can use my answer
Here is actual solution for your question :https://jsfiddle.net/t8re0vnk/1/
You can handle this by binding event to animation circle.
var element = document.getElementById("circle0");
element.addEventListener("animationend", function() {console.log('zxcxzc'); changeImg();}, false);
function changeImg(){
document.getElementById("img").src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqcPW3wEJ3qv3zjTkw5DQaDkgmCiTDclMKMVHp9RZ8VJpZkxal9g';
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
--> <div id="circle0" class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" id="img" src="https://mk0westpacklifeyuwd8.kinstacdn.com/wp-content/uploads/99508-gift-box-small-blue-34284-copy-1.jpg" alt="">
</body>
</html>
I want to make spinning wheel but instead of rotating wheel i want to rotate the pointer. I have the following jQuery code snippet which rotates a pointer but I don't know how to convert this jQuery snippet into JavaScript.
jQuery code:
$( document ).ready(function() {
var startJP = (164) + (360 * 3);
$('.jackpot-pointer').animate({ transform: startJP }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
},
duration:6000
},'linear');
});
i want to do something like this
https://i.stack.imgur.com/0KArr.gif
Here is a simple example, that shows how you could solve it with vanilla JS and CSS by using CSS animations which can be toggled on and off via JS.
var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');
stage.addEventListener('click', function () {
rot.classList.toggle('animated');
});
#stage {
position: relative;
height: 100px;
background-color: #000;
}
#rotating {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
background-color: #c00;
animation: rotate linear 6s;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 50% 50%;
}
#rotating.animated {
animation-play-state: running;
}
#keyframes rotate {
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
<div id="stage">
<div id="rotating"></div>
</div>
Depending on which browsers you want/have to support, you might have to add vendor prefixes in the CSS code.
I'm using a jQuery function for a parallax background inside a div.
When the page loads, I have some css webkit animations that animate the background.
However, after the page has finished loading, my jQuery function that animates the parallax effect on the background doesn't work.
Here is the code I have:
$(document).ready(function(){
$('#square').mousemove(function(e) {
var x = -(e.pageX + this.offsetLeft) / 4;
var y = -(e.pageY + this.offsetTop) / 4;
$(this).css('background-position', x + 'px ' + y + 'px');
});
});
#square { height: 700px;
width: 500px;
display: inline-block;
margin-left: 100px;
position: absolute;
right: 37%;
top: 15%;
background: transparent;
-webkit-animation-name: image-fadein;
-webkit-animation-delay: .8s;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
#-webkit-keyframes image-fadein {
0% { background: transparent; }
25% { background: #f2efef; }
50% { background: #333; }
100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
background-size: cover no-repeat;
background-position: 35% 30%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="square">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
</div>
I should mention that the jQuery function DOES work when I remove the webkit animations completely from the div element and just leave the height, width, display, margin, position, and background.
Does anyone know why it seems that the webkit animations are interfering with the jQuery code?
This is because properties that have been animated with a keyframe rule cannot be overridden by inline css rules, or at least not by any method I have tested.
You could
Move the animation styles to a class
Add the class to the element
Add an animationend listener to listen for the end of the animation
At the end of the animation remove the animation class and reset the background-image and other styles.
$(document).ready(function(){
$('#square').mousemove(function(e) {
var x = -(e.pageX + this.offsetLeft) / 4;
var y = -(e.pageY + this.offsetTop) / 4;
$(this).css("background-position",x + 'px ' + y + 'px');
}).on("animationend",function(e){
//You can access animation-name value by
//e.originalEvent.animationName
$(this).removeClass("animated").css({
backgroundImage:"url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg)",
backgroundSize: 'cover no-repeat',
backgroundPosition: '35% 30%'
});
});
});
#square {
width: 80%;
height:100%;
position: absolute;
top: 0px;
left:0px;
background: transparent;
}
.animated {
-webkit-animation-name: image-fadein;
-webkit-animation-delay: .8s;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes image-fadein {
0% { background: transparent; }
25% { background: #f2efef; }
50% { background: #333; }
100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
background-size: cover no-repeat;
background-position: 35% 30%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square" class="animated">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
</div>
You could also iterate over the styleSheets collection to find the keyframes rule ("image-fadein"), from there find the last keyframe rule ("100%"), and modify the styles from there.
Demo
$(document).ready(function(){
var KFSRule = findKFSRule("image-fadein");
var KFRule = KFSRule && KFSRule.findRule("100%");
$('#square').mousemove(function(e) {
var x = -(e.pageX + this.offsetLeft) / 4;
var y = -(e.pageY + this.offsetTop) / 4;
if(KFRule){
KFRule.style.backgroundPosition = x + 'px ' + y + 'px';
}
});
});
function findKFSRule(ruleName) {
var foundRule = null;
var sheets = [].slice.call(document.styleSheets);
sheets.forEach(function(sheet){
var rules = [].slice.call(sheet.cssRules);
rules.forEach(function(rule){
if(rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name==ruleName){
foundRule = rule;
}
});
});
return foundRule;
}
#square {
width: 80%;
height:100%;
position: absolute;
top: 0px;
left:0px;
background: transparent;
-webkit-animation-name: image-fadein;
-webkit-animation-delay: .8s;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes image-fadein {
0% { background: transparent; }
25% { background: #f2efef; }
50% { background: #333; }
100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
background-size: cover no-repeat;
background-position: 35% 30%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
</div>
Note though that you cannot iterate over a style sheets css rules if it is an external stylesheet. So your styles will have to be embedded in the page, ie <style></style>
If you need them to be defined in an external style sheet you may need to find another work around utilizing maybe CSSStyleSheet.deleteRule,CSSStyleSheet.insertRule or other methods.