CSS와 타자기가 있는 간단한 터미널 사이트js

16234 단어 tutorialjavascriptbeginners
최근에 제리미 바그너(Jeremy Wagner)의 오래된 사이트처럼 명령을 실행해서 그의 사이트의 다른 링크와 위치를 열 수 있는 터미널 사이트를 만드는 방법을 찾고 있다.
이것은 정말 멋있고 재미있다. 웹 사이트를 조회하는 데 사용되는 명령줄 인터페이스 1 이다.잘 됐다!
나는 비슷한 일을 하려고 했지만, 어떻게 하는지에 관한 문장이나 교과서를 찾지 못했다.

해커 정오


나는 터미널 로그인 페이지를 어떻게 만드는지에 관한 interesting article를 찾았다.이것은 내가 줄곧 찾고 있는 것이지만, 여전히 약간의 결함이 있다.
  • 사이트의 사용자 인터페이스는 괜찮지만 여전히 내가 원하는 것은 아니다
  • 저는 GitHub의 코드를 깊이 연구했고 텍스트 파일에서 파이프를 사용하여 타자기의 효과를 실현하는 것은 제가 참기 싫은 해커 행위라고 생각했습니다
    • 나는 타자나 사이트 소개 같은 재미있는 것들을 휴대할 수 있다.

    깃허브 다이빙


    나는 우연히 이 사이트0x44를 발견했는데, 바로 내가 나의 로그인 페이지가 이렇게 보이기를 바란다는 것을 알았다.
    나는 사이트2를 볼 때 CSS를 복제하고 내 내용을 추가한 후에 일을 시작했다.

    HTML


    그것은 단지 간단한 오래된 HTML일 뿐이다.머리글 및 탐색, 바닥글은 다음과 같습니다.
    <header>
    <nav>
      <a href="/" class="underline">/about</a>
      <a href="your email here" class="underline">/contact</a>
    </nav>
  </header>
  <div class="site-title">
    <h1>
      <a href="/">twhite96:$</a><span class="cursor">█</span>
    </h1>
  </div>
  <div id="app" class="container">

  </div>
  <footer>

    <a href="https://github.com/twhite96/" class="svglink">
      //GitHub svg here
    </a>
    <br><br>
    © Copyright 2019 - twhite96.

  </footer>
</body>
</html>
    핵심 링크에 밑줄을 그을 nav가 있습니다.그리고 우리는 터미널 헤드의 주요 부분류site-title를 주고 여기서 우리는 80년대의 터미널 진동을 줄 것이다.온라인 검색을 통해 블록 커서를 찾을 수 있습니다.
    두 번째div는 멋진 일이 일어난 곳이다.
    분명히 내가 사용한 것은 typerwriterjs라는 타자기 효과 라이브러리였다.콘솔에 필요한 모든 내용을 입력하기 위해서는 빈 div 이 필요합니다. 필요한 내용을 입력할 수 있는 충분한 공간이 필요합니다.우리는 id의app로 실현할 수 있다.그리고 내용을 집중하기 위해 클래스container를 추가했고 div에 내용을 추가한 후에 응답을 했습니다.그럼 바닥글은 GitHub 로고의svg와 판권입니다.

    CSS


    이것은 은 플린그가 그의 사이트로 창조한 외관이다.주요 작품은 다음과 같다.
    a {
  color: rgb(0, 170, 0);
  text-decoration: none;
}

.underline:hover {
  color: rgb(0, 170, 0);
}

.underline {
  position: relative;
}

.underline::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgb(0, 170, 0);
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.underline:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.cursor {
  animation: cursor 2s infinite;
  color: rgb(0, 170, 0);
  display: inline-block;
  width: 10px;
  margin-left: 5px;
  border-radius: 1px;
}

.centered {
  margin: 0px auto 40px;
  display: block;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.container {
  display: flex;
  align-content: center;
}
    우리는 링크를 녹색으로 바꾸고 싶다.우리는 또한 몸에 검은색 배경을 주고 CSS 변환과 변환을 사용해서 네비게이션에서 링크를 멈추면 ease-in-out 효과를 얻을 수 있기를 희망한다.
    transform-origin 속성을 사용하면 전환이 어디에서 시작되고 끝날지 지정할 수 있습니다. 이 예는 내비게이션에서 링크의 오른쪽 아래쪽입니다.
    우리는 커서animation의 속성과 키프레임을 좋아해서 깜빡일 때 담백하고 담백한 외관을 보여 줍니다.
    마지막으로 링크를 표시하는 텍스트 용기를 flex 로 설정하면 필요에 따라 수축하고 확장할 수 있으며, 이 용기에서 링크를 정렬할 수 있습니다 center.
    내가 겪은 문제는 내용이 어디에서 시작되든지 간에 페이지의 밑바닥과 밑바닥을 평평하게 유지해야 한다는 것이다.
    바닥글에 다음을 추가했습니다.
    footer {
  text-align: center;
  position: fixed;
  bottom: 0;
}
    fixed 속성을 사용하여 바닥글을 바닥에 고정시키고 바닥글의 길이를 bottom로 설정합니다.

    JavaScript


    좋아, 이건 사실 그렇게 어렵지 않아.이 문서들만 따르면 상대적으로 빠르게 뭔가를 시작하고 실행할 수 있다.
    끝 텍스트 태그 위에 있는 영역에 unpkg 링크를 삽입하고 입력 효과를 초기화하려는 파일:
    <body>
  // Some code
  <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
  <script src="app.js"></script>
</body>
    0 객체를 다음과 같이 초기화합니다.
    var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: false,
  delay: 75,
  autoStart: true,
  cursor: '█',
  strings: ['My name is Tiffany, and I am a frontend dev and wannabe hacker.']
});
    Dell은 원하는 DOM 노드Typewriter와 dividapp를 대상으로 합니다.그리고 우리는 새로운 Typewriter 대상을 만들고 전송 app 변수를 만들고 Typewriter 대상에 속성을 추가합니다.
  • 순환: 타자가 끝난 후에 다시 시작하시겠습니까Boolean
  • 입력 지연 시간: Number, 입력ms
  • 사용자가 사이트를 처음 로드할 때 시작할지 여부: Boolean
  • 원하는 커서 형식, 기본값pipe: String
  • 및 사용자가 처음 액세스할 때 입력할 초기 문자열: Array 문자열
    • 이것은 매우 간단하다.
    타자를 시작하려면 다음과 같이 하십시오.
    typewriter
  .deleteAll(1)
  .pauseFor(50)
  .deleteAll(1)
  .typeString('I work for <strong>[REDACTED]</strong> as a frontend dev, and I code, write, and shoot and edit videos on weekends.')
  .pauseFor(300)
  .deleteAll(1)
  .typeString('Find me online: <br />')
  .pauseFor(300)
  .typeString('<a href="https://tiffanywhite.dev">Blog</a> <br />')
  .typeString('<a href="https://www.tiffanyrwhite.com">Portfolio</a> <br />')
    우리는 deleteAll 방법을 사용하여 모든 초기 문자열을 삭제합니다. 이 방법은 ms에서 숫자를 뽑아서 애니메이션을 삭제하는 데 얼마나 오래 지속되어야 하는지를 나타냅니다.그리고 우리는 pauseFor 방법으로 ms에서 지정한 시간을 정지할 수 있다.typeString 방법은 우리가 원하는 내용을 입력할 수 있도록 합니다.각 메서드에는 HTML을 포함하는 문자열이 있습니다.이것은 내가 하고 싶은 일을 하기 위해서, 내가 동업자에 표시하고 싶은 링크 목록을 만들기 위해 몇 가지 typeString 방법을 만들어야 한다는 것을 의미한다.이것은 불행한 제한이지만, 당신과 도서관에서 얻은 모든 것은 거래 파괴자가 아니다.
    도서관에 딸린 all the methods 을 보고, 네가 그것을 써서 무엇을 할 수 있는지 봐라.

    마무리


    마지막으로 당신은 나의 사이트pard0x3를 얻었습니다.
    이것은 간단한 물건으로 보기에 매우 멋있고 세우기 쉽다.
    그의 사이트에 더 이상 명령행 인터페이스가 없으니 정말 너무 유감스럽다.그것은 정말 창의적이다. 순수한 HTML, CSS, 자바스크립트로 만들어졌다.  ↩
    개발자 Ian S.Pringle은 소스 코드를 충분히 평가합니다.걱정 마.  ↩
    나는 par@d0x 를 원하지만, 너는 네가 지역에서 이렇게 할 수 없다는 것을 알고 있다. 나는 잊어버렸다.  ↩
    iOS 다중 스레드 배제 잠금 장치
    S3 Select를 살짝 건드렸어요.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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