-
Notifications
You must be signed in to change notification settings - Fork 2
/
scroll-trigger.html
99 lines (87 loc) · 4.56 KB
/
scroll-trigger.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- Moodle Scroll Trigger v.1.0.3 - Copyright (C) 2022, TRMSC - https://trmsc1.wordpress.com/ -->
<!-- GNU General Public Licence 3.0 - http://www.gnu.de/documents/gpl-3.0.en.html -->
<!-- TESTED IN MOODLE 3.9.11 (CLASSIC) AND MOODLE 3.11.4+ (BOOST) -->
<!-- PUT THE CODE INTO A TEXTBLOCK OR TEXTFIELD (HTML-MODE) ON COURSE-SITE AND OBSERVE THE NOTES BELOW -->
<script>
window.addEventListener('load', function(event) {
let jquery_load_check_interval = setInterval(function() {
if (window.jQuery) {
console.log('jQuery in Moodle: jQuery v.' + $.fn.jquery + ' loaded');
console.log('Moodle Scroll Trigger v.1.0.3');
triggerIdCount = 0;
/* PREDEFINED ELEMENTS ✨👇 */
/* REMOVE THE TWO SLASHS AT THE BEGINNING OF A LINE TO ACTIVATE ELEMENTS FOR SCROLL TRIGGERING */
/* YOU CAN CHANGE THE DIRECTION FROM LEFT TO RIGHT */
// scrollTrigger(".sectionname", "left"); /* TRIGGER ALL TOPIC HEADERS */
// scrollTrigger(".activityicon", "left"); /* TRIGGER ALL ACTIVITIY ICONS */
// scrollTrigger(".activityinstance", "left"); /* TRIGGER ALL ACTIVITIY HEADERS */
// scrollTrigger(".activity", "left"); /* TRIGGER ALL ACTIVITIES */
// scrollTrigger(".modtype_label", "left"); /* TRIGGER ALL TEXTFIELDS */
// scrollTrigger(".contentafterlink", "left"); /* TRIGGER ALL DESCRIPTIONS */
// scrollTrigger(".gridiconcontainer", "left"); /* TRIGGER ALL GRIDS */
// scrollTrigger("#region-main p", "left"); /* TRIGGER ALL PARAGRAPHS */
// scrollTrigger("#region-main h1", "left"); /* TRIGGER ALL HEADERS TYPE H1 */
// scrollTrigger("#region-main h2", "left"); /* TRIGGER ALL HEADERS TYPE H2 */
// scrollTrigger("#region-main h3", "left"); /* TRIGGER ALL HEADERS TYPE H3 */
// scrollTrigger("#region-main h4", "left"); /* TRIGGER ALL HEADERS TYPE H4 */
// scrollTrigger("#region-main h5", "left"); /* TRIGGER ALL HEADERS TYPE H5 */
// scrollTrigger("#region-main h6", "left"); /* TRIGGER ALL HEADERS TYPE H6 */
/* OR TRIGGER OWN ELEMENTS 🤓👇 */
/* ADD A SELECTOR + DIRECTION AND REMOVE THE TWO SLASHS TO ACTIVATE ELEMENT FOR SCROLL TRIGGERING */
/* COPY THE LINE FOR TRIGGERING MORE ELEMENTS */
// scrollTrigger("#id .class or element", "left or right");
clearInterval(jquery_load_check_interval);
} else {
console.log('jQuery in Moodle: new try to load jquery...');
}
}, 150);
function scrollTrigger(trg, trgDir) {
if (jQuery(trg).val() != 0) {
console.log("Scroll Trigger: " + trg + " doesn't exist");
return;
}
if (trg.includes("#")) {
console.log("Scroll Trigger found: " + trg);
startTrigger(trg, trgDir);
} else {
jQuery(trg).each(function() {
if (this.id == 0) {
jQuery(this).attr("id", "triggerID" + triggerIdCount);
trg = "#" + this.id;
console.log("Scroll Trigger added: " + trg);
triggerIdCount++;
startTrigger(trg, trgDir);
} else {
trg = "#" + this.id;
console.log("Scroll Trigger found: " + trg);
startTrigger(trg, trgDir);
}
});
}
return;
}
function startTrigger(trg, trgDir) {
trg = "#region-main " + trg;
console.log("Start scroll-trigger from " + trgDir + " for " + trg);
jQuery(trg).css("transition", "all 0.7s ease-in 0s");
jQuery(window).scroll(function() {
var hT = jQuery(trg).offset().top,
hH = jQuery(trg).outerHeight(),
wH = jQuery(window).height(),
wS = jQuery(this).scrollTop();
if ((wS > (hT - 600)) && (wS < (hT + hH - 160))) {
jQuery(trg).css("opacity", "1");
jQuery(trg).css("transform", "translate(0px, 0px)");
} else {
jQuery(trg).css("opacity", "0");
if (trgDir == "right") {
jQuery(trg).css("transform", "translate(50px, 0px)");
} else {
jQuery(trg).css("transform", "translate(-50px, 0px)");
}
}
});
return;
}
}, false);
</script>