JS .애니메이션()

20725 단어 htmljavascriptcss 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://w-web.de/myquery/myquery-min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <style>
    header{
      position:relative;
      display:flex;   
      height:150px;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-content: center;
      align-items: center;
        overflow:hidden;
    }
    header p{
      font-size:1.75em;
      font-weight:bold;
      font-family: "Arial Black";
      color:white;
      text-align:center;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
      margin:0;
      padding:0;

    }
    .bg-color{
      position:absolute;
      background: linear-gradient(to right, #4A00E0, #8E2DE2); 
      height:150px;
      width: 100%;
      z-index:-2;
    }
  </style>
</head>
<body>
  <main class=container>
  <header>
      <p>Animated Backgound<br>JS.animate()
      <div class="bg-color"></div>
  </header>
  <h1>Lorem ipsum.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste alias modi voluptatem voluptatibus ab, inventore tenetur iure veniam incidunt neque.</p>
  </main>
  <script>
  "use strict";
  function randomAni ( mySel, count=50 ) {  
    const myAni = function ( evt, el ){
      const getNewBallPosition = function ( el ) {
        let {top,left,width,height} = el.getBoundingClientRect()
        let pCoord = $(el).parent().n.getBoundingClientRect()
        let newTop = Math.random()*(pCoord.height-height)
        let newLeft = Math.random()*(pCoord.width-width)
        left = left-pCoord.left
        top = top-pCoord.top
        let hyp = Math.hypot((newLeft-left), (newTop-top))
        return{left, top, newLeft, newTop, hyp}
      }
      //is first call?
      let aktEl = el ? el : this.effect.target
      var {left,top,newLeft,newTop,hyp} = getNewBallPosition(aktEl)
      //new Elements....
      if (el){
        let pCoord = $(el).parent().n.getBoundingClientRect()
        let {width, height} = el.getBoundingClientRect()
        left=Math.random()*(pCoord.width-width)
        top=Math.random()*(pCoord.height-height)
        hyp = Math.hypot((newLeft-left), (newTop-top))
      }
      let myKeyframes = [
        { transform: `translate3d(${left}px,${top}px,0)` },
        { transform: `translate3d(${newLeft}px, ${newTop}px,0)` }
      ]
      let myOptions = {
        direction: "normal",
        fill: "both",
        iterations: 1
      }
      myOptions.duration=hyp*aktEl.dataset.speed
      let myAnimation = aktEl.animate(myKeyframes, myOptions)
      myAnimation.addEventListener('finish', myAni, { once: true })
    }
    for (let i=1; i<=count; i++){
      let width = (Math.random() * 30) + 5;
      myAni(null, 
        $(
        $(mySel)
        .append('div')
        .setData('speed', (Math.random() * 80) + 20)
        .addClass('myAni')
        .mStyles()
          .position('absolute')
          .borderRadius(`${(Math.random() * 50) + 1}%`)
          .zIndex('-1')  
          .top('0px')
          .left('0px')
          .width(`${width}px`)
          .height(`${width}px`)
          .border(`1px solid ${['white', '#eee','#ddd','#ccc', '#bbb'][Math.floor(Math.random()*5)]}`)
          .opacity('.5')
        .parent()
      ).n)
    }
  }
  randomAni('header')
  </script>
</body>
</html>




my-query의 문서화된 소스 코드

gzip으로 압축된 myquery-min.js 버전은 3K 미만이 필요합니다.
JavaScript의 범위와 Lexical 환경의 작동 방식
Rails6 toastr 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage