We Keep Coding

Javascript animation trigger only when reaching a certain part of webpage

I want a counter animation which is triggered only when webpage reaches that certain part. For example, the js file would be this. I want the count to start only when the page reaches that certain section.
const counters = document.querySelectorAll('.counter');
const speed = 200; // The lower the slower
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
// Lower inc to slow and higher to slow
const inc = target / speed;
// console.log(inc);
// console.log(count);
// Check if target is reached
if (count < target) {
// Add inc to count and output in counter
counter.innerText = count + inc;
// Call function every ms
setTimeout(updateCount, 1);
} else {
counter.innerText = target;
}
};
updateCount();
});

Yo can easily do it using Jquery
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$("div").css("background-color", "#111111");
} else {
$("div").css("background-color", "transparent");
}
});
});
div {
height: 120vh;
transition-duration: 0.5s;
}
<div>
Scroll to Change Background
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

You can use Intersection Observer to do that
const $observeSection = document.querySelector('#second');
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > options.threshold) {
$observeSection.classList.add('yellow');
} else {
$observeSection.classList.remove('yellow');
}
});
}, options);
observer.observe($observeSection);
main {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
main section {
width: 100vw;
height: 100vh;
}
#first {
background: red;
}
#second {
background: blue;
}
#third {
background: green;
}
.yellow {
background: yellow!important;
}
<main>
<section id="first"></section>
<section id="second"></section>
<section id="third"></section>
</main>
In this example, I observe the second section, and when the scroll come to the middle of the section (threshold: 0.5), I add a class to change the color of this section.
Be careful if you need to handle legacies browsers as you can see here :
https://caniuse.com/#feat=intersectionobserver

You don't need jquery to achieve this.
Here is a VanillaJS solution:
window.onscroll = (e) => {
e.stopPropagation();
window.pageYOffset > 50 && console.log("do smh");
}

Using jQuery Flash in JavaScript functions

Have a java script table that connects to a web socket and update table.
I want to use jquery falsher to flash if the value is greater than and less than the current value.
Update Table function
var child = createStockNode(stock, type, template);
// try to replace
var stockNode = document.querySelector(type + "[data-symbol=" + stock.n + "]");
if (stockNode) {
table.replaceChild(child, stockNode);
} else {
// add new stock
table.appendChild(child);
}
//stock.c ===> close Price
var bg = stock.c < 0
? '255,148,148' // red
: '154,240,117'; // green
$row = child;
$row.flash(bg, 1000);
//child.flash(bg , 1000)
}
Jquery flusher function
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
.animate({ backgroundColor: current }, duration / 2);
};
Error Uncaught ReferenceError: $row is not defined
Jquery is defined in my html page as well.

EDIT
The jQuery documentation about the animate() function specifies :
For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used
I'd recommand to use CSS3 for thins kind of animation.
Still, here are to ways of flashing.
(function($) {
$.fn.blink = function(options) {
var defaults = {
delay: 500
};
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var blink = false;
setInterval(function() {
if (blink) {
$(obj).css('background', options.from);
} else {
$(obj).css('background', options.to);
}
blink = !blink;
}, options.delay);
});
}
}(jQuery))
$('#purejQuery').blink({
delay: 500,
from: "red",
to: "blue"
});
/* The animation code */
#keyframes blinking {
0%{
background-color: red;
}
50%{
background-color: red;
}
51%{
background-color: blue;
}
100%{
background-color: blue;
}
}
#pureCSS {
width: 100px;
height: 100px;
animation: blinking 1s infinite;
}
#purejQuery {
width: 100px;
height: 100px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pureCSS">Done by CSS</div>
<div id="purejQuery">Done by jQuery</div>

Two jQuery animations on one element in a game loop

I am trying to let a html element jump by clicking on a button while another animation is running on that element. The animations are triggered in a game loop if conditions are met (flashing if health is critical), or if a button is clicked (jumping if fed).
Problem: every time the loop repeats, the animation function is called again and is put into the queue; flashing wouldn't stop when health is okay again. Clearing the queue in a callback function of the animation only works if it's the default queue ("fx"), but I need several custom queues.
Working with global boolean variables to allow or refuse the animation function to get called are no solution for me because I want the jump() and flash() animations to be used by several html elements.
I read about queuing and starting a 2nd queue on an element in learn.jquery.com and also read the jQuery API documentations about animation and queing but could not find a solution yet.
Check out flashAnimation1(), it's the expected result: queue cleared in callback so the element will stop flashing if triggering stops. But this works on the default (fx) queue only.
letJump1 (no queue) and letJump2 (custom queue) let the element rise or shrink without control.
flashAnimation2() is a flickering mess.
Can you help me please?
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || windows.msRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
let reqAnimF;
let progress = 0;
let lastRender = 0;
let animationOn = false;
const button = document.getElementById("button");
const state = document.getElementById("state");
const jump = document.getElementById("jump");
const block = $("#fadeInAndOut");
const changeStatus = () => animationOn = !animationOn;
const flashAnimation1 = (element) => { $(function() {
element.animate( {opacity: 0}, "fast", "linear" )
.animate( {opacity: 1}, "fast", "linear", ()=> element.clearQueue() );
})
}
const flashAnimation2 = (element) => { $(function() {
element.queue("flash", (next)=> {
element.animate( {opacity: 0}, {
duration: "fast",
easing: "linear",
queue: "flash"
}).animate( {opacity: 1}, {
duration: "fast",
easing: "linear",
queue: "flash",
complete: element.clearQueue()
});
next();
}).dequeue("flash");
});
};
// Jumping: no queue
const letJump1 = (element) => { $(function() {
element.animate( {width: "+=50", height: "+=20"}, {
duration: "fast",
queue: false,
always: () => {
element.animate( {width: "-=50", height: "-=20"}, {
duration: "fast",
queue: false
});
}
}
);
})};
// Jumping queued to another queue
function letJump2(element) {
$(function() {
element.queue("jump", function(next) {
element.animate({width: "+=50", height: "+=20"}, {
duration: "fast",
queue: "jump"
})
.animate( {width: "-=50", height: "-=20"}, {
duration: "fast",
queue: "jump"
});
next();
}).dequeue("jump");
})
};
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
/* function update(progress) {} */
function draw() {
state.innerHTML = animationOn;
if (animationOn) {
flashAnimation2(block);
}
}
function loop(timestamp) {
progress = timestamp - lastRender;
/* update(progress); */
draw();
lastRender = timestamp;
reqAnimF = requestAnimationFrame(loop);
}
button.addEventListener("click", changeStatus);
//jump.addEventListener("click", letJump1(block)); // button is dead for some reason
reqAnimF = requestAnimationFrame(loop);
.center {
position: relative;
margin: auto;
width: 300px;
height: 300px;
text-align: center;
border: 1px solid red;
}
button {
margin: 0 0 20px;
}
#fadeInAndOut {
margin: auto;
width: 100px;
height: 100px;
background-color: black;
}
#jump {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<h1 id="state"></h1>
<button type="button" id="button">Flash on/off</button>
<div id="fadeInAndOut"></div>
<button type="button" id="jump" onclick="letJump1(block)">Jump</button>
</div>

Javascript slideshow white screen

Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?
Here's my working fiddle: https://jsfiddle.net/t9ezr8wr/2/
My javascript:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 200 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});

what u wanted couldn't be achieved with one image ,so i used two image to achieve the desired effect.
JS:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 600 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" style="display:block" src="' + images[0] + '" />');
$(defaultSettings.sliderContainer).append('<img id="sliderImg2" width="900" style="display:none" src="' + images[1] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
document.getElementById("sliderImg2").src = images[counter >= images.length ? 0 : counter];
var images = $('#sliderImg')
var now = $("#sliderImg")
var next = $("#sliderImg2")
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed,function(){
document.getElementById("sliderImg").src = document.getElementById("sliderImg2").src;
$("#sliderImg").css('display','block');
$("#sliderImg2").css('display','none');
});
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
CSS:
body{
margin: 0;
}
main {
max-width: 100%;
height: 737px;
margin: auto;
font-family: arial;
position: relative;
color: white;
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#slider img {display:none; position: absolute; top: 0; left: 0;}
#slider img:first-child {display:block;}
#slider img:nth-child(2) {display:none;}

The flash effect it's because your next picture is already visible before the call of fadeIn() function, you fix it with add next.hide() just before now.fadeOut().
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 800 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
next.hide();
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
body{
margin: 0;
}
main {
max-width: 100%;
height: 737px;
margin: auto;
font-family: arial;
position: relative;
color: white;
}
#slider {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#slider img {display:none; position: absolute; top: 0; left: 0;}
#slider img:first-child {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var myImages = ["https://s4.postimg.org/45u9pqnml/slide1.jpg", "https://s11.postimg.org/f3qwh4syb/slide2.jpg", "https://s24.postimg.org/b365xoq7p/slide3.jpg"];
</script>
<main>
<div id="slider">
</div>
</main>

try to change transitionspeed to 0

Javascript plugin only firing once

I've built a very basic jQuery plugin that essentially positions a sprite image left by a set amount every x milliseconds to create an animation effect. The plugin at this stage is very basic and only has a few options, and it works pretty well.
Apart from that fact that it only fires once! I have multiple instance of the animation on one page and they all fire, but only ever once each.
Now I'm not expert on Javascript and only just managed to cobble this together but here's the code anyhow:
// Animation Plugin
(function($){
$.fn.anime = function(customOptions) {
// Default Options
var defaultOptions = {
slideWidth : 100,
frames : 10,
speed : 40,
minCycles : 1,
stopFrame : 0
};
// Set options to default
var options = defaultOptions;
// Merge custom options with defaults using the setOptions func
setOptions(customOptions);
// Merge current options with the custom option
function setOptions(customOptions) {
options = $.extend(options, customOptions);
};
return this.each(function() {
// Initialize the animation object
var $elem = $('img', this);
var frameCount = 0;
var currentSlideWidth = options.slideWidth;
var intervalID = null;
var cycleCount = 1;
var animate = function() {
if (frameCount < (options.frames -1)) {
$elem.css('left', '-' + currentSlideWidth + 'px');
frameCount++;
currentSlideWidth += options.slideWidth;
}
else {
if (cycleCount < options.minCycles)
{
frameCount = 0;
currentSlideWidth = options.slideWidth;
$elem.css('left', '-' + currentSlideWidth + 'px');
cycleCount++;
}
else
{
window.clearInterval(intervalID);
$elem.css('left', '0px');
}
}
cycleCount = 1;
};
$(this).bind('mouseover', function(){
var intervalID = window.setInterval(animate, options.speed);
});
});
};
})(jQuery);
The code used to call the actual plugin on a dom element is:
$('#animeBolt').anime({
frames: 50,
slideWidth: 62,
minCycles: 1,
speed: 30,
});
This is the html it is called on:
<div class="anime" id="animeBolt">
<img src="_assets/img/anime-bolt.png" alt="Lightning Bolt" width="3100" height="114">
</div>
And finally the css:
.anime {
position: absolute;
overflow: hidden; }
.anime img {
position: absolute;
left: 0;
top: 0; }
#animeBolt {
top: 2669px;
left: 634px;
width: 62px;
height: 116px; }
How do I get the plugin to fire repeatedly?

I've created and modified jsfiddle example using your code. It's working http://jsfiddle.net/9Yz9j/16/
I've change a couple of things:
added clearInterval on mouseover to preven multiple overlapping intervals
moved intervalID variable to outside of each function, and removed var keyword from mousover handler so the script will remember intervalID set on last mouseover
reseting the frameCount, cycleCount and currentSlideWidth variables on animation end (that was actually a clue thing to get animation going more than just once)
Hope that helps