Rectangle 27 2

I found a solution which fixed the problem by using this javascript

$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
    'top': (distance*2) + 'px',
    'right': '+' + distance + 'px'
});
});

javascript - Image Parallax Scrolling Not Smooth - Stack Overflow

javascript jquery html css parallax
Rectangle 27 3

Don't forget to call refresh() at the end of imageFit.

var imageFit = function() {
   windowHeight = $(window).height();
   $('.parallax').css('min-height', windowHeight).refresh();
};

It truly was that simple, nice! Is it implied by the script to only refresh .parallax and not every element in the document? Thank you for Skrollr, by the way, it seems to be right down my alley. :-)

@NilsKaspersson "Is it implied by the script to only refresh .parallax and not every element in the document". What do you mean by that? The refresh jQuery helper will only refresh the selected elements (.parallax).

I might have been too fast to say this was solved; it seems like this solved parallax absolute mode but the problem persists in relative mode. Any ideas on what I might be doing wrong?

Maybe create a new question and include an example.

javascript - Full viewport height image with parallax scrolling - Stac...

javascript jquery html css parallax
Rectangle 27 2

Scrolling using the mouse wheel requires special handling. Reason being each mouse wheel scroll doesn't scroll the content by a certain amount of pixels. Each scroll causes your page to jump and then each jump results in the "jumpy" jittery animation as the background image is trying to position itself at these jumps.

Using a library will solve the problem most of the time, but it is also worth understanding what problems it is trying to solve under the hood.

Just for reference sakes, the mouse events are mousewheel and DOMMouseScroll

css - Javascript - Smooth parallax scrolling with mouse wheel - Stack ...

javascript css scroll parallax smooth-scrolling
Rectangle 27 8

In your jquery.stellar.js file change the stellar function so that horizontal scrolling is set to false (its set to true as default).

$.stellar({
horizontalScrolling:false
// rest of function
});

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Problems with background image position on Stellar.js - S...

javascript css parallax
Rectangle 27 0

If you want to do it as shown in the video you can wrap your image into one div and wrap your content that is supposed to cover to image into another one. Having those two div's you can work with the CSS z-index. If you set the img-divs position to "fixed" it the text will be scroll to the top and the image will remain in its position.

And by the way. In my opinion creating the effect shown in the video would even be easier by changing the img into a div and giving this this a background image in css. Then wrap all the items that are supposed to overscroll the image into one div and give it a z-index.

Thank you that was so much simpler. I placed the image as a bg in css like you suggested and added background-attachment:fixed and didn't even need the z-index. Thanks again for you speedy response, i really appreciate it/

javascript - make page content cover and image when scrolling - Stack ...

javascript jquery html css parallax
Rectangle 27 0

It seems to be a scrollbar. Possibly a subpixel thing, that's why it has no handle. It will disappear if you set overflow-x: hidden on body. Strangely enough that doesn't work on the section itself.

javascript - issue with parallax scrolling background images - Stack O...

javascript html css scroll parallax
Rectangle 27 0

This is all wrong, you are setting up an event handler each time you use $(window).scroll(). You only need to do that once. Try this.

var scrolledTop,
    scrolledLeft,
    background_position,
    $custom_bg;


function parallax(){
    scrolledTop = window.scrollY,
    scrolledLeft = window.scrollX,
    background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');

    console.log('background_position', background_position);
    $custom_bg.css('background-position', background_position);
}

$(function() {

    $custom_bg = $('section.intro .custombg');


    $(window).on('scroll', parallax);


});

javascript - Parallax background image for top-bottom and not right-le...

javascript jquery css parallax
Rectangle 27 0

I found a solution which fixed the problem by using this javascript

$(window).scroll(function() {
var distance = $(this).scrollTop();
$('#slash-1').css({
    'top': (distance*2) + 'px',
    'right': '+' + distance + 'px'
});
});

javascript - Image Parallax Scrolling Not Smooth - Stack Overflow

javascript jquery html css parallax
Rectangle 27 0

var updateImgPosition = function  () {
    var backgroundImage = document.querySelector('#background img');
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = document.body.scrollTop;
    var innerHeight = window.innerHeight;

    backgroundImage.style.webkitTransform = "translate3d(0,"+ (((backgroundImage.scrollHeight - innerHeight) / 100) * ((scrollTop / (innerHeight - scrollHeight)) * 100)) + "px,0)"

};

document.addEventListener('scroll', updateImgPosition)

css - Make JavaScript image movement while scrolling smoother - Stack ...

javascript css scroll parallax smooth-scrolling
Rectangle 27 0

This is a parallax effect, which emulates a 3D space by having your foreground and background move at different speeds. It looks like images are perhaps swapped out and fixed at certain scroll spots. You'll need to use a little javascript, but it is not too difficult a trick to pull off:

Here's a library to help:

Here's another neat site that does some neat things with parallax and scrolling: https://www.google.com/nexus/5/

woah!I guess this was the one I was looking for :D But I'm not entirely sure since the site i have given uses css (or I dunno if there's a javascript in that part) Thanks!

HTML/CSS - Fixed Backgrounds while scroll - Stack Overflow

html css background parallax.js
Rectangle 27 0

It looks like the images are being moved twice - first by the browser scroll, and then by your scroll() handler. Hence the jitter.

You might get a cleaner effect by using position:fixed or background-attachment:fixed for the images - this way they are unaffected by the browser scroll, but will be moved by the scroll() handler. You'll no longer have one effect fighting with the other. You'll have to modify your scroll() handler accordingly.

background-attachment: fixed; I didn't even know that property existed. Thanks!

javascript - Scrolling Vertical Parallax - Stack Overflow

javascript jquery background scroll
Rectangle 27 0

parallax scrolling is fairly simple, no real need for a plugin, though you can easily attach this to $.fn to make it a jQuery plugin:

<img src="foo.jpg" id="parallax1" class="parallax">

<style>
.parallax {
    position : fixed;
    top      : 0px;
    left     : 0px;
}
</style>

<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
   var top = this.scrollTop;
   $('#parallax1').css('top', top * someMultiplier);
});
</script>

javascript - Multi-directional and Multiple image, parallax scrolling ...

javascript jquery scroll jquery-animate parallax
Rectangle 27 0

To do this, you will want to make your parallax scrolling modify your background image's size in addition to it's position. To do this, set the background property of your parallax scrolling element, in Javascript:

[your parallax object].style.background= "color image repeat attachment position size";

Note: the color is a hex code or rgba(, the image is the url, the repeat is whether you want the background to repeat, the attachment is going to be "scroll", the position is going to be the position of your background image, and the size will be "xpx ypx"

This code will go where your scrolling is. It will replace the code that sets your background image's position; this will use the composite property of "background". You will need to set the size as a function of how far your visitors have scrolled down the page.

The exact code will depend upon your library and how you are implementing parallax scrolling.

If you are looking for parallax libraries, I would recommend writing your own parallax function in jQuery. This way you will be able to modify your function to change the background size. There is a comprehensive list of jQuery parallax tutorials here.

Would you say this would take a lot of time and resources (i.e. I have to complete a website in two weeks)?

I don't really think so. The code to create a parallax section of a website is pretty easy. It just takes a few (<25) lines of code. The harder part is getting the timing right. The resources required are relatively low and it can be added relatively quickly.

html - Zooming and Moving Background Image on Scroll JavaScript Librar...

javascript html background-image javascript-library image-zoom
Rectangle 27 0

//put the new values in the css
var newValue = "center bottom," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px";

Basically, not assigning a dynamic scroll offset to the bottom decorative element since you want it to stick to bottom.

If you still want to animate but the bottom element but stick it to the bottom, a simple conditional could do. In this case 457 is the image height. So, if the offset ever gets smaller than page height - image height, stick the image to bottom to avoid having a gap:

if(bgNP1 < $this.outerHeight() - 457)
{
    bgNP1 = $this.outerHeight() - 457;
}

//put the new values in the css
var newValue = "center " + bgNP1 + "px," + "center " + bgNP2 + "px," + "center " + bgNP3 + "px";

What you propose is simply to get rid of a parallax effect for the bottom image. But I don't want it exactly to stick to bottom: I want it to come up to a different pace (for example, slower than scroll) and eventually stop at the bottom.

Sorry if I am slow in understanding, but what is that 3575 value? Anyway I added your modification to my fiddle, here, and it seems that the bottom images just stick to the bottom, there being no parallax effect... I'd like to actually perceive the bottom images coming up slower or faster than scroll...

I tried to apply your input in this new fiddle, maybe this is what you meant. The script seems to work, but there are two problems: 1) I'd like the movement of the two bottom images to be more noticeable and 2) I'd like them to move independently from each other, at slightly different speeds.

sorry, mistake in the link, I meant this fiddle.

javascript - Applying parallax scrolling effect to multiple background...

javascript jquery css background-image parallax
Rectangle 27 0

This is not an answer (yet) but I've noticed that a large number of windows machines come with scroll wheels that "click", line-by-line, down the page.

I'm not sure if this is the issue you are facing but all of those beautiful parallax effects that work really well with expensive mice and those super-smooth Apple trackpads and mice, but then suddenly shudder and look awful on stock windows mice.

javascript - jQuery Parallax Image Not Smooth When Scrolling With Mous...

javascript jquery css scroll parallax
Rectangle 27 0

You could use a gradient background using css :

body {
background-color: linear-gradient(red, blue, green, blue, red)
}

Scrolling down, your background will change. This method is a little bit "cheaty", but it works as it will loop when it arrives at the end of the background.

javascript - Change background color multiple times while scrolling do...

javascript jquery scroll parallax
Rectangle 27 0

Here you go :

You may assign as many colors as you like in your colors variable

var colors = [
     [250, 195, 56], // Gold
     [250, 0, 0],    // Red
     [0, 250, 0],    // Green
     [0, 0, 250],    // Blue
     [179, 217, 112] // Lime
];

var height = $('body').height() - window.innerHeight;

$(document).scroll(function() {
  var steps = Math.floor(height / colors.length);
  var position = $(this).scrollTop();
  var currentStep = Math.floor(position / steps);
  if ( currentStep === colors.length ) currentStep = colors.length - 1;
  var rgb = $("body").css('background-color').replace('rgb(','').replace(')','').replace(/\s/g, '').split(',');     
  var previousColor = colors[currentStep] || colors[0];
  var nextColor = colors[currentStep+1] || colors[colors.length-1];
  var percentFromThisStep = ( position - ( currentStep * steps ) ) / steps;
  if ( percentFromThisStep > 1 ) percentFromThisStep = 1;

  var newRgb = [
     Math.floor(previousColor[0] + ( ( nextColor[0] - previousColor[0] ) * percentFromThisStep )),
     Math.floor(previousColor[1] + ( ( nextColor[1] - previousColor[1] ) * percentFromThisStep )),
     Math.floor(previousColor[2] + ( ( nextColor[2] - previousColor[2] ) * percentFromThisStep ))
  ];

  $("body").css('background-color', 'rgb('+ newRgb.join(',') +')');
});

Thanks for the script but I need to be able to choose when the different colors take place. Like Vucko did earlier. Like at a 1000px from the top turn red, 2000px from the top turn green and so on. Can you incorporate this in your script :)?

Well, you can figure it out by yourself from now on. Play with this code a bit.

Damn ;) But okay :) I'm pretty novice when it comes to scripts, but I will try

I know its a lot to ask but can you fix it for me? I really don't have any clue to be honest. I would appreciate it a lot :)

javascript - Change background color multiple times while scrolling do...

javascript jquery scroll parallax
Rectangle 27 0

This is all wrong, you are setting up an event handler each time you use $(window).scroll(). You only need to do that once. Try this.

var scrolledTop,
    scrolledLeft,
    background_position,
    $custom_bg;


function parallax(){
    scrolledTop = window.scrollY,
    scrolledLeft = window.scrollX,
    background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');

    console.log('background_position', background_position);
    $custom_bg.css('background-position', background_position);
}

$(function() {

    $custom_bg = $('section.intro .custombg');


    $(window).on('scroll', parallax);


});

javascript - Parallax background image for top-bottom and not right-le...

javascript jquery css parallax
Rectangle 27 0

  • Switch the order of the two last script tags (call init after the images have been created)
  • Call s.refresh() after adding the images.

I didn't even reaize that I was initializing Skrollr before the image load! DOH! Dynamic script is working like a charm now! Awesome!

javascript - creating Skrollr elements dynamically, scroll fails - Sta...

javascript parallax skrollr
Rectangle 27 0

You can simply use CSS for background image and adjust background position with the amount you need.

Background X position where -1 can be replaced with the value you want to move it at.

bgx -= 1;

Then for each loop the background position is updated (Y position is fixed in this example):

canvas.style.backgroundPosition = bgx + 'px -30px'; // set X and Y position

When bgx somehow equals the max width of the image you just reset it to the beginning.

javascript - Adding parallax to scrolling background - Stack Overflow

javascript html5-canvas