Parallax on Background using JS

Vaadin 6 / 7 / 8
1

Hello. I’m trying to add some parallax effect on a div using Javascript and I’ve not succeeded. I’m using Vaadin 8.

Here is my js file that is inside VAADIN folder (parallax.js)

function parallax() {
  var scroll = $('.v-ui').scrollTop();
  var screenHeight = $('.v-ui').height();

  $('.parallax').each(function() {
    var offset = $(this).offset().top;
    var distanceFromBottom = offset - scroll - screenHeight
    
    if (offset > screenHeight && offset) {
      $(this).css('background-position', 'center ' + (( distanceFromBottom  ) * 0.5) +'px');
    } else {
      $(this).css('background-position', 'center ' + (( -scroll ) * 0.5) + 'px');
    }
  })
}

And in Java I’ve got something like this:

@JavaScript({"http://code.jquery.com/jquery-3.2.1.min.js", 
"vaadin://js/parallax.js"})
public class MyClass extends VerticalLayout {

  CustomLayout parallaxLayout = new CustomLayout("<div class='mybg parallax'></div>");
  addComponent(parallaxLayout);

  Page.getCurrent().getJavaScript().execute("$('.v-ui').scroll(function(e) {parallax();});");
}

css style:

.mybg{
  background-image: url('image.jpg');
  background-size: cover;
}

Any help or hints will be appreciated! Thx