We Keep Coding

jQuery Progress Bar Animation When Scroll Point Less Than a Certain Number

I am trying to make my progress bar animate when the container box reaches a certain scroll point on the screen.
let targetPosition = target.getBoundingClientRect();
var getStarted = setInterval(loading, 1);
function loading() {
if (targetPosition.Top < 50) {
$(".skill-bar").each(function () {
var $this = $(this);
var per = $this.attr("per");
$this.css("width", per + "%");
$({ animatedValue: 0 }).animate(
{ animatedValue: per },
{
duration: 2000,
step: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
complete: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
}
);
});
}
}```

Get elements coordinates

I need some help here.
First off, here is a small demo code from my game: https://jsfiddle.net/MiloSx7/a0dn9a4f/2/
Animation idea: Make the coin scale to 2x after it's collected, then slowly move it and gradually reduce scale to the exact spot where the image displaying the coin inventory stat is , invLocation is the ID of the element where the animation should end. It starts from the current coinId X and Y
Is it possible to somehow get the X and Y of the invLocation, so that I know where should I tell the animation to move?

You can do this with JQuery position() and offset() methods.
const spawnTime = 10000;
var coin = 0;
var intervalId = '';
var coinDiv = $('#coinDiv');
var coinImg = $('#coinImg');
var invDiv = $('#invDiv');
var invId = $('#inventoryId');
var invImg = $('#invLocation');
coinImg.on('click', collect);
intervalId = setInterval(setLocation, spawnTime);
function setLocation() {
var x = parseInt( Math.random()*(80-20+1) ) + 20;
var y = parseInt( Math.random()*(80-20+1) ) + 20;
coinImg.animate({
opacity: 1
}, 3000,
function() {
coinImg.css('top', x+'%');
coinImg.css('left', y+'%');
coinImg.css('display', 'initial');
setTimeout( () => coinImg.animate({ opacity: 0 }, 3000), 6000);
});
}
function collect() {
clearInterval(intervalId);
coinImg.stop();
coinImg.css('opacity', 1);
/* Increment coin counter */
coin++;
invId.text(coin);
/* In order to disable multiple clicks */
coinImg.css('pointer-events', 'none');
/* Double the size */
coinImg.css('width', '128px');
coinImg.css('height', '128px');
/* Animate and return to normal */
coinImg.animate({
width: '32px',
height: '32px',
left: invImg.offset().left + 'px',
top: invImg.offset().top + 'px'
}, 1500,
function() {
coinImg.css('pointer-events', 'auto');
coinImg.css('display', 'none');
coinImg.css('width', '64px');
coinImg.css('height', '64px');
intervalId = setInterval(setLocation, spawnTime);
}
);
}
Working example: https://jsfiddle.net/wz4q9w69/

Trying to initialize FullPage.JS after scrolling through hero

Trying to initiate FullPage.JS after scrolling through hero. Right now if you scroll past the hero - FullPage gets initialized and continues to scroll through the slides with the momentum of the initial scroll. I have this function inplace for my init.
function initFullPage(){
$(".view-case-study").addClass("projects-load");
$(".pagination").addClass("visible");
$(".logo-menu svg").toggleClass("hovered");
$('#fullpage').fullpage({
lazyLoading:false,
navigation: true,
navigationPosition: 'right',
css3:true,
normalScrollElementTouchThreshold: 5,
touchSensitivity: 10,
anchors: a_anchors,
menu: '#myMenu',
normalScrollElements: '.nav, .open-nav, .project-inner, .work-mode, .menu-shelf, .tab, .view-case-study, #hero, .hero-center-container',
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000);
$('#hero').animate({'opacity':'0'},1000);
$('#hero').addClass('destroy');
$('.ui-info').animate({'opacity':'1'},350);
},
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
leavingSection.removeClass('projects-load');
leavingSection.find(".full-line").animate({'width':'0%'},250);
leavingSection.animate({'background-position-y':'0px','background-size':'110%'},100);
$('#project-inner-container').animate({scrollTop:0},0);
$('.ui-info').animate({'opacity':'0'},0);
}
});
fullPageInit = true;
}
Below is my Hero scroll script. I've tried to initialize the script and silentmove to the first section but it doesn't want to listen.
var winHeight = $(window).height();
$(window).scroll(function () {
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit == false)) {
initFullPage();
$.fn.fullpage.silentMoveTo('#sidepocket');
}
$('svg.scroll-end').css({
'clip': "rect(0px," + scrTransform + "px,200px,0px)",
});
}); // Close

// Scroll SVG Hero
$('#scroll-control').on('scroll',function(e){
var totalScroll = $('#scroll-control').scrollTop();
var slowScroll = totalScroll * .2;
console.log(slowScroll);
$('svg.scroll-end').css({
'clip': "rect(0px," + slowScroll + "px,200px,0px)",
});
if(totalScroll > 400){
if((fullPageInit == false) && (workPage == false)){
fullPageInit = true;
$('#hero').animate({'opacity':'0'},300,function(){
// remove scroll listener
$('#scroll-control').off();
// set first project DOM
var wh = window.innerHeight ? window.innerHeight:$(window).height();
$('#fullpage section').height(wh);
var loadedSection = $('#fullpage section:first-child');
projectUrl = loadedSection.data('url');
project_title = loadedSection.data('title');
loadedSection.addClass('projects-load');
loadedSection.find(".full-line").animate({'width':'100%'},500);
history.pushState(null, null, '#'+projectUrl);
loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000,function(){
initFullPage();
$('#scroll-control').hide();
});
$('.ui-info').animate({'opacity':'1'},350);
});
$('#hero').addClass('destroy');
}
}
});
var winHeight = $(window).height();
$(window).scroll(function (e) {
console.log(e);
var scrTop = $(document).scrollTop() / winHeight,
scrTopFixed = scrTop.toFixed(2),
scrTransform = scrTopFixed * 80,
bgPos = scrTransform / 10 + 95,
heroOpacity = 1 - scrTransform / 100;
if ((scrTransform >= 80) && (fullPageInit === false)) {
}
}); // Close
The issue was fixed by setting a time out so that FullPage doesn't initialize until the scrolling of the mouse ends, therefore you do not overscroll or have any momentum that forces the user to the next section.
Hope this helps others trying to build custom scripts into FullPage.JS
https://www.alexcoven.com

jQuery - end setinterval after X rund

I have a little slider im working on which is almost there im jsut having some trouble with me jQuery.
So first off:
I want my slider to reset after the interval has run x amount of times.
It was my understanding that the following would work but it doesn't seem to take. 6000, slides, function() { homesliderend();
so lets say slides = 2 set interval should call homesliderend(); but it doesn't the interval just keeps running.
Second Issue: I'm also trying to get it to add 100% to lengther every 6 seconds. But instead of adding 100 each time its just setting it to 100 its not multiplying.
jQuery(document).ready(function($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
setInterval(function() {
var tn = n + 100;
$(".lengther").animate({
left: "-" + tn + "%"
}, 500);
}, 6000, slides, function() {
homesliderend();
});
}
homeslider();
});

The setInterval will not stop automatically, you need to clear the interval to stop it.
Also you need to increase the value of n to increase the left param
jQuery(document).ready(function ($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
var interval = setInterval(function () {
var tn = ++n * 100;
$(".lengther").animate({
left: "-" + n + "%"
}, 500);
//if the last item is slided then stop the animation and run homesliderend
if (n == slides) {
clearInterval(interval);
homesliderend();
}
}, 6000);
}
homeslider();
});

How to call a function with a delay

I have the following function, which animates a series of bars:
function fluctuate(bar) {
var height = Math.floor(Math.random() * 30) + 5;
//Animate the equalizer bar repeatedly
bar.animate({
height: height
}, 250, function() {
fluctuate($(this));
});
}
$(".bar").each(function(i) {
fluctuate($(this));
});
I want this to play each time a div class (".play") is clicked. How can I enabled this, and limit the animation to 3 seconds, before stopping?
Thanks

To run the animation for three seconds only, count the number of times it has been running, and multiple with the animation speed to get the total sum of the animations length :
function fluctuate(bar) {
var height = Math.floor(Math.random() * 30) + 5;
bar.animate({
height: height
}, 250, function() {
var times = $(this).data('times') || 0;
if (times <= 12) {
$(this).data('times', ++times);
fluctuate($(this));
}else{
$(this).data('times', 0);
}
});
}
$(".bar").each(function(i) {
fluctuate($(this));
});
FIDDLE
And a nicer version as a plugin with parameters:
$.fn.fluctuate = function(speed, duration) {
return this.each(function() {
var self = this,
times = Math.round(duration / speed),
iteration = 0;
(function ani() {
var height = Math.floor(Math.random() * 30) + 5;
$(self).animate({ height: height }, speed, function() {
if (iteration <= times) {
iteration++;
ani();
}
});
})();
});
}
$('#test').on('click', function() {
$(".bar").fluctuate(250, 3000);
});
FIDDLE