단일 페이지 애플리케이션은 그 자체로 매우 쉽게 만들 수 있습니다. 그러나 모달, 캐러셀, 여러 페이지 등으로 무언가를 복잡하게 만드는 것은 힘든 일입니다.
예를 들어 포트폴리오 웹사이트와 작은 정보 섹션, 작은 프로젝트 섹션이 있는 경우입니다. 한 페이지에 꽉 찬 모든 것이 지저분해 보이기 때문에 다른 페이지로 만들거나 최소한 모달로 만들고 싶습니다. 이것은 대부분의 초보자가 겪고 싶지 않은 자바 스크립트 및 CSS 고통이 필요합니다.

내 친구(ADI) 중 한 명이 이 문제를 경험했고, 저에게 전화를 걸어 문제를 설명했습니다. 우리 둘 다 전체 프로세스를 훨씬 더 간단하게 만드는 솔루션을 찾았습니다. loadless.js


Loadless를 사용하면 다중 페이지 응용 프로그램을 만들 수 있지만 HTML 파일은 하나만 있습니다. 구문은 사용하기 매우 쉽고 javascript 지식이 필요하지 않습니다(사용자 지정의 경우에도).

사이즈 고민? 하지 않다! 라이브러리 파일은 157B에 불과합니다.


또한 페이지 변경 시 사용자 정의 애니메이션을 수행하는 기능이 있으며 animate-left , animate-right , 페이드인, 페이드아웃 등과 같은 많은 애니메이션을 만들었습니다.

알겠습니다. 하지만 어떻게 사용합니까?

그것을 사용하는 것은 매우 쉽습니다:

CDN 링크 사용

이 스크립트를 HTML 파일의 헤더에 붙여넣으세요.

<script src="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/loadless.min.js" defer></script>

페이지 만들기

페이지에 data-page="page_id"를 지정하여 페이지를 생성할 수 있으며 해당 페이지를 표시하는 트리거는 data-loadless-btn="page_id"가 됩니다. 이렇게 하면 다른 모든 자매 div(페이지이고 부모 아래에 있음)가 사라집니다.

(참고: 애니메이션을 사용하려면 여기에서 선택적 CSS 파일도 가져와야 합니다: https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css )

다음은 예입니다.

    <a data-loadless-btn="1" href="#hello">Click here to say Hello</a> <br>
    <a data-loadless-btn="two" href="#world">Click here to say world</a>

    <div data-loadless-parent>
        <div id="hello" data-page="1" data-animate="left">
            Hello
        </div>
        <div id="world" data-page="two" data-animate="fadein">
            World
        </div>
        <div>
            another div 
        </div>
    </div>

여기에서는 페이지가 "링크 가능"하도록 href를 지정했습니다.

이에 대한 가능성은 무궁무진합니다. 이것은 초보자 웹 개발자가 많은 일을 더 쉽게 할 수 있도록 해줍니다. 다음은 ADI가 자신의 포트폴리오에서 무부하를 사용한 예입니다.
https://cdn.discordapp.com/attachments/956570293164462091/957197579903442954/Untitled_15.mp4

도움이 필요하시면 디스코드 서버에 가입하세요: https://discord.gg/DshUYxbWWX

우리는 더 많은 애니메이션, 문서, 웹 사이트 등을 작업하고 있습니다. GitHub에서 프로젝트를 ⭐-ing하여 우리를 지원하세요!!

무부하 / 무부하

자바스크립트나 CSS를 작성하지 않고도 팝업, 모달, 페이지 전환을 만들고 브라우저를 다시 로드하지 않는 페이지를 만드세요!

무부하

Loadless는 페이지를 다시 로드하지 않고 반응형 SinglePage 애플리케이션을 만들 수 있는 javascipt 라이브러리입니다.

👀 왜 무부하?

javascript 코드를 작성하지 않고 페이지를 로드하거나 새로 고치지 않는 페이지를 만듭니다.

일반적으로 DOM 조작이 필요한 모달 및 팝업을 이제 HTML에서 바로 매우 쉽게 만들 수 있습니다.

전환 및 애니메이션을 사용하여 CSS를 작성하지 않고 페이지를 로드합니다.

Loadless는 필요에 맞게 사용자 정의할 수 있습니다.

손쉬운 설정: 2개의 CDN 링크(선택 사항인 CSS 애니메이션 파일 1개)를 추가하기만 하면 됩니다.

🛠 설정

HTML 헤더에 이 스크립트 태그를 추가하십시오defer.

<script src="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/loadless.min.js" defer></script>

무부하를 최대한 활용하려면 이 CSS cdn을 연결하세요. 선택 사항이며 라이브러리가 없어도 작동합니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css">

용법

…

View on GitHub


동일한 피드백을 주시면 감사하겠습니다!

💖 이 블로그가 마음에 드셨다면 이 블로그를 저장하고 나중에 사용하고 싶으시면 이 블로그를 저장하세요.