on-intersect - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "on-intersect",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Call back when an element intersects with another",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,14 +13,4 @@ # on-intersect [![stability][0]][1]
 
-var el = html`<div>hello planet!</div>`
+var el = html`<h1 style="color: white">BECOME THE GOBLIN!</h1>`
 
-if (intersectExists()) {
-  onViewport(el, function (entry) {
-    console.log(entry.time)
-    console.log(entry.rootBounds)
-    console.log(entry.intersectionRect)
-    console.log(entry.intersectionRation)
-    console.log(entry.target)
-  })
-}
-
 var main = html`
@@ -34,2 +24,22 @@ <main>
 document.body.appendChild(main)
+
+// observers should only be added _after_ the element is rendered on the DOM,
+// else it displeases the browser emperors and they _will_ warn you
+if (intersectExists()) {
+  onIntersect(el, onEnter, onExit)
+}
+
+function onEnter (entry) {
+  console.log(entry.time)
+  console.log(entry.rootBounds)
+  console.log(entry.intersectionRect)
+  console.log(entry.intersectionRatio)
+  console.log(entry.target)
+
+  document.body.setAttribute('style', 'background-color: green')
+}
+
+function onExit (entry) {
+  document.body.setAttribute('style', 'background-color: white')
+}
 ```
@@ -36,0 +46,0 @@

No alert changes

Improved metrics

Total package byte prevSize

7699

increased by4.66%

Number of lines in readme file

87

increased by12.99%

No dependency changes