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/
Related
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
I am trying to make a sort of parallax webdesign. My question is, if someone knows how I can make the red div move faster. I think its in the formule but dont know sure. Maybe someone knows?
Here is my code: http://jsfiddle.net/PvVdq/
$(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
});
});
});
I'm not so sure about this. When I tried this one, it speeds up the movement of the red div
$(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 * 10 * ($(document).width() - $horizontal.width()));
$horizontal.css({
'left': position
});
});
});
Yuo need to play with your scrollPercent , if you want it go faster :
scrollPercent = (s / (d - c) * 2);//twice fatser
or even faster :
scrollPercent = (s / (d - c) * 3);//3 times fatser
http://jsfiddle.net/PvVdq/1448/
I have problem with my parallax slideshow script. It's not scrolling smooth and its shaking weird. The thing is that I couldn't find the proper script for element(like slider etc), most of them are only for single image. There is my script:
<script type="text/javascript">
var ypos,image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('slider');
image.style.top = ypos * .8 +'px';
}
window.addEventListener('scroll',parallex);
link to the site: http://www.pappu-lighting.com/Slider/Home.html
$(window).scroll(function(){
if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
var temp = 100 - ($(document).scrollTop() - 1200) / 8;
var bonus = '50% ' + temp*-1 + '%';
document.getElementById('div').style.backgroundPosition = bonus;
}
}
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)"});
});
});
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.