You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A method for adding triggers when element is visible in the viewport.
@@ -36,24 +40,29 @@ as long as the scroll event is happening.
36
40
37
41
**alwaysRunOnTrigger (boolean)**: by default the triggered element callback will only be executed one time. Setting to true will re-trigger the callback everytime the element has been in and out of the viewport.
38
42
43
+
**treshold (number)**: add this much pixels to calculation to the visibility check (useful if you want to execute code just before the element becomes visible)
44
+
39
45
**callback (object)**:
40
46
This is the function which will be exectued when the element is detected in the viewport. To reference the node, pass it
41
47
into the callback as an argument.
42
48
43
49
**EXAMPLE**
44
50
45
-
Scrollmap.trigger({
46
-
target: '.collection-list .items',
47
-
surfaceVisible: 0.5,
48
-
runOnScroll: true,
49
-
alwaysRunOnTrigger: true
50
-
}, (element) => {
51
-
$(element).addClass("visible");
52
-
});
51
+
```javascript
52
+
Scrollmap.trigger({
53
+
target:'.collection-list .items',
54
+
surfaceVisible:0.5,
55
+
runOnScroll:true,
56
+
alwaysRunOnTrigger:true,
57
+
treshold:200
58
+
}, (element) => {
59
+
$(element).addClass("visible");
60
+
});
61
+
```
53
62
54
63
********************************************
55
64
56
-
##Method - sequence(options, callback)
65
+
##Method - sequence(options, callback)
57
66
58
67
**Description:**
59
68
A method for staggering an array of triggers.
@@ -71,52 +80,55 @@ can get the item and index of the array as arguments
71
80
72
81
**EXAMPLE**
73
82
74
-
Scrollmap.trigger({
75
-
target: ".boxes",
76
-
surfaceVisible: 0.2
77
-
}, (element) => {
83
+
```javascript
84
+
Scrollmap.trigger({
85
+
target:".boxes",
86
+
surfaceVisible:0.2
87
+
}, (element) => {
78
88
79
-
//define the array of the elements to sequence
89
+
//define the array of the elements to sequence
80
90
81
-
const array = element.querySelectorAll(".box");
91
+
constarray=element.querySelectorAll(".box");
82
92
83
-
//use the sequence method to define, interval and callback
84
-
//function.
93
+
//use the sequence method to define, interval and callback
94
+
//function.
85
95
86
-
Scrollmap.sequence(array, {
87
-
interval: 5,
88
-
order: "random"
89
-
}, (item) => {
96
+
Scrollmap.sequence(array, {
97
+
interval:5,
98
+
order:"random"
99
+
}, (item) => {
90
100
91
-
//add any code to be triggered when
92
-
//the element is in the viewport
101
+
//add any code to be triggered when
102
+
//the element is in the viewport
93
103
94
-
item.classList.add("color-change");
104
+
item.classList.add("color-change");
95
105
96
-
});
97
-
});
106
+
});
107
+
});
108
+
```
98
109
99
110
********************************************
100
111
101
-
##Method - out(function)
112
+
##Method - out(function)
102
113
103
114
When the trigger is has been executed and the element is no longer in the viewport, the out method
104
115
can be chained to the trigger to execute the specified function.
0 commit comments