htmltypist.js
Advanced tools
+1
-1
@@ -1,1 +0,1 @@ | ||
| window.Typist=window.Typist||function(){},function(){'use strict';if(window.addEventListener&&window.requestAnimationFrame){var e='[data-typist]',t='typist',n='cursor',a=1,r=0,i=80,s=50,l=2e3,d=1,o=window.IntersectionObserver&&window.CustomEvent?new IntersectionObserver(function(e){e.forEach(function(e){if(!(e.intersectionRatio<d)){var t=new CustomEvent('typist',{detail:{element:e.target}});document.dispatchEvent(t)}})},{threshold:d}):null,c=function(e){var n=this;if(e=e||{},n.element=e.element||null,n.element&&1===n.element.nodeType&&n.element.dataset&&!n.element.classList.contains(t)&&(n.text=n.getText(),n.text.length)){var d=n.element.dataset;n.repeat=parseFloat(e.typist||d.typist)||1/0,n.cursor=parseFloat(e.cursor||d.cursor)||a,n.sequence=o?e.sequence||d.sequence:null,n.delayStart=parseFloat(e.delayStart||d.delayStart)||r,n.delayType=parseFloat(e.delayType||d.delayType)||i,n.delayEnd=parseFloat(e.delayEnd||d.delayEnd)||l,n.delayVariance=parseFloat(e.delayVariance||d.delayVariance)||s,n.element.innerHTML='',n.element.classList.add(t),n.item=0,n.char=0,n.dir=1,!o||n.delayStart>=0&&!n.sequence?n.start():(o.observe(n.element),document.addEventListener('typist',function(e){(!n.sequence&&e.detail.element===n.element||document.querySelector('[data-sequence="'+n.sequence+'"]')===n.element)&&(o.unobserve(n.element),n.start())},!1))}};c.prototype.start=function(){var e=this;e.started||(e.started=!0,setTimeout(function(){e.cursor>0&&e.element.classList.add(n),e.typeText()},e.delayStart>0?e.delayStart:1))},c.prototype.typeText=function(){var e,t=this,a=t.text[t.item],r=a.length,i=(t.item+1)%t.text.length,s=0;if(t.char+=t.dir,(!t.char||t.char>=r)&&(t.dir*=-1),t.char||(t.item=i),e=a.slice(0,t.char),-1===t.dir&&t.text.length>1&&!t.text[i].indexOf(e)&&(t.item=i,t.dir=1),t.char>=r){if(i||t.repeat--,s=t.repeat?t.delayEnd:0,t.sequence){var l=new CustomEvent('typist',{detail:{sequence:t.sequence}});t.sequence=null,t.element.removeAttribute('data-sequence'),document.dispatchEvent(l)}}else s=t.dir>0?Math.random()*(2*t.delayVariance)-t.delayVariance+t.delayType:t.delayType-t.delayVariance;requestAnimationFrame(function(){t.element.textContent=e,s?setTimeout(function(){t.typeText()},s):1===t.cursor&&t.element.classList.remove(n)})},c.prototype.getText=function(){var e,t=[],n=this.element.children;for(e=0;e<n.length;e++)a(n[e]);return t.length||a(this.element),t.length?t:null;function a(e){var n=e.textContent.trim();n&&t.push(n)}},window.Typist=c,window.addEventListener('DOMContentLoaded',function(){for(var t=document.querySelectorAll(e),n=0;n<t.length;n++)new c({element:t[n]})},!1)}}(); | ||
| window.Typist=window.Typist||function(){},function(){'use strict';var e=window,t=e.addEventListener,n=document;if(t&&e.requestAnimationFrame){var r={element:'[data-typist]',cls:'typist',clsCursor:'cursor',cursor:1,delayStart:0,delayType:80,delayVariance:50,delayEnd:2e3,viewThreshold:1},d=e.IntersectionObserver&&e.CustomEvent?new function(){var e=null,d=[];this.observe=function(t){e?e.observe(t):d.push(t)},this.unobserve=function(t){e?e.unobserve(t):d=d.filter(function(e){return e!==t})},t('load',function(){var t;for(e=new IntersectionObserver(function(e){e.forEach(function(e){if(!(e.intersectionRatio<r.viewThreshold)){var t=new CustomEvent('typist',{detail:{node:e.target}});n.dispatchEvent(t)}})},{threshold:r.viewThreshold});t=d.shift();)e.observe(t)},!1)}:null,o=function(e){var t=this;if(e=e||{},t.node=e.element||null,t.cl=t.node&&t.node.classList,t.node&&1===t.node.nodeType&&t.node.dataset&&!t.cl.contains(r.cls)&&(t.text=function(){var e,n=[],r=t.node.children;for(e=0;e<r.length;e++)d(r[e]);n.length||d(t.node);return n.length?n:null;function d(e){var t=e.textContent.trim();t&&n.push(t)}}(),t.text.length)){var o=t.node.dataset;t.rep=1*(e.typist||o.typist)||1/0,t.cur=1*(e.cursor||o.cursor)||r.cursor,t.seq=d?e.sequence||o.sequence:null,t.dS=1*(e.delayStart||o.delayStart)||r.delayStart,t.dT=1*(e.delayType||o.delayType)||r.delayType,t.dE=1*(e.delayEnd||o.delayEnd)||r.delayEnd,t.dV=1*(e.delayVariance||o.delayVariance)||r.delayVariance,t.node.innerHTML='',t.cl.add(r.cls),t.i=0,t.c=0,t.d=1,!d||t.dS>=0&&!t.seq?t.start():((t.dS<0||t.node===s())&&d.observe(t.node),n.addEventListener('typist',function(e){(e.detail.node===t.node||t.seq===e.detail.seq&&t.node===s())&&(d.unobserve(t.node),t.start())},!1))}function s(){return t.seq?n.querySelector('[data-sequence="'+t.seq+'"]'):0}};o.prototype.start=function(){var e=this;function t(){var d,o=e.text[e.i],s=o.length,i=(e.i+1)%e.text.length,a=0;if(e.c+=e.d,(!e.c||e.c>=s)&&(e.d*=-1),e.c||(e.i=i),d=o.slice(0,e.c),-1===e.d&&e.text.length>1&&!e.text[i].indexOf(d)&&(e.i=i,e.d=1),e.c>=s){if(i||e.rep--,a=e.rep?e.dE:0,e.seq){var l=new CustomEvent('typist',{detail:{seq:e.seq}});e.seq=null,e.node.removeAttribute('data-sequence'),n.dispatchEvent(l)}}else a=e.d>0?Math.random()*(2*e.dV)-e.dV+e.dT:e.dT-e.dV;requestAnimationFrame(function(){e.node.textContent=d,a?setTimeout(t,a):1===e.cur&&e.cl.remove(r.clsCursor)})}setTimeout(function(){e.cur>0&&e.cl.add(r.clsCursor),t()},Math.max(1,e.dS))},e.Typist=o,t('DOMContentLoaded',function(){for(var e=n.querySelectorAll(r.element),t=0;t<e.length;t++)new o({element:e[t]})},!1)}}(); |
+6
-3
| { | ||
| "name": "htmltypist.js", | ||
| "version": "1.0.1", | ||
| "version": "1.1.0", | ||
| "description": "web page typing effect animation", | ||
| "main": "dist/typist.js", | ||
| "files": ["dist/typist.css"], | ||
| "files": [ | ||
| "dist/typist.css" | ||
| ], | ||
| "scripts": { | ||
@@ -26,4 +28,5 @@ "build": "npm i && gulp", | ||
| "license": "MIT", | ||
| "browserslist": ["> 1%", "ie 11"], | ||
| "devDependencies": { | ||
| "autoprefixer": "^9.5.1", | ||
| "autoprefixer": "^9.6.0", | ||
| "cssnano": "^4.1.10", | ||
@@ -30,0 +33,0 @@ "gulp": "^4.0.2", |
+14
-2
@@ -21,4 +21,4 @@ # typist.js | ||
| ```html | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/htmltypist.js/dist/typist.js"></script> | ||
| ``` | ||
@@ -129,1 +129,13 @@ | ||
| 1. IE11 does not support data-sequence names and data-delay-start="-1" to animate when in view. | ||
| ## Version history | ||
| ### v1.1.0, 4 June 2019 | ||
| * improved loading and IntersectionObserver | ||
| * reduced file size | ||
| ### v1.0.1, 30 May 2019 | ||
| * initial release |
9452
1.74%140
9.38%