@alzintani/superevents

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="canonical" href="https://superevents.org"> <link rel="shortcut icon" href="favicon.ico"> <title>SuperEvents - Examples</title> <link rel="stylesheet" href="assets/css/style.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css"> </head> <body> <div id="left-side"> <h1 id="page-title">SuperEvents<img src="logo.png"><small>JavaScript Events Library</small></h1> <p><strong>SuperEvents</strong> Lets you to run actions when events are detected.<br>Support most events action like:- <span class="primary-color">Scroll,</span> <span class="primary-color">Click,</span> <span class="primary-color">Hover,</span> <span class="primary-color">Mouse Move,</span> </p> <hr> <ul id="main-menu"> <li><a href="index.html">Home</a></li> <li><a href="api.html">API Documentation</a></li> <li><a href="examples.html">Examples</a> <ul> <li><a href="examples.html#click">Click</a></li> <li><a href="examples.html#hover">Hover</a></li> <li><a href="examples.html#mousemove">Mouse Moving</a></li> <li><a href="examples.html#scroll">Scroll</a></li> </ul> </li> <li><a class="github" href="https://github.com/alzintani/SuperEvents" target="_blank">GitHub</a></li> </ul> <hr> </div> <div id="main"> <p>Here you will find some examples that will help you to work with SuperEvents</p> <div class="examples-menu"><a href="examples.html#click">Click Event Example</a> <a href="examples.html#mousemove">Mouse Moving Event Example</a> <a href="examples.html#hover">Hover Event Example</a> <a href="examples.html#scroll">Scroll Event Example</a> </div> <hr> <div class="examples"> <div class="example" id="click"> <h3>Click Example</h3> <p>With this event you can handel the </p> <div class="example-source click-example-source">Source</div> <div class="example-target click-example-target">Target 1</div> <div class="example-target click-example-target">Target 2</div> <div class="example-target click-example-target">Target 3</div> <div class="example-target click-example-target">Target 4</div> <div class="row rows-1_2-1_2"> <div class="column">HTML <pre><code class="language-html"><div class="click-example-source">Source</div> <div class="click-example-target">Target 1</div> <div class="click-example-target">Target 2</div> <div class="click-example-target">Target 3</div> <div class="click-example-target">Target 4</div></code></pre> </div> <div class="column">JS <pre><code class="language-javascript">let eventFrom = { backgroundColor: '#FF4971', scale: 0.5 } let eventTo = { backgroundColor: '#4693FF', scale: 1 } const source = document.querySelector('.click-example-source'); const target = document.querySelectorAll('.click-example-target'); const clickExample = new SuperEvents({ source: source, target: target }); clickExample.click().fromTo( eventFrom, eventTo ).easing({ timing: 'ease-out', duration: 0.3, delay: 0.1 });</code></pre> </div> </div> </div> <hr> <div class="example" id="mousemove"> <h3>Mouse Move Example</h3> <p>With this event you can handel the </p> <div class="example-source mousemove-example-source">Source</div> <div class="example-target mousemove-example-target">Target 1</div> <div class="example-target mousemove-example-target">Target 2</div> <div class="example-target mousemove-example-target">Target 3</div> <div class="example-target mousemove-example-target">Target 4</div> <div class="row rows-1_2-1_2"> <div class="column">HTML <pre><code class="language-html"><div class="mousemove-example-source">Source</div> <div class="mousemove-example-target">Target 1</div> <div class="mousemove-example-target">Target 2</div> <div class="mousemove-example-target">Target 3</div> <div class="mousemove-example-target">Target 4</div></code></pre> </div> <div class="column">JS <pre><code class="language-javascript">let eventFrom = { backgroundColor: '#FF4971' } let eventTo = { backgroundColor: '#4693FF' } const source = document.querySelector('.mousemove-example-source'); const target = document.querySelectorAll('.mousemove-example-target'); const mousemoveExample = new SuperEvents({ source: source, target: target }); mousemoveExample.mousemove().fromTo( eventFrom2, eventTo2 )</code></pre> </div> </div> </div> <hr> <div class="example" id="hover"> <h3>Hover Example</h3> <p>With this event you can handel the </p> <div class="example-source hover-example-source">Source</div> <div class="hover"> <div class="example-target hover-example-target">Target 1</div> </div> <div class="hover"> <div class="example-target hover-example-target">Target 2</div> </div> <div class="hover"> <div class="example-target hover-example-target">Target 3</div> </div> <div class="hover"> <div class="example-target hover-example-target">Target 4</div> </div> <div class="row rows-1_2-1_2"> <div class="column">HTML <pre><code class="language-html"><div class="hover-example-source">Source</div> <div class="hover-example-target">Target 1</div> <div class="hover-example-target">Target 2</div> <div class="hover-example-target">Target 3</div> <div class="hover-example-target">Target 4</div></code></pre> </div> <div class="column">JS <pre><code class="language-javascript">let eventFrom = { translateX: '300px', opacity: 0.1 } let eventTo = { translateX: '0', opacity: 1 } const source = document.querySelector('.hover-example-source'); const target = document.querySelectorAll('.hover-example-target'); const hoverExample = new SuperEvents({ source: source, target: target }); hoverExample.hover().fromTo( eventFrom, eventTo ).easing({ timing: 'ease-out', duration: 0.3, delay: 0.3, cubicBezier: false });</code></pre> </div> </div> </div> <hr> <div class="example" id="scroll"> <h3>Scroll Example</h3> <p>With this event you can handel the </p> <div class="example-target scroll-example-target-2">Target 1</div> <div class="example-target scroll-example-target-2">Target 2</div> <div class="example-target scroll-example-target-2">Target 3</div> <div class="example-target scroll-example-target-2">Target 4</div> <div class="row rows-1_2-1_2"> <div class="column">HTML <pre><code class="language-html"><div class="scroll-example-target">Target 1</div> <div class="scroll-example-target">Target 2</div> <div class="scroll-example-target">Target 3</div> <div class="scroll-example-target">Target 4</div></code></pre> </div> <div class="column">JS <pre><code class="language-javascript">eventFrom = { backgroundColor: '#FF5549', scale: 0.2 }; eventTo = { backgroundColor: '#464EFF', scale: 1 }; var target2 = document.querySelectorAll('.scroll-example-target-2'); new SuperEvents(target2).scroll({ indicator: '80%', duration: '50%', }).fromTo( eventFrom, eventTo ).easing( { timing: 'ease-out', duration: 0.3, delay: 0.1, cubicBezier: false } );</code></pre> </div> </div> </div> <div class="example"> <h3>Scrolling Element Example</h3> <p>With this event you can handel the </p> <div> <div class="scroll-div-container"><span>Scroll Down</span> <div class="scroll-div"> <div class="example-target scroll2-example-target">Target 1</div> <div class="example-target scroll2-example-target">Target 2</div> <div class="example-target scroll2-example-target">Target 3</div> <div class="example-target scroll2-example-target">Target 4</div> </div> </div> </div> <hr> <div class="row rows-1_2-1_2"> <div class="column">HTML <pre><code class="language-html"><div class="scroll-example-target">Target 1</div> <div class="scroll-example-target">Target 2</div> <div class="scroll-example-target">Target 3</div> <div class="scroll-example-target">Target 4</div></code></pre> </div> <div class="column">JS <pre><code class="language-javascript">eventFrom = { backgroundColor: '#FFAAA4' } eventTo = { backgroundColor: '#9BA0FF' } let source3 = document.querySelector('.scroll-div-container') let target3 = source3.querySelectorAll('.scroll2-example-target') new SuperEvents({ source: source3, target: target3}).scroll({ indicator: '80%', duration: '20%', }).fromTo( eventFrom, eventTo ).easing( { timing: 'ease-out', duration: 0.3, delay: 0.15, cubicBezier: false } );</code></pre> </div> </div> </div> </div> </div> <footer id="footer"> <hr> <p>SuperEvents (c) Hassan Matooq</p> </footer> <script src="assets/js/SuperEvents.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script> <script src="assets/js/javascript.min.js"></script> </body> </html>