Flickering images while spinning - javascript

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 20px;
display:block;
margin-left:auto;
margin-right:auto;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "images/bill-gates.jpg";
} else {
img.src = "images/Card.jpg";
}
}
function outbillFunction(img) {
var Out = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src="images/Card.jpg";
}
else {
img.src = "images/bill-gates.jpg";
}
}
/* End of JavaScript code */
</script>
<img id="BillGate" src="images/bill-gates.jpg" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)" onmouseout="outbillFunction(this)"/>
</body>
</html>
Hello! This is my code and im wondering how i can change image every second without hovering over it, so it basically spins around but changes image every second. I want the pictures to be images/bill-gates.jpg and images/Card.jpg Thanks for your help!

Remove the function call from onmouseover and out add the following code.
window.setInterval(function()
{
/// call your function here
}, 1000);

Remove both of the Mouse Overs, and implement the setInterval method
However;
Make sure you can default pack to the original, as you have two functions originally, I'd personally go for modifying your two existing function into one bigger one so when you call the function in the method setInterval, your function checks for both cases and replaces accordingly.
I hope this helps a little.

Related

Is there a feasible way to trigger CSS keyframe animation using JS?

Naturally, we can create a CSS animation using keyframes, and control it from there.
However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...
#keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.
see here jsfiddle
if you want your animation to work every time you press the button use this code :
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
where 1500 is the animation-duration in this case, 1.5s
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
.fademe {
width: 100px;
height: 100px;
background: red;
}
.fademe.animated {
animation: fade-in 1.5s ease;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">
</div>
<button>CLICK ME</button>
EXPLANATION :
on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , #keyframes, and add it to the element with the class added by the JQ .fademe.animated
$("#move-button").on("click", function(){
$("#ship").removeClass("moving");
$("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
$("#ship").addClass("moving");
});//
#ship
{
background: green;
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
width: 100px;
}
#move-button
{
margin-top: 20px;
}
#ship.moving
{
animation: moving 2s ease;
}
#keyframes moving
{
0%{ transform: translate(0px);}
50%{ transform: translate(20px);}
100%{ transform: translate(0px);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>
If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:
// Add this to your event listener
if (!element.classList.contains("myClass")) {
element.className = "myClass";
setTimeout(function() {
element.classList.remove("myClass");
}, 1000); //At least the time the animation lasts
}
There is a toggle method that works just fine for this, hope it helps:
function Fade() {
document.getElementById("box").classList.toggle("animate");
}
#box {
background-color: black;
height: 50px;
width: 50px;
}
.animate {
animation: fademe 0.5s;
}
#keyframes fademe {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<html>
<head>
<title>
Animation Trigger
</title>
</head>
<body>
<div id="box"></div>
<button onclick="Fade()"> Fade above Box</button>
</body>

How to make screen flash with JQuery

Is there any way to make the window, or at least the page, flash/blink with JQuery or plain JavaScript? I'm trying to get the tab to flash too. Right now I have
var flash = true;
var alert = setInterval(function(){
if (flash)
//doFlash
else
//stopFlash
flash = !flash;
}, 1000);
EDIT: Sorry for any confusion, I meant window brightness. I was wondering if there was a way to flicker the screen brightness to alert users. I was also curious on how to flicker the tab when the window is minimized as well.
Take a look at this! Used jQuery and some CSS.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>
<style>
#keyframes blink {
50% {
background: #cc5;
background-size: 75px 150px;
}
}
#-webkit-keyframes blink {
50% {
background: #cc5;
background-size: 75px 150px;
}
}
#-moz-keyframes blink {
50% {
background: #cc5;
background-size: 75px 150px;
}
}
.laser {
animation: blink 2s infinite;
-webkit-animation: blink 2s infinite;
-moz-animation: blink 2s infinite;
}
</style>
</head>
<body>
<button class="flash">click to blink</button>
<script>
// Button to toggle
$(document).ready(function(){
$('.flash').click(function() {
$('body').toggleClass('laser');
});
});
</script>
</body>
You can choose a higher level element like body (or some main div) and toggle the opacity of the element from 0 to 1 using the JS timer.
(you can change other things as per your needs)
http://jsfiddle.net/josangel555/3w203Lsp/2/
JS (you can use the below lines, one for if and one for else.)
$('.main').addClass("flash");
$('.main').removeClass("flash");
CSS (timer is enabling and disabling the opacity of the targeted element.)
.flash{
opacity: 0;
}

Cursor with typed javascript library skips to new line and doesnt 'type' out works

<!DOCTYPE html>
<html>
<style >
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
<head>
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="typed.js"></script>
</head>
<body>
<div class = element>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0,
loop: true,
cursorChar: "$",
});
});
</script>
</div>
</body>
</html>
When I run the page, the cursor skips to the next line and the words come up infinitly. I would like the cursor to stick with the words, going back and forth. A demo on the creators home page shows how I would like the cursor to be (http://www.mattboldt.com/demos/typed-js/). I'm not sure what I'm missing, I'm guessing its small though
display: inline;
Tried setting the display to both inline and inline-block as suggested on lots of sites.. but this solves my issue... use above code in CSS....
you can check demo:
http://www.problogbooster.com/
You are missing quotes around the element class. Try this instead:
change
<div class = element>
to
<div class = "element">
EDIT
Actually, you should be using a <span> element, not a <div>.

How do I make a div flash from 0 opacity to 1, continuously without clicking?

It's "Scroll Down" text, and I just need it to smoothly flash back and forth from 0 opacity to 1 the whole time the user is on the page.
Here's the HTML and CSS:
<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>
.begin-scroll{
font-family:'Charliedontsurf';
font-size:43px;
color:#FFFFFF;
position:absolute;
bottom:20%;
width: 100%;
text-align: center;
line-height:0.7em;
opacity:0;
}
.begin-scroll span{
font-size:34px;
}
This is the code that works for the type of effect I want (minus the continuous flashing):
jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
});
This is the kind of code I want, but the console log was throwing a "too much recursion" error:
jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1,pulsatingOut());
function pulsatingOut(){
$('.begin-scroll').fadeTo(1000, 0, pulsatingIn());
}
function pulsatingIn(){
$('.begin-scroll').fadeTo(1000, 1, pulsatingOut());
}
});
I'm not too fond of jQuery, so forgive me if this is a poorly put together and/or dumb question. Oh, and if you want to replace the jQuery altogether with plain 'ol javascript to solve this, please feel free, any solution helps.
Must it be Javascript/jQuery? This can be solved in CSS using animations and keyframes.
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
50% { opacity: 1; }
100% {opacity: 0; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 2s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 2s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 2s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 2s infinite; /* IE 10+, Fx 29+ */
}
<div id="box" style="width: 50px; height: 50px; background-color: red;"></div>
Remove the () from your complete parameters in the .fadeTo call. You want to simply pass a reference of that function, not the result.
;(function($){
$(function(){
// store a reference (slight cache improvement)
var $el = $('.begin-scroll');
// declare the functions
function pulsatingOut(){
$el.fadeTo(1000, 0, pulsatingIn);
}
function pulsatingIn(){
$el.fadeTo(1000, 1, pulsatingOut);
}
// call first one and have it loop through
pulsatingIn();
});
})(jQuery);
.begin-scroll { width: 100px; height: 100px; background-color: #f0f; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="begin-scroll"></div>
This is similar to Brad's answer, but a more basic approach.
As Brad said, you will want to pass a callback to the fadeTo method. Callbacks are also known as delegates, function references, etc. As soon as you add the parentheses at the end, you are telling JavaScript to execute that function reference.
Since I had already developed my fiddle while Brad was answering, here's what I came up with. It's not as self-contained, but it works and gives you a simplified idea. I did have to change your text color to black.
jsfiddle: http://jsfiddle.net/o5qgq6LL/1/
function pulsatingIn(){
$(this).fadeIn(1000, pulsatingOut);
}
function pulsatingOut(){
$(this).fadeOut(1000, pulsatingIn);
}
$('.begin-scroll').delay(3500).fadeIn(1000, pulsatingOut);
.begin-scroll{
font-family:sans-serif;
font-size:43px;
color:#000;
position:absolute;
bottom:20%;
width: 100%;
text-align: center;
line-height:0.7em;
display:none;
}
.begin-scroll span{
font-size:34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>

Restart animation in CSS3: any better way than removing the element?

I have a CSS3 animation that needs to be restarted on a click. It's a bar showing how much time is left. I'm using the scaleY(0) transform to create the effect.
Now I need to restart the animation by restoring the bar to scaleY(1) and let it go to scaleY(0) again.
My first attempt to set scaleY(1) failed because it takes the same 15 seconds to bring it back to full length. Even if I change the duration to 0.1 second, I would need to delay or chain the assignment of scaleY(0) to let the bar replenishment complete.
It feels too complicated for such a simple task.
I also found an interesting tip to restart the animation by removing the element from the document, and then re-inserting a clone of it:
http://css-tricks.com/restart-css-animation/
It works, but is there a better way to restart a CSS animation?
I'm using Prototype and Move.js, but I'm not restricted to them.
No need in timeout, use reflow to apply the change:
function reset_animation() {
var el = document.getElementById('animated');
el.style.animation = 'none';
el.offsetHeight; /* trigger reflow */
el.style.animation = null;
}
#animated {
position: absolute;
width: 50px; height: 50px;
background-color: black;
animation: bounce 3s ease-in-out infinite;
}
#keyframes bounce {
0% { left: 0; }
50% { left: calc( 100% - 50px ); }
100% { left: 0; }
}
<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>
Just set the animation property via JavaScript to "none" and then set a timeout that changes the property to "", so it inherits from the CSS again.
Demo for Webkit here: http://jsfiddle.net/leaverou/xK6sa/
However, keep in mind that in real world usage, you should also include -moz- (at least).
#ZachB's answer about the Web Animation API seems like "right"™ way to do this, but unfortunately seems to require that you define your animations through JavaScript. However it caught my eye and I found something related that's useful:
Element.getAnimations() and Document.getAnimations()
The support for them is pretty good as of 2021.
In my case, I wanted to restart all the animations on the page at the same time, so all I had to do was this:
const replayAnimations = () => {
document.getAnimations().forEach((anim) => {
anim.cancel();
anim.play();
});
};
But in most cases people will probably want to select which animation they restart...
getAnimations returns a bunch of CSSAnimation and CSSTransition objects that look like this:
animationName: "fade"
currentTime: 1500
effect: KeyframeEffect
composite: "replace"
pseudoElement: null
target: path.line.yellow
finished: Promise {<fulfilled>: CSSAnimation}
playState: "finished"
ready: Promise {<fulfilled>: CSSAnimation}
replaceState: "active"
timeline: DocumentTimeline {currentTime: 135640.502}
# ...etc
So you could use the animationName and target properties to select just the animations you want (albeit a little circuitously).
EDIT
Here's a handy function that might be more compatible using just Document.getAnimations, with TypeScript thrown in for demonstration/fun:
// restart animations on a given dom element
const restartAnimations = (element: Element): void => {
for (const animation of document.getAnimations()) {
if (element.contains((animation.effect as KeyframeEffect).target)) {
animation.cancel();
animation.play();
}
}
};
Implement the animation as a CSS descriptor
Add the descriptor to an element to start the animation
Use a animationend event handler function to remove the descriptor when the animation completes so that it will be ready to be added again next time you want to restart the animation.
HTML
<div id="animatedText">
Animation happens here
</div>
<script>
function startanimation(element) {
element.classList.add("animateDescriptor");
element.addEventListener( "animationend", function() {
element.classList.remove("animateDescriptor");
} );
}
</script>
<button onclick="startanimation(
document.getElementById('animatedText') )">
Click to animate above text
</button>
CSS
#keyframes fadeinout {
from { color: #000000; }
25% {color: #0000FF; }
50% {color: #00FF00; }
75% {color: #FF0000; }
to { color : #000000; }
}
.animateDescriptor {
animation: fadeinout 1.0s;
}
Try it here: jsfiddle
If you have a class for CSS3 animation, for example .blink, then you can removeClass for some element and addClass for this element thought setTimeout with 1 millisecond by click.
$("#element").click(function(){
$(this).removeClass("blink");
setTimeout(function(){
$(this).addClass("blink);
},1 // it may be only 1 millisecond, but it's enough
});
You can also use display property, just set the display to none.
display:none;
and the change backs it to block (or any other property you want).
display:block;
using JavaScript.
and it will work amazingly.
The Animation API gives you full control over when and what to play, and is supported by all modern browsers (Safari 12.1+, Chrome 44+, Firefox 48+, Edge 79+) .
const effect = new KeyframeEffect(
el, // Element to animate
[ // Keyframes
{transform: "translateY(0%)"},
{transform: "translateY(100%)"}
],
{duration: 3000, direction: "alternate", easing: "linear"} // Keyframe settings
);
const animation = new Animation(effect, document.timeline);
animation.play();
Demo: https://jsfiddle.net/cstz9L8v/
References:
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
https://developer.mozilla.org/en-US/docs/Web/API/Animation
There is an answer on MDN, which is similar to the reflow approach:
<div class="box">
</div>
<div class="runButton">Click me to run the animation</div>
#keyframes colorchange {
0% { background: yellow }
100% { background: blue }
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.changing {
animation: colorchange 2s;
}
function play() {
document.querySelector(".box").className = "box";
window.requestAnimationFrame(function(time) {
window.requestAnimationFrame(function(time) {
document.querySelector(".box").className = "box changing";
});
});
}
If you create two identical sets of keyframes, you can "restart" the animation by swapping between them:
function restart_animation(element) {
element.classList.toggle('alt')
}
#keyframes spin1 {
to { transform: rotateY(360deg); }
}
#keyframes spin2 {
to { transform: rotateY(360deg); }
}
.spin {
animation-name: spin1;
animation-duration: 2s;
}
.alt {
animation-name: spin2;
}
div {
width: 100px;
background: #8CF;
padding: 5px;
}
<div id=_square class=spin>
<button onclick="restart_animation(_square)">
Click to restart animation
</button>
</div>
On this page you can read about restarting the element animation: Restart CSS Animation (CSS Tricks)
Here is my example:
<head>
<style>
#keyframes selectss
{
0%{opacity: 0.7;transform:scale(1);}
100%{transform:scale(2);opacity: 0;}
}
</style>
<script>
function animation()
{
var elm = document.getElementById('circle');
elm.style.animation='selectss 2s ease-out';
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
</script>
</head>
<body>
<div id="circle" style="height: 280px;width: 280px;opacity: 0;background-color: aqua;border-radius: 500px;"></div>
<button onclick="animation()"></button>
</body>
But if you want to you can just remove the element animation and then return it:
function animation()
{
var elm = document.getElementById('circle');
elm.style.animation='';
setTimeout(function () {elm.style.animation='selectss 2s ease-out';},10)
}
setInterval(() => {
$('#XMLID_640_').css('animation', 'none')
setTimeout(() => {
$('#XMLID_640_').css('animation', '')
}, 3000)
}, 13000)
Create a second "keyframe#" which restarts you animation, only problem with this you cannot set any animation properties for the restarting animation (it just kinda pops back)
HTML
<div class="slide">
Some text..............
<div id="slide-anim"></div>
</div><br>
<button onclick="slider()"> Animation </button>
<button id="anim-restart"> Restart Animation </button>
<script>
var animElement = document.getElementById('slide-anim');
document.getElementById('anim-restart').addEventListener("mouseup", restart_slider);
function slider() {
animElement.style.animationName = "slider"; // other animation properties are specified in CSS
}
function restart_slider() {
animElement.style.animation = "slider-restart";
}
</script>
CSS
.slide {
position: relative;
border: 3px black inset;
padding: 3px;
width: auto;
overflow: hidden;
}
.slide div:first-child {
position: absolute;
width: 100%;
height: 100%;
background: url(wood.jpg) repeat-x;
left: 0%;
top: 0%;
animation-duration: 2s;
animation-delay: 250ms;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(.33,.99,1,1);
}
#keyframes slider {
to {left: 100%;}
}
#keyframes slider-restart {
to {left: 0%;}
}
Note that with React, clearing the animation like this, a codesandbox I found helps.
Example I used in my code:
function MyComponent() {
const [shouldTransition, setShouldTransition] = useState(true);
useEffect(() => {
setTimeout(() => {
// in my code, I change a background image here, and call this hook restart then animation,
// which first clears the animationName
setShouldTransition(false);
}, timeout * 1000);
}, [curr]);
useEffect(() => {
// then restore the animation name after it was cleared
if (shouldTransition === false) {
setShouldTransition(true);
}
}, [shouldTransition]);
return (
<div
ref={ref2}
style={{
animationName: shouldTransition ? "zoomin" : "",
}}
/>
);
}
I found out a simple solution today. Using the example provided in this answer, you can just append the element again to the body:
function resetAnimation() {
let element = document.getElementById('animated');
document.body.append(element);
}
#animated {
position: absolute;
width: 50px;
height: 50px;
background-color: LightSalmon;
animation: bounce 3s ease-in-out infinite;
}
#keyframes bounce {
0% {left: 0;}
50% {left: calc(100% - 50px);}
100% {left: 0;}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="animated"></div>
<button onclick="resetAnimation()">Reset</button>
</body>
</html>
Using Chrome's developer tools, the append does not actually append the element to the body and just replace it, probably because the same reference to the element is used.

Categories