Develop Reference

Paralax scroll of slider is not smooth

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;
}
}

Drawing animation to only run on scroll down

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)"});
});
});

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/

Custom Javascript not working in Chrome

Browsed a lot, fiddled with it a lot. Came to the conclusion others may see the mistake that I am blind to.
The code is supposed to move the sidebar according to window height, sidebar height, content height, etc.
This is the code:
$(document).ready(function() {
var windowheight = $(window).height();
var identheight = $(".ident").height();
var sidebarheight = $(".sidebar").height();
var mainheight = $(".main").height();
var pos = $(window).scrollTop();
var diff = (((sidebarheight + 20) + identheight) - windowheight);
var cur = ((sidebarheight + 20) + (pos - diff)) - 2;
var max = (mainheight + 30);
contentScroll();
$(window).resize(function(){
windowheight = $(window).height();
identheight = $(".ident").height();
sidebarheight = $(".sidebar").height();
mainheight = $(".main").height();
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
$(window).scroll(function (){
pos = $(window).scrollTop();
diff = (((sidebarheight + 20) + identheight) - windowheight);
cur = (sidebarheight + 20) + (pos - diff);
max = (mainheight + 30);
contentScroll();
});
function contentScroll() {
if (sidebarheight < mainheight) {
if (diff < identheight) {
if (pos >= identheight) {
$('.sidebar').css({
'margin-top' : (pos - identheight) + 'px'
});
}
} else {
if (pos >= diff && cur <= max) {
$('.sidebar').css({
'margin-top' : (pos - diff) + 'px'
});
}
if (pos <= diff) {
$('.sidebar').css({
'margin-top' : '0px'
});
}
}
}
}
});
I'm aware of it not being perfect, it's still in the rough phase. It works perfectly fine in FireFox, but not in chrome. The function is being called (tested with alerts). It just doesn't do anything.
Probably something about chrome reading syntax different.
If anyone that see's my mistake would kindly point me to it, it's been too long for me to keep cracking my head open over this.
This is the mock-website in question: http://klok-bremen.de/fff/

Use $(window).load instead of $(document).ready because the parent elements' heights will change after the images load.

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.