@lordicon/element
Version:
This package offers developers a convenient method for embedding, controlling, and customizing animated icons from Lordicon within web projects.
124 lines (121 loc) • 5.64 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Custom trigger (scroll)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="stylesheet" type="text/css" href="/16-custom-trigger-scroll.css" />
<script type="module" src="/16-custom-trigger-scroll.ts"></script>
</head>
<body>
<div class="row" id="frame-1">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-2">Next</a>
</div>
</div>
<div class="row" id="frame-2">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-3">Next</a>
</div>
</div>
<div class="row" id="frame-3">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-4">Next</a>
</div>
</div>
<div class="row" id="frame-4">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-5">Next</a>
</div>
</div>
<div class="row" id="frame-5">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-6">Next</a>
</div>
</div>
<div class="row" id="frame-6">
<div>
<lord-icon trigger="scroll" state="loop-spin" src="/icons/coins.json"></lord-icon>
</div>
<div>
<h3>This is Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#frame-1">First</a>
</div>
</div>
</body>
</html>