Parallax widget

[lexoyo]

About parallax

Parallax scrolling and parallax hovering effects look great on a website. With this widget you will add this type of animations to your Silex website.

Setup this widget

Paste this code into the JS editor (see here the help section about the JS editor)

// wait for the HTML to be fully loaded
$(document).ready(function () {    
    // init the mouse parallax effect
    $('.mouse-parallax').mousemove(function (e) {
        mouseUpdate(e);
    });    
    // init the scroll parallax effect
    $(window).scroll(function (e) {
        scrollUpdate();
    });
    scrollUpdate();
});
// mouse parallax effect
function mouseUpdate(e) {
    var container = $('.mouse-parallax');
    $('.mouse-parallax .layer-one').each(function() {
        parallax(e.pageX, e.pageY, this, container, 1);
    });
    $('.mouse-parallax .layer-two').each(function() {
        parallax(e.pageX, e.pageY, this, container, 2);
    });
    $('.mouse-parallax .layer-three').each(function() {
        parallax(e.pageX, e.pageY, this, container, 3);
    });
}
// scroll parallax effect
function scrollUpdate() {
  // just like for the mouse, but with the mouse at the center of the screen
  var centerY = window.scrollY + ($(window).height() / 2);
  var centerX = window.scrollX + ($(window).width() / 2);
  var container = $('.scroll-parallax');
  $('.scroll-parallax .layer-one').each(function() {
      parallax(centerX, centerY, this, container, 1);
  });
  $('.scroll-parallax .layer-two').each(function() {
      parallax(centerX, centerY, this, container, 2);
  });
  $('.scroll-parallax .layer-three').each(function() {
      parallax(centerX, centerY, this, container, 3);
  });
}
// parallax effect
function parallax(pageX, pageY, target, container, layer) {
    var layer_coeff = 10 / layer;
    var offset = {};
    var parentOffset = $(container).offset() || {};
    var initialOffsetX = $(target).attr('data-paralax-initial-offset-x');
    var initialOffsetY = $(target).attr('data-paralax-initial-offset-y');
    if(typeof initialOffsetX === 'undefined') $(target).attr('data-paralax-initial-offset-x', $(target).offset().left - parentOffset.left - ($(container).width() / 2));
    if(typeof initialOffsetY === 'undefined') $(target).attr('data-paralax-initial-offset-y', $(target).offset().top - parentOffset.top - ($(container).height() / 2));
    // compute layer positions relatively to the parent position
    pageX -= parentOffset.left;
    pageY -= parentOffset.top;
    // compute layer X position
    var x = ($(window).width() - $(target).width()) / 2 - (pageX - ($(window).width() / 2)) / layer_coeff;
    offset.left = x;
    // compute layer Y position
    var y = ($(window).height() - $(target).height()) / 2 - (pageY - ($(window).height() / 2)) / layer_coeff;
    offset.top = y;
    // take the offset of the container into account
    if(parentOffset.left) offset.left += parentOffset.left;
    if(parentOffset.top) offset.top += parentOffset.top;
    // take the initial offset into account
    offset.left += parseInt(initialOffsetX);
    offset.top += parseInt(initialOffsetY);
    // apply offset to the layer
    $(target).offset(offset);
}

Scroll parallax effect

Select a section of your website and add the CSS class scroll-parallax to the section's background element.

Then add elements to this section (in its background or in the container in the middle) and add the CSS class layer-one or layer-two or layer-three to each element

You can save and preview your website, then scroll in it to see the elements in each layer move at different speed

Mouse parallax effect

Select a section of your website and add the CSS class mouse-parallax to the section's background element.

Then add elements to this section (in its background or in the container in the middle) and add the CSS class layer-one or layer-two or layer-three to each element

You can save and preview your website, then move your mouse around to see the elements in each layer move at different speed

[kuskus265]

Hello, I am just experimenting with Silex and so far it looks great. It is true DIY, not those shiny websites like WIX that just push you into templates.. It is perfect, blank template and also with download and code editors. But as I was experimenting with those parallax effects it always looks like the container centers itself to top left corner when mouse hovers over the page. Is there anything I can do to edit this behavior? I want to have the effect on center. but i dont seem to figure out how to do it. Thanks in Advance

Okay, it looks like I fixed with editing certain numbers by the offset: (changed divider from 2 to 5)

if(typeof initialOffsetX === 'undefined') $(target).attr('data-paralax-initial-offset-x', $(target).offset().left - parentOffset.left - ($(container).width() / 5)); if(typeof initialOffsetY === 'undefined') $(target).attr('data-paralax-initial-offset-y', $(target).offset().top - parentOffset.top - ($(container).height() / 5));

[lexoyo]

Hello So it works better with 5?

[kuskus265]

It did. Today i opened the page on different computer with different screen size and the layer-one image was again completely offset form its default x and y coordinates. Oh, and also. it doesnt center to top left corner, it looked like it. It just offsets according to the numbers in the javascript.

[lexoyo]

could you put all this online somewhere so that I can see?