Drawing animation to only run on scroll down - javascript

I have an icon drawn when i scroll down the page and undrawn when i scroll up.
I would like to make it draw only when i scroll down and stay this way for the rest of the session.
$(document).ready(function() {
var $dashOffset = $(".path").css("stroke-dashoffset");
$(window).scroll(function() {
var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
var $newUnit = parseInt($dashOffset, 10);
var $offsetUnit = $percentageComplete * ($newUnit / 100);
$(".path").css("stroke-dashoffset", $newUnit - $offsetUnit);});
var $bg = $(".background")
$(document).scroll(function(){
$bg.css({transform: $(this).scrollTop()<1 ? "scale":"scale(1,1)"});
});
});

Related

Move an image right and down on first scroll,right and up on second scroll

var totalHeight = 0;
$(".scroll-section").each(function(){
totalHeight += $(this).height();
});
$(".site-content").scroll(function() {
var scrollTop = $(".site-content").scrollTop();
var movePos = (scrollTop / totalHeight) * 100;
movePos = movePos + 100;
console.log(movePos);
$(".page-fixed").css("background-size", `${movePos}% 100%`)
});
I tried margin, does not work
Doing this for webflow so yeah... Would need to get it webflow compatible as well

SmoothScroll to an ID Div on another page using jquery

I have a page "link.html" which has an anchor pointing to index.html page <a href = "index.html?#myInnerLink"
I want smoothscroll to the div on another page(index.html) which has an Id of "myInnerLink" in jquery .. it is working fine but the problem is that it is scrolling from bottom to top instead of top to bottom to that particular div
"myInnerLink" div is internal in "myDiv" div... Thanks
link.html
<a id="mylink" href="index.html?#myInnerLink">Go To MY InnerLink</a>
index.html
<div id="myDiv" class="mydiv">
SomeText here...
<div id="myInnerLink">
ScrollTo This Div...
</div>
</div>
jquery
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash;
$('#myDiv').animate({
scrollTop : $(hash).offset().top
}, 500);
};
});
I'm currently using this script below, which is modified and originally came from https://jsfiddle.net/s61x7c4e/
function doScrolling(element, duration) {
let bodyRect = document.body.getBoundingClientRect(),
elementRect = element.getBoundingClientRect(),
offset = ((elementRect.top - bodyRect.top) - 40);
let startingY = window.pageYOffset,
elementY = offset,
targetY,
diff,
easeInOutCubic,
start;
duration = duration || 500;
// if element is close to page's bottom then window will scroll only to some position above the element...
targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY;
diff = targetY - startingY;
easeInOutCubic = function (t) {
return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
};
if (!diff) return;
// bootstrap our animation,
// it will get called right before next frame shall be rendered...
window.requestAnimationFrame(function step(timestamp) {
if (!start) start = timestamp;
let time = timestamp - start, // elapsed milliseconds since start of scrolling...
percent = Math.min(time / duration, 1); // get percent of completion in range [0, 1]
// apply the easing, it can cause bad-looking
// slow frames in browser performance tool, so be careful...
percent = easeInOutCubic(percent);
window.scrollTo(0, startingY + diff * percent);
// proceed with animation as long as we wanted it to.
if (time < duration) {
window.requestAnimationFrame(step)
}
})
}
document.getElementById('scrollMid').addEventListener('click', function(){
var element = document.getElementById('middle');
doScrolling(element, 1000);
});

how to make div move left to right faster?

I want the div to move left to right on scroll. Which I did.
But, how do I make the div go to the right much faster? Because the speed of the div going from left to right is the same as the scrollbar's speed going from top to bottom. Sorry if I'm not making any sense to you.
Here's the JSFiddle - https://jsfiddle.net/wx8d0a1x/
$(document).ready(function () {
var $horizontal = $('#horizontal');
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
Right now your speed depends on the length of the document. If you want it to reach the right side by the halfway point in your document, multiply your scrollpercent by 2. If you want it to reach the right by a quarter of the way use a multiplier of 4.. etc..
Use Math.min() to ensure that the box doesn't scroll off page.
$(document).ready(function () {
var $horizontal = $('#horizontal');
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height(),
m = 2; //Speed multiplier
scrollPercent = Math.min((s / (d - c)*m),1);
var position = (scrollPercent * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
You can increase the scrollPercent by adding a multiplicative factor or add a factor. For example:
$(document).ready(function () {
var $horizontal = $('#horizontal');
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
k = 10;
scrollPercent = k * (s / (d - c));
var position = (scrollPercent * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
Just add a multiplier to
var position = ((scrollPercent * ($(document).width() - $horizontal.width()))*1);
see fiddle: https://jsfiddle.net/DIRTY_SMITH/wx8d0a1x/1/

Auto scrolling to element in scrollable div

I have 5 elements that are within a div larger than the screen (on a mobile phone).
I want the user to be able to click on one of the elements and have that element scroll to the centre of the screen.
I've tried writing this with jQuery myself, but I can't seem to get the logic quite right. I've got it kind of moving but the element selected doesn't go to the centre of the screen.
Here's a Fiddle of what I have do far: http://jsfiddle.net/geQ64/1/
Here's the JS from the fiddle also:
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
$('.ul-wrap').scrollLeft( $('.tab-3').offset().left );
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/5;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab - center;
$('.ul-wrap').scrollLeft(position);
}
});
Found a fix, here's the JS is anyone needs it.
The - 55 in the var position is for an arrow that sits in the centre of the page below the elements I'm moving with this script.
$(window).on('load', function() {
$('.tab-3').trigger('click');
var width = $(window).width();
if (width < 651) {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var position = offset * 2 + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}
});
$('.single-tabs').on('click', function() {
var offset = $('.tabs').width();
offset = offset/7;
var center = offset/2;
var tab = $(this).data('tab');
$('.tabs-content').hide();
$('.tab'+ tab +'').show();
var width = $(window).width();
if (width > 650) {
var arrow = tab*20-12;
$('.arrow-up').css('margin-left', '' + arrow + '%');
} else {
tab = tab - 1;
var position = offset * tab + center - 50;
$('.ul-wrap').animate({
scrollLeft: position
}, 200);
}

Using the window resize function to keep variables uptodate?

I am a little confused on how to keep some variables Ive created uptodate when the window is resized so my scroll function carries on getting the correct values. Basically I have multiple elements that contain a message that gets displayed when the user scrolls the element into 50% height of the viewport height. This works fine but my issue is when I resize I'm not sure how to update my variables boxHeight, elementOffset, verticalMatch which keep control of the values I need to use in my scroll event. I was wondering can someone help explain how I can resolve this?
My code looks like this
var windowHeight = $(window).height(),
headerHeight = $('.header').height();
$('.box').each(function (i,e) {
var el = $(e);
var boxHeight = el.height(),
elementOffset = el.offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
el.addClass('is-active');
}
});
});
$(window).on('resize', function() {
windowHeight = $(window).height()
elementOffset = $('.box').offset().top;
$('.box').each(function (i,e) {
var el = $(e);
//update boxHeight, elementOffset, verticalMatch
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
});
});
And heres the JS Fiddle: http://jsfiddle.net/fm4z7/2/
If someone could explain how I do this it would be great!
If all you want to do is update your sizing variables during a resize event, then do just that:
$(window).on('resize', function() {
windowHeight = $(window).height();
elementOffset = $('.box').offset().top;
});
Your variables are global so they can be accessed anywhere.

Categories

Resources