Уебдизайн и изработка на уебсайтове

Just another

Oxygen Parallax example

With this small code snipped you could make parallax section. All you need is a section wiht background image and small snippet of javascript. Follow the example.

Simple Parallax

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque massa nec tempus ornare. Sed ultrices lobortis tortor. Aenean pharetra tellus sed sem sodales, sit amet egestas massa sodales. Nunc dolor tellus, congue et cursus sed, eleifend nec enim. Praesent consequat libero in rhoncus accumsan.

The steps are:

First set the section height. (800px in the example). Then choose a background image and set the background as Cover / No-repeat / Fixed:
Then place a code block in the section and  put there the following code:

    var $this = jQuery('#section-10-287');
    var scrollTop = jQuery(window).scrollTop();
    var offset = $this.offset().top;
    var height = $this.outerHeight();
    var windowHeight = jQuery(window).height();
    var speed = 0.15;
    var yBgPosition = Math.round((offset - scrollTop ) * speed);

    $this.css('background-position', 'center ' + yBgPosition + 'px');

The final step is to  change section-10-287 with your section ID.
гр. София,
ул. Софроний Врачански 36
0898 455 092
02 831 00 54
Webdesign-123.com, 2020