Skip to content

Commit d38c86d

Browse files
NicolayKjarnetNicolayKjarnet
authored
feat: add double midscroll single creative format (#65)
1 parent c38deb8 commit d38c86d

10 files changed

Lines changed: 1468 additions & 676 deletions

File tree

‎playground/local-dev/double-midscroll-single/Manrope-ExtraBold.ttf‎

95.2 KB
Binary file not shown.

‎playground/local-dev/double-midscroll-single/advantage-logo-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎playground/local-dev/double-midscroll-single/double-midscroll-single.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>DoubleMidscrollSingle Example</title>
8+
<style>
9+
@font-face {
10+
font-family: 'Manrope';
11+
src: url('./Manrope-ExtraBold.ttf') format('truetype');
12+
font-weight: 800;
13+
font-style: normal;
14+
font-display: swap;
15+
}
16+
17+
html,
18+
body {
19+
margin: 0;
20+
padding: 0;
21+
height: 100%;
22+
width: 100%;
23+
font-family: 'Manrope', Arial, sans-serif;
24+
}
25+
26+
.container {
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
justify-content: center;
31+
min-height: 100vh;
32+
padding: 20px;
33+
box-sizing: border-box;
34+
background-color: #4317a6;
35+
color: white;
36+
position: relative;
37+
overflow: hidden;
38+
transition: background-color 0.3s ease-out;
39+
}
40+
41+
.logo {
42+
max-width: 300px;
43+
width: 100%;
44+
height: auto;
45+
margin-bottom: 40px;
46+
}
47+
48+
.progress-display {
49+
font-size: 8rem;
50+
font-weight: bold;
51+
margin-bottom: 2rem;
52+
text-shadow: 0 8px 20px rgba(159, 117, 255, 0.3);
53+
}
54+
55+
.progress-bar {
56+
width: 80%;
57+
height: 20px;
58+
background: rgba(255, 255, 255, 0.2);
59+
border-radius: 10px;
60+
overflow: hidden;
61+
margin-bottom: 2rem;
62+
}
63+
64+
.progress-fill {
65+
height: 100%;
66+
background: white;
67+
width: 0%;
68+
transition: width ease-out;
69+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
70+
}
71+
72+
.info-text {
73+
margin-top: 30px;
74+
font-size: 18px;
75+
color: rgba(255, 255, 255, 0.8);
76+
text-align: center;
77+
transition: color 0.3s ease-out;
78+
}
79+
80+
/* Animated background elements */
81+
.bg-element {
82+
position: absolute;
83+
border-radius: 50%;
84+
background: rgba(255, 255, 255, 0.1);
85+
transition: all 0.3s ease-out;
86+
}
87+
88+
.bg-element-1 {
89+
width: 300px;
90+
height: 300px;
91+
top: -150px;
92+
left: -150px;
93+
}
94+
95+
.bg-element-2 {
96+
width: 200px;
97+
height: 200px;
98+
bottom: -100px;
99+
right: -100px;
100+
}
101+
</style>
102+
103+
<script type="module">
104+
import { AdvantageCreativeMessenger } from "/src/advantage/messaging/creative-side";
105+
import { AdvantageMessageAction, AdvantageFormatName } from "/src/types";
106+
107+
async function main() {
108+
const advantageMessenger = new AdvantageCreativeMessenger();
109+
const session = await advantageMessenger.startSession();
110+
111+
if (session) {
112+
// Setup scroll progress listener using the messenger's onMessage method
113+
advantageMessenger.onMessage((message) => {
114+
if (message.action === "SCROLL_PROGRESS") {
115+
const progress = message.progress;
116+
if (typeof progress === "number") {
117+
updateUI(progress);
118+
}
119+
}
120+
});
121+
122+
const response = await advantageMessenger.sendMessage({
123+
action: AdvantageMessageAction.REQUEST_FORMAT,
124+
format: AdvantageFormatName.DoubleMidscrollSingleCreative
125+
});
126+
if (response?.action === AdvantageMessageAction.FORMAT_CONFIRMED) {
127+
document.body.style.opacity = "1";
128+
}
129+
}
130+
}
131+
132+
function updateUI(progress) {
133+
// Update progress display
134+
const progressDisplay = document.querySelector('.progress-display');
135+
progressDisplay.textContent = `${Math.round(progress * 100)}%`;
136+
137+
// Update progress bar
138+
const progressFill = document.querySelector('.progress-fill');
139+
progressFill.style.width = `${progress * 100}%`;
140+
141+
// Animate bg elements based on scroll
142+
const bgElement1 = document.querySelector('.bg-element-1');
143+
const bgElement2 = document.querySelector('.bg-element-2');
144+
145+
// Update bg color at 50% scroll progress
146+
const container = document.querySelector('.container');
147+
148+
if (progress >= 0.5) {
149+
container.style.backgroundColor = "#6b04fd";
150+
} else {
151+
container.style.backgroundColor = "#4317a6";
152+
}
153+
154+
bgElement1.style.transform = `translate(${progress * 1500}px, ${progress * 1500}px) scale(${progress * 1.5})`;
155+
bgElement2.style.transform = `translate(${-progress * 1500}px, ${-progress * 1500}px) scale(${progress * 1.5})`;
156+
}
157+
158+
main();
159+
</script>
160+
</head>
161+
162+
<body style="opacity: 0; transition: opacity 1s ease-in;">
163+
<div class="container">
164+
<img src="./advantage-logo-white.svg" alt="Advantage Logo" class="logo">
165+
<div class="bg-element bg-element-1"></div>
166+
<div class="bg-element bg-element-2"></div>
167+
168+
<div class="progress-display">0%</div>
169+
170+
<div class="progress-bar">
171+
<div class="progress-fill"></div>
172+
</div>
173+
174+
<div class="info-text">
175+
Scroll down to see the progress change!<br>
176+
This is a single creative with 2x viewport height.
177+
</div>
178+
</div>
179+
</body>
180+
181+
</html>

0 commit comments

Comments
 (0)