HTML & CSS

Parallax horizontal scrolling ep01 – Bootstrap

Parallax horizontal scrolling ep01 – Bootstrap

HTML


<!-- Parallax Scroll effect ep01 -->
<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 ep01</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">
    <img src="images/scroll2.png" alt="" id="scroll2">
    <img src="images/scroll3.png" alt="" id="scroll3">
  </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







})

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;
        }        
    }
}

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다