Landing Page Parallax 2


Tutorial membuat landing page dengan efek Parallax, mouse scroliing

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Landing Page with Parallax</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/main.js"></script>

</head>

<body>
    <div id="box">
        <div id="box">
            <div class="header">
                <img src="img/team.png" id="team">
                <img src="img/rumput.png" id="rumput">
                <img src="img/cell.png" id="cellheader">
            </div>
        </div>
    </div>

    <div id="box">
        <div id="moving">
            <h1>MAGIC BALL</h1>
            <div class="frame">
                <p>Dragon Ball is one of the most popular manga series of all time, and it continues to enjoy high readership
                    today. By 2000, more than 126 million copies of its tank?bon volumes had been sold in Japan alone. By
                    2016, this number had grown to pass 156 million in Japan and 240 million worldwide, making it the second
                    best-selling Weekly Sh?nen Jump manga of all time. Dragon Ball is credited as one of the main reasons
                    for the period when manga circulation was at its highest in the mid-1980s and mid-1990s. For the 10th
                    anniversary of the Japan Media Arts Festival in 2006, Japanese fans voted Dragon Ball the third greatest
                    manga of all time.</p>
            </div>
            <img src="img/ball3.png" class="bola" id="bola3">            
            <img src="img/ball2.png" class="bola" id="bola2">
            <img src="img/ball1.png" class="bola" id="bola1">

        </div>
    </div>
</body>

</html>

 

style.css

body{
    height: 3000px;
}

.header{
    width: 100%;
    height: 100vh;
    background-image: url(../img/kuil.png);
    background-size: cover;
    overflow: hidden;
}

#team, #rumput{
    width: 100%;
    height: 100vh;
    position: absolute;
}

#cellheader{
    width: 105%;
    height: 100vh;
    position: relative;
}

#box{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* BAGIAN KE 2 */

#moving{
    width: 100%;
    height: 100vh;
    background-image: url(../img/bg2.jpg);
    background-size: cover;
    background-attachment: fixed;
}

#moving > h1{
    display: block;
    position: relative;
    color:white;
    text-shadow: 2px 2px 5px #000000;
    top:100px;
}

#moving > .frame{
    width: 300px;
    height: 400px;
    position: relative;
    padding: 20px;
    opacity: 0.5;
    overflow: hidden;
    background: white;
    top:120px;
    text-align:justify;
}

#moving > .frame >p{
    position: relative;
    color: #3f3f3f;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
}

.bola{
    position: absolute;
    left: 400px;
}

 

 

main.js

$(document).mousemove(function (e) {
  $('#cellheader').css({
    'left': -e.pageX / 20,
    'top': -e.pageY / 20 + 70
  })
  $('#rumput').css({
    'left': -e.pageX / 50 + 20,
    'top': -e.pageY / 50 + 20
  })
  $('#team').css({
    'left': -e.pageX / 100,
    'top': -e.pageY / 100 + 20
  })
})

var nilai = 0
var arah = ''

$(window).scroll(function () {
  var nScroll = $(this).scrollTop()

  // CEK UP / DOWN
  if (nilai < nScroll) {
    nilai = nScroll
    arah = 'down'
  }else if (nilai > nScroll) {
    nilai = nScroll
    arah = 'up'
  }


  if (nScroll > $('#moving').offset().top - 500) {
    $('#moving h1').css({
      'left': nScroll / 4
    })

    if (arah == 'down') {
      if ($('.frame').offset().left > 180) {
        $('.frame').css({
          'left': 180
        })
      }else {
        $('.frame').css({
          'left': nScroll / 3.5
        })
      }
    }else if(nScroll/3.5 < 180){
        $('.frame').css({
            'left': nScroll / 3.5
          })
    }

    $('#bola1').css({
        'top': nScroll/2 -100,
        'left':500
    })
    $('#bola2').css({
        'top': nScroll/3 - 100,
         'left': 600
    })
    $('#bola3').css({
        'top': nScroll/4 - 100,
         
    })


  }
})

 

Download Gambar Bahan Tutorial

Download Project Parallax 2