목요일, 11월 21, 2024
최근:
HTML & CSS

Easy custom Page Transition effect with Barba and GSAP

Meeny

Easy custom Page Transition effect with Barba and GSAP

JS

main.js

var WWidth = window.innerWidth;
var WHeight = window.innerHeight;

window.addEventListener('resize', function(){
    WWidth = window.innerWidth;
    WHeight = window.innerHeight;
},true)



function Mpagein(){
    gsap.to('#MWinL',{width: WWidth/2-12, duration:.5, ease:"power2.out"})
    gsap.to('#MWinR',{width: WWidth/2, duration:.5, ease:"power2.out"})
    gsap.to('#Mlogo',{top: WHeight/2, duration:.5, ease:"power2.out", delay: .5})
}

function Mpageout(){
    gsap.to('#MWinL',{width: 0, duration:.5, ease:"power2.out", delay: 1.2})
    gsap.to('#MWinR',{width: 0, duration:.5, ease:"power2.out", delay: 1.2})
    gsap.to('#Mlogo',{top: -100, duration:.5, ease:"power2.out", delay: 1})
    gsap.from('li.nav-item',{translateY: -50, duration:.5, ease:"power2.out", delay: 1.4, opacity:0, stagger:.1})
}


function Mdelay(num) {
    return new Promise(function(resolve){
        setTimeout(resolve,num)
    })
}


barba.init({
    transitions: [{
      name: 'Mtransition',
      async leave(data) {
        Mpagein();
        await Mdelay(500);

      },

      enter(data) {
        Mpageout();
      },

      async once(data) {
        Mpagein();
        await Mdelay(500);
        Mpageout();
      }

    }]
  });

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    
</head>
<body data-barba="wrapper">
<div>
  <div id="Mlogo">
    <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
  </div>
  <div class="bg-primary" id="MWinL"></div>
  <div class="bg-secondary" id="MWinR"></div>
</div>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page1.html">Page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page2.html">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>




<div class="contents overflow-hidden bg-success" data-barba="container" data-barba-namespace="Home">
  <h3 class="fw-bolder text-center pt-5 text-light">HOME</h3>
  <div class="container d-flex justify-content-center align-items-center h-100">

    <div class="section">
      <div class="row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect">
          <div class="p-1">
            <div class="card Mscale overflow-hidden Ranimate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/1.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
      </div>

    </div>

  </div>

</div>


    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="main.js"></script>

</body>
</html>

page1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    
</head>
<body data-barba="wrapper">
<div>
  <div id="Mlogo">
    <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
  </div>
  <div class="bg-primary" id="MWinL"></div>
  <div class="bg-secondary" id="MWinR"></div>
</div>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page1.html">Page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page2.html">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>




<div class="contents overflow-hidden bg-success" data-barba="container" data-barba-namespace="Home">
  <h3 class="fw-bolder text-center pt-5 text-light">Page 1</h3>
  <div class="container d-flex justify-content-center align-items-center h-100">

    <div class="section">
      <div class="row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect">
          <div class="p-1">
            <div class="card Mscale overflow-hidden Ranimate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/2.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
      </div>

    </div>

  </div>

</div>


    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="main.js"></script>

</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    
</head>
<body data-barba="wrapper">
<div>
  <div id="Mlogo">
    <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
  </div>
  <div class="bg-primary" id="MWinL"></div>
  <div class="bg-secondary" id="MWinR"></div>
</div>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="images/symbol.svg" alt="" width="24"><span class="fw-bold">Meeny</span>.com
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page1.html">Page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="page2.html">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>




<div class="contents overflow-hidden bg-success" data-barba="container" data-barba-namespace="Home">
  <h3 class="fw-bolder text-center pt-5 text-light">Page 2</h3>
  <div class="container d-flex justify-content-center align-items-center h-100">

    <div class="section">
      <div class="row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect">
          <div class="p-1">
            <div class="card Mscale overflow-hidden Ranimate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/3.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
      </div>

    </div>

  </div>

</div>


    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="main.js"></script>

</body>
</html>

SCSS

main.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
//$font-family-base: 'Montserrat',sans-serif;
$font-family-base: 'roboto',sans-serif;

// Pantone Color of the Year 2021

$primary: #F5DF4D;
$secondary: #939597;
//$success: #bdbdbd;
//$info:          #c5c5c5;
// $warning:       $yellow;
// $danger:        $red;
// $light:         $gray-100;
// $dark:          $gray-900;






$btn-focus-width:             0;
// $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;

$card-border-width:                 0;

@import "./node_modules/bootstrap/scss/bootstrap";

#MWinL{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1300;    
}

#MWinR{
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1300;        
}

#Mlogo{
    position: fixed;
    top:-100px;
    width: 140px;
    z-index: 1301;
    left: 50vw;
    transform: translateX(-65px);
}

#Mcursor {
    position: absolute;
    z-index: 999;
    width: 8em;
    height: 8em;
    border-radius: 50%;
    background: white;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: .1s;
}

$rainbow : linear-gradient(
    #ff0000 0,
    #ff5100 14%,
    #fbff00 28%,
    #1eff00 42%,
    #006eff 56%,
    #1100ff 70%,
    #9900ff 84%,
    #ff0000 100%
);

$RBorder_Size : 4px;
.contents{
    height: 100vh;

    .section{
        .card{
            border-radius: $RBorder_Size ;
            padding: 20px;

            &::before{
                content: '';
                position: absolute;
                z-index: -2;
                left: -50%;
                top: -50%;
                width: 200%;
                height:200%;
                background: $rainbow;
                background-size: 50% 50%;
            }

            &::after{
                content: '';
                position: absolute;
                z-index: -1;
                left : $RBorder_Size;
                top : $RBorder_Size;
                width: calc(100% - #{$RBorder_Size}*2); 
                height: calc(100% - #{$RBorder_Size}*2); 
                background-color: white;
                border-radius: $RBorder_Size;
            }
        }
    }

}


.Mreflect{
    -webkit-box-reflect: below -4px linear-gradient(transparent 70%, rgba(255,255,255,0.4));
}

.Mscale{
    transition: .5s cubic-bezier(0.7, -0.7, 0.2, 1.8);
    &:hover {
        transform: scale(1.2);
        z-index: 300;
        cursor: pointer;
    }
}

.Ranimate{
    &::before {
        transform: rotate(-45deg) scale(1.5);
        animation: animate 6s linear infinite;
    }
}

@keyframes animate {
    from{
        background-position: 0;
    }
    to {
        background-position: 0 1000px;
    }
}

.Rrotate{
    &::before{
        animation: rotate 4s linear infinite;
    }
}

@keyframes rotate {
    100%{
        transform: rotate(360deg);
    }
}
Bootstrap5 theming

답글 남기기

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