jQuery activate function when user scrolls to specific section - javascript

I have been using progressbar.js to animate path fills, which is going quite well, however I have ran into a issue where the animation / function is playing as soon as the user loads the page.
The plan is for the function to run when the user scrolls to the section where its contained.
JSFiddle - https://jsfiddle.net/y12e8uks/1/
I have tried using $(window).scroll event, however im having a few issues implementing that into the existing function.
Any help would be great on this!
Thanks.

Try with this:
var bar = new ProgressBar.Path('#heart-path', {
easing: 'easeInOut',
duration: 1400
});
$(window).scroll(function() {
var hT = $('#container').offset().top,
hH = $('#container').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
$(this).append("%");
}
});
});
}
});

Related

Hiding element when scrolling choppy

I have a header that I want to be hidden once you start scrolling into the content of my webpage. This is the code I used:
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
$("header").css({
display: "none"
});
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
$("#msg").css({
display: "none"
});
}
});
The header does disappear correctly however, when I start scrolling some of my other elements disappear temporarily and the page jumps around. When I scroll to the top the header is gone (like I want) and the other elements are in place like they should be. My other elements are also triggered to appear when scrolling using ScrollReveal so I don't know if this may be interfering somehow.
ScrollReveal().reveal(".glitch", {
delay: 3000,
easing: "ease-in"
});
ScrollReveal().reveal("header", {
delay: 5000,
easing: "ease-in"
});
ScrollReveal().reveal(".arrow", {
delay: 7000,
distance: "-50px",
easing: "ease-in"
});
ScrollReveal().reveal("nav", {
delay: 8000,
easing: "ease-in"
});
There are a couple of things you can do to prevent that. Basically, the problem is related to the fact that you are re-hiding that div repeatedly, even after it is hidden - so many times, in fact, that you are "flooding" the browser.
1. Create a "state" variable
Create a variable that stores the current visibility state of the element, and only hide the div if the var says it hasn't yet been hidden:
var hdrVisible = true, msgVisible = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
if (hdrVisible){
$("header").hide();
hdrVisible = false;
}
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 900) {
if (msgVisible){
$("#msg").hide();
msgVisible = false;
}
}
});
2. Use a Debouncer
Also, you should look into the debounce plugin. It will allow you to limit the number of times that a function will fire.
The window.scroll() function fires many times per second - to see how many times, view this example:
$(window).scroll(function(){
let tmp = $(window).scrollTop();
$('#msg').html(tmp);
});
body{height:5000px;}
#msg{position:fixed;top:0;right:0;padding:15px;background:wheat;text-align:center;font-size:1.3rem;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="msg"></div>

Execute counter script when element is scrolled to on webpage

I'm completely new to javascript. I'm trying to execute a counting script but I only want it to start when you scroll to the element on-screen (so you can see the counting). Currently, my code currently only works on page load. Can somebody please help me? Thanks.
Here is the html code element:<span class="count">100</span>
here is the script that currently works on page load:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
You could use something like this:
$element = $('.count');
$(window).scroll(function() {
var hT = $element.offset().top,
hH = $element.outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT + hH - wH)) {
$element.each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
What it does is validate the current scroll offset against the element offset in the page. Hope it helps.
Ok I just found a solution someone else had done. I'm sure there is a simpler script possible but this one works like a charm. I edited the SPAN element like so:
<span class="timer count-title count-number" data-to="100" data-speed="5000"></span>
I then used the updated Feb 2 javascript code found # Bootstrap counter start on display. Hope this helps others looking for a scroll-to activated counter.

Stop/reverse animation on mouse off (baraja jquery plugin)

I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E

jQuery ScrollTop add to this script

a couple of people kindly helped me yesterday with a jQuery issue on a scrollTop function but I now have another small issue. Below is the fiddle for the js. I need to get the js to bounce the content back to the top instead of scrolling back up to the top.
Here is the JS, fiddle below it.
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: function () {
$(this).animate({
scrollTop: 0
}, {
duration: speed,
easing: 'linear', // <--- here
complete: speed
});
}
});
}
speed = 8000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
fiddle
I need the speed to remain as linear but the scroll to reset to the top once it gets to the bottom. Any help would be amazing! Thanks in advance people :)
Here is an updated fiddle: http://jsfiddle.net/tsb5pj49/4/
Instead of animating it back to the top, you can just set the scrollTop to 0 using the same function. Additionally, if you store the setInterval in a variable then you can clear it and start it again when the animation completes and the scrollTop is reset. Like so:
// When DOM is fully loaded
jQuery(document).ready(function ($) {
var speed = 8000,
scrollInterval;
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: onScrollingComplete
});
}
function startScrolling() {
scroll( speed );
scrollInterval = setInterval(function () {
scroll(speed)
}, speed * 2);
}
function onScrollingComplete() {
$( this ).scrollTop( 0 );
clearInterval( scrollInterval );
startScrolling();
}
startScrolling();
});
Hope this helps

jQuery Slideup and Fadein Effect at the same Time

I'm learning new stuff with jQuery here and I have seen a effect that I like link here
Meet my Team section. As you can see if you scroll down the circle slidesup and fades in at the same time. I tried to replicate that effect. Here's my jsfiddle
$(window).on("scroll", function() {
if ($(window).scrollTop() >= $('#thumbnails-cont').offset().top-$(window).height()) {
$("#thumbnails img").animate({opacity: 1, bottom: 0})
}
});
You have to work with the queue property to play animations simultaneously.
Working fiddle: Here
Basic code:
$(function() {
$(".thumbnail").animate({ opacity: 1 }, { duration: 1200, queue: false });
$(".thumbnail").animate({ "margin-top": "0px" }, { duration: 1200, queue: false });
});
Read this for more information about the animation function in jQuery.
I hope I could help you a bit :)

Categories

Resources