レスポンシブデザインや顧客のウィンドウ幅に頭を悩ませず
ただひたすら デザインカンプ に忠実に
HTMLコーディングすることへ集中するためのJSライブラリです
ヘッドタグ末尾にスクリプトタグを挿入し、初期化関数を呼び出します。
<head>
・
・
・
<script src="/path/to/liquidly.js"></script>
<script>
liquidly.init({
"pcCompSize": "1920",
"spCompSize": "750",
"breakPoint": "768"
})
</script>
</head>
初期化関数liquidly.initへ渡すオプションは以下を用意しています
| プロパティ名 | 初期値 | 説明 |
|---|---|---|
| body | ".lq__body" | ウィンドウ幅に応じて可変する要素 |
| elementFixed | ".lq__element--fixed" | 疑似fixed要素 |
| pcCompSize | 1920 | PCカンプの幅(px) |
| spCompSize | 750 | SPカンプの幅(px) |
| breakPoint | 768 | PCカンプ⇔SPカンプ が切り替わるウィンドウ幅 (px) |
| fadeinDuration | 200 | htmlのopacity0から１への推移時間(ミリ秒) |
| resizeTimeout | 300 | リサイズイベントの発動スパン（ミリ秒）※1 |
| scrollEndTimeout | 200 | スクロール終了イベントの発動スパン（ミリ秒）※2 |
| delay | 0 | 初期化関数の遅延実行（ミリ秒） |
※1 スクリプティング負荷を押さえるためリサイズイベントを間引きしている
※2 .lq__element--fixed要素は、iPad Safariの慣性スクロールには追従できないため、iPad Safariの時のみ、スクロール開始でopacity:0;pointer-events:none; 終了イベントでopacity:1;pointer-events:auto; としている
.lq__bodyはHTMLソース内のただ１つの要素に適用できます。通常、bodyタグ直下のラッパーに指定することを推奨します。 <body>
<div class="lq__body">
・
・
・
</div>
</body>
.lq__bodyのリサイズにはCSS transformプロパティを使用しています。.lq__body内ではposition:fixedやstickyが無効になります。.lq__body の外側に置いてください。 <body>
<div class="lq__body">
・
・
・
</div>
<div class="preloader" style="position:fixed;">
</body>
あるいは、header等の追従要素もリサイズ可能にしたい場合は、疑似的なposition:fixed効果を提供するクラス.lq__element--fixedを用意しています。
<body>
<div class="lq__body">
<header class="lq__element--fixed"></header>
・
・
</div>
</body>
opacity:0を指定しておくことを推奨します。html{
opacity: 0;
filter: alpha(opacity=0);
}
FAQs
No description
The npm package liquidly receives a total of 1 weekly downloads. As such, liquidly popularity was classified as not popular.
We found that liquidly demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.