mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-05 05:37:29 +02:00
Code Issues Releases Wiki Activity

Add Intersection Observer Examples

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-04-26 20:48:15 +07:00
parent be9664a915
commit 2bb8c55e26
4 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -76,6 +76,7 @@ _Products_
* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
* [Intersection Observer Examples - Practical, real world examples of Intersection Observer](https://intersectionobserver.io)
* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
_Resources_

6
client/constants/ProductList.ts
View File

@@ -6,6 +6,12 @@
import ProductModel from './ProductModel';
const ProductList: ProductModel[] = [
{
name: 'Intersection Observer Examples',
url: 'https://intersectionobserver.io',
description: 'Practical, real world examples of Intersection Observer',
themeColor: '#024ca9',
},
{
name: 'Blur Page',
url: 'https://blur.page',

23
client/layouts/Footer.tsx
View File

@@ -41,36 +41,39 @@ const Footer: React.FC<{}> = () => {
<a href="https://fakenumbers.io" rel="noopener noreferrer" target="_blank" title="A JavaScript library to fake a number">Fake Numbers</a>
</li>
<li className="footer__product">
<a href="https://formvalidation.io" rel="noopener noreferrer" target="_blank" title="The best validation library for JavaScript">Form Validation</a>
</li>
<a href="https://intersectionobserver.io" rel="noopener noreferrer" target="_blank" title="Practical, real world examples of Intersection Observer">Intersection Observer Examples</a>
</li>
</ul>
</div>
<div className="footer__col">
<ul className="footer__products">
<li className="footer__product">
<a href="https://formvalidation.io" rel="noopener noreferrer" target="_blank" title="The best validation library for JavaScript">Form Validation</a>
</li>
<li className="footer__product">
<a href="https://react-pdf-viewer.dev" rel="noopener noreferrer" target="_blank" title="A PDF viewer made for React">React PDF Viewer</a>
</li>
<li className="footer__product">
<a href="https://1loc.dev" rel="noopener noreferrer" target="_blank" title="Favorite JavaScript utilities in single line of code">1 LOC (4.1k ★)</a>
<a href="https://1loc.dev" rel="noopener noreferrer" target="_blank" title="Favorite JavaScript utilities in single line of code">1 LOC (4.2k ★)</a>
</li>
<li className="footer__product">
<a href="https://csslayout.io" rel="noopener noreferrer" target="_blank" title="A collection of popular layouts and patterns made with CSS">CSS Layout (3.3k ★)</a>
</li>
<li className="footer__product">
<a href="https://getfrontend.tips" rel="noopener noreferrer" target="_blank" title="Super tiny, quick tips, tricks and best practices of front-end development">Front-end Tips</a>
</li>
<a href="https://csslayout.io" rel="noopener noreferrer" target="_blank" title="A collection of popular layouts and patterns made with CSS">CSS Layout (3.5k ★)</a>
</li>
</ul>
</div>
<div className="footer__col">
<ul className="footer__products">
<li className="footer__product">
<a href="https://htmldom.dev" rel="noopener noreferrer" target="_blank" title="Common tasks of managing HTML DOM with native API">HTML DOM (3.6k ★)</a>
<a href="https://getfrontend.tips" rel="noopener noreferrer" target="_blank" title="Super tiny, quick tips, tricks and best practices of front-end development">Front-end Tips</a>
</li>
<li className="footer__product">
<a href="https://htmldom.dev" rel="noopener noreferrer" target="_blank" title="Common tasks of managing HTML DOM with native API">HTML DOM (3.7k ★)</a>
</li>
<li className="footer__product">
<a href="https://responsive.page" rel="noopener noreferrer" target="_blank" title="A collection of patterns to create a responsive web page">Responsive Design Patterns</a>
</li>
<li className="footer__product">
<a href="https://thisthat.dev" rel="noopener noreferrer" target="_blank" title="What is the difference between ___ and ___ in the front-end development?">this VS that (700 ★)</a>
<a href="https://thisthat.dev" rel="noopener noreferrer" target="_blank" title="What is the difference between ___ and ___ in the front-end development?">this VS that (750 ★)</a>
</li>
</ul>
</div>

BIN
public/assets/intersection-observer-examples.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB