シングルページアプリケーションは、自分では、かなり簡単です.しかし、modals、carousel、複数ページなどで何か複雑なものを作ることは、するのに苦しいことです.
たとえば、ポートフォリオのウェブサイトと小さなセクションについては、小さなプロジェクトのセクションがあります.つのページに詰め込まれたものは面倒なように見えるので、それらを異なるページ、またはatleastにしたいのです.これはJavaScriptとCSSの痛みを必要とします
私の友人(ADI)の1つはこれを経験して、不和の上で私に電話をしました.私たちは、両方のプロセス全体をより簡単にするために解決策を働いた- Loadless.js

LoadLessを使用すると、複数のページのアプリケーションを作成することができますが、1つだけのHTMLファイルです.それは構文が非常に使いやすいJavascriptの知識が必要です(カスタマイズのためにも).
サイズの心配?いけない!ライブラリファイルは157

また、ページの変更にカスタムアニメーションを行うには機能があり、我々はまた、animate-left、animate-right、fadein、fadeoutと多くのように多くのアニメーションを作ってきた!

でも、どうやって使うの？

これを使うのは簡単です.

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"であることを示すトリガーを与えることでページを作成できます.これは他のすべての姉妹divs(ページと親の下で)が消えるでしょう.
(注意:アニメーションを使用するには、オプションの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に与えました.
これの可能性は無限大です-これは初心者のWeb開発者のために多くのことが容易になります.ADIが彼のポートフォリオでLoadlessを使用する例は、ここにあります:
https://cdn.jsdelivr.net/gh/loadless/loadless@main/dist/animations.css
任意のヘルプについては、当社の不和サーバーに参加:https://cdn.discordapp.com/attachments/956570293164462091/957197579903442954/Untitled_15.mp4
我々はより多くのアニメーション、ドキュメント、ウェブサイトや大いに取り組んでいます.サポートします⭐-Githubのプロジェクトをing!

https://discord.gg/DshUYxbWWX / 無負荷

ポップアップ、モーダル、ページ遷移を作成して、JavaScriptまたはCSSを書くことなく、ブラウザを再読み込みしないページをつくってください！

loadless

無負荷

LoadLessは、ページを再読み込みすることなく反応性のsinglepageアプリケーションを作ることができるJavasptライブラリです

👀 なぜロードレス？

JavaScriptコードを書かずに、ページを読み込めないページを作成します.

モデルと通常、DOM操作を必要とするポップアップは、すぐにHTMLで正しく作成されることができます.

CSSを書くことなくページを読み込むためにトランジションとアニメーションを使用します.

Loadlessあなたのニーズを満たすためにカスタマイズすることができます.

簡単なセットアップ:ちょうど2つのCDNのリンク(1つのオプションのCSSアニメーションファイル)を追加する必要があります.

🛠 セットアップ

このスクリプトタグをHTMLのヘッダに追加します
<高橋潤子>https://cdn.jsdelivr.net/gh/loadless/loadlessメイン/ディスト/ロードレス.Min . js "defer > <スクリプト>
Loadlessを最大限に活用したいなら、このCSS cdnをリンクしてください.それはオプションです、そして、図書館はそれなしでさえ働きます
スタイルシート"href ="https://cdn.jsdelivr.net/gh/loadless/loadlessメイン/dist/アニメーション.CSS "

用途

…

同じフィードバックは非常に有り難いです!
💖 閉じるこの動画はお気に入りから削除されています.私に従ってください、そして、あなたが本当にこのブログが好きならば、そして、dev . to(350のフォロワー可能な)でここで私について来てください!