Parallax horizontal scrolling ep02

Parallax horizontal scrolling ep02 – Bootstrap

HTML

<!-- Parallax Scroll effect ep02 -->
<div class="section_parallax bg-primary p-5">
  <div class="container text-center">
    <h3 class="display-3 w100 text-light"><span class="w500">Parallax Scroll</span> effect ep02</h3>
    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <img src="images/scroll1.png" alt="" id="scroll1" class="Mscroll" Mspeed="0.5" MYoffset="2400">
    <img src="images/scroll2.png" alt="" id="scroll2" class="Mscroll" Mspeed="-0.1" MYoffset="2200">
    <img src="images/scroll3.png" alt="" id="scroll3" class="Mscroll" Mspeed="0.1" MYoffset="2000">
  </div>

</div>

JS

window.addEventListener('scroll' , function () {


    // Parallax Scroll effect ep01
    const mount1 = document.querySelector('#scroll1')
    const mount2 = document.querySelector('#scroll2')
    const mount3 = document.querySelector('#scroll3')

    //console.log(pageYOffset);

    var scrolStart = 1700;
    if(window.pageYOffset>scrolStart){
        var scrolled = window.pageYOffset-scrolStart;
        var Mloca1 = scrolled *.3;
        var Mloca2 = -(scrolled *.2);
        var Mloca3 = -(scrolled *.9);
    }

    mount1.style.transform = 'translateX('+Mloca1+'px)';
    mount2.style.transform = 'translateX('+Mloca2+'px)';
    mount3.style.transform = 'translateX('+Mloca3+'px)';
    // Parallax Scroll effect ep01



    // Parallax Scroll effect ep02
    var Mscroll = document.querySelectorAll('.Mscroll');
    Mscroll.forEach(function(Meach){
        const Mspeed = Meach.getAttribute('Mspeed');
        const MYoffset = Meach.getAttribute('MYoffset');
        if(window.pageYOffset>MYoffset){
            var speed = window.pageYOffset-MYoffset;
            speed = speed * Mspeed;
            Meach.style.transform = 'translateX('+speed+'px)';
        }
    })






})

SCSS

.section_parallax{
    overflow: hidden;

    background: rgb(0,36,68);
    background: linear-gradient(0deg, rgba(0,36,68,1) 0%, rgba(15,76,129,1) 46%, rgba(33,126,208,1) 49%, rgba(15,76,129,1) 100%);

    .container{
        min-height: 700px;
        position: relative;

        #scroll1{
            height: 400px;
            position: absolute;
            right: -50px;
            margin-top: 100px;
            z-index: 12;

        }
        #scroll2{
            height: 100px;
            position: absolute;
            left: 0;
            top: 150px;
            margin-top: 180px;
            z-index: 11;
        }
        #scroll3{
            height: 50px;
            position: absolute;
            left: 250px;
            top: 150px;
            margin-top: 190px;
            z-index: 10;
        }        
    }
}

Bootstrap4 theming ep01

Bootstrap4 theming ep02