-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathannouncementCycle.html
141 lines (125 loc) · 6.87 KB
/
announcementCycle.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<head>
<style>
body {
width: 1000px;
height: 300px;
background-color: rgba(0, 0, 0, 0.00);
margin: 0px auto;
overflow: hidden;
}
h1 {
font-family: 'Gotham';
width: 1000px;
height: 300px;
display: block;
position: relative;
margin: auto 0px;
font-weight: 300;
text-align: center;
color: #ffffff;
font-size: 30px;
text-shadow: -2px 2px 4px rgba(153, 55, 52, .95);
}
#swap {
display: block;
width: 1000px;
line-height: 120%;
height:300px;
}
.announcement {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
opacity: 0;
}
.announcement::first-line {
font-size: 34px;
line-height: 150%;
color: #ffffff;
}
.announcement::first-line strong {
font-weight:700;
}
strong {
font-weight: 700;
color: #ffffff;
text-shadow: -3px 3px 6px rgba(153, 55, 52, .95);
}
em {
font-weight: 700;
font-style: italic;
}
</style>
</head>
<body><h1><div id='swap'></div></h1></body><script>
var announcements = [];
// Always
announcements.push("16 February 2025");
announcements.push("Miss an announcement?<br>Visit <strong>redeemindy.org/events</strong>");
//This week
announcements.push("<strong>Redeemer Students</strong> Event Calendar<br>Click “Youth Group” at <strong>redeemindy.org/events</strong><br>or sign up for text notifications<br>by texting “<strong>redeemerstudents</strong>” to 97000");
announcements.push("<strong>Redeemer Family Meeting</strong><br>Next Week • 10am<br>Learn about our financial report for 2024<br>and our plans for 2025");
announcements.push("<strong>Family Hope</strong> Training<br>February 24 • 5:30-9pm<br>Come and be equipped to serve as a host,<br>support friend, or support coach<br>to help families stay together.<br>Dinner provided • Register at <strong>redeemindy.org/events</strong><br>Email <strong>[email protected]</strong> with questions");
//announcements.push("Stay up to date with all of our upcoming events!<br>Visit <strong>redeemindy.org/events</strong>");
announcements.push("<strong>Discovering Redeemer</strong> for Kids & Students<br>March 2 • 12:30-3pm<br>For 4th-8th Graders to explore the next step in their faith<br>Lunch & Snacks Provided<br>Register at <strong>redeemindy.org/events</strong>");
announcements.push("<strong>Weekend to Remember</strong> Marriage Event<br>March 14-16 • Marriott Downtown • $175/person<br>Get Teaching, Conversation, and Time Together with your spouse<br>at this event that's something between a conference and a retreat.<br>Email <strong>[email protected]</strong> with questions<br>or register at <strong>redeemindy.org/events</strong>");
announcements.push("<strong>321 Evangelism</strong><br>Starts <strong>Next Monday</strong>, 2/24 • 6:30-8pm • City Barbeque (621 W 11th St)<br>A four-week discussion group inviting you<br>to see life the way Jesus does.<br>Email <strong>[email protected]</strong> with questions");
announcements.push("<strong>Sunday School</strong> classes have begun!<br>Come to Redeemer on Sunday mornings to join...<br>...our storied <strong>Creative Class</strong> or <strong>Faith & Work Class</strong><br>...our Sunday Morning <strong>Ecclesiastes Bible Study</strong><br>...or our brand new <strong>Themes of Isaiah Class</strong><br>...plus classes for every child's age group.");
//announcements.push("4th Annual <strong>High School House Party</strong><br>February 21–23 • DeMotte, IN<br>Email <strong>[email protected]</strong> for more information");
//often, but not today
//announcements.push("<strong>Newcomer's Lunch</strong><br>Today • 12:30pm<br>New? New-ish?<br>Come this afternoon to meet people<br>and learn about Redeemer.<br><em>Childcare provided</em>");
//announcements.push("<strong>Youth Group Central</strong><br>Tonight • 3-4:30pm");
//announcements.push("<strong>High School Small Groups</strong><br>Tonight • 7-8:15pm<br>Email <strong>[email protected]</strong> for more info");
//announcements.push("<strong>Redeemer Students</strong> Event Calendar<br>Click “Youth Group” at <strong>redeemindy.org/events</strong><br>or sign up for text notifications<br>by texting “<strong>redeemerstudents</strong>” to 97000");
//announcements.push("Stay up to date with all of our upcoming events!<br>Visit <strong>redeemindy.org/events</strong>");
//announcements.push(" <strong>First Friday</strong><br>at the Harrison Center • This Friday • 6-9pm<br>Gallery openings, studio visits, and more!<br>Learn more at <strong>harrisoncenter.org</strong>");
//announcements.push("<strong>First Friday</strong> Volunteers Needed!<br>This Friday • 6-9pm<br>Help out from 5:45-7:30pm or 7:15-9pm<br>More info or volunteer at<br><strong>harrisoncenter.org/volunteers</strong>");
//announcements.push("<strong>First Friday</strong> Volunteers Needed!<br>This Friday • 6-9pm<br>Help out from 5:45-7:30pm or 7:15-9pm<br>More info or volunteer at<br><strong>harrisoncenter.org/volunteers</strong>");
//LOOPING AND DISPLAY CODE BELOW THIS LINE
//Levers to pull:
var startingAnnouncement = 0;
var secondsHold = 10;
var transitionSpeed = 0.5;
var debugMode = false;
//The magic:
var elements = [];
var swap = document.getElementById('swap');
announcements.forEach((a, i) => {
var el = document.createElement("div");
el.id = i;
el.className = "announcement";
el.innerHTML = a;
if (debugMode) {
el.style = "position:relative;opacity:1;/*transform:translate(0,0);*/border:1px solid red;height:340px;width:1200px;"
document.body.style = "overflow:auto;"
}
elements.push(el);
swap.appendChild(el);
});
function transition(next, current){
if (current) { current.style = "transition: opacity " + transitionSpeed + "s ease-in-out;opacity:0;"; }
next.style = "transition: opacity " + transitionSpeed + "s ease-in-out;opacity:1;";
}
var currentAnnouncement = startingAnnouncement;
function loop(){
setInterval(() => {
var nextAnnouncement = currentAnnouncement + 1;
if (nextAnnouncement > elements.length - 1) {
nextAnnouncement = 0;
}
transition(elements[nextAnnouncement], elements[currentAnnouncement]);
currentAnnouncement = nextAnnouncement;
}, (secondsHold * 1000));
}
//Hey Presto:
if(!debugMode){
console.log("Looping " + elements.length + " announcements every " + secondsHold + " seconds with a " + transitionSpeed + " second transition, starting with #" + (startingAnnouncement + 1));
transition (elements[startingAnnouncement]);
loop();
} else {
console.log("Debug mode! When turned off, " + elements.length + " announcements will loop every " + secondsHold + " seconds with a " + transitionSpeed + " second transition, starting with #" + (startingAnnouncement + 1));
}
</script></html>