Skip to content

Commit 467f4c5

Browse files
Finished Bartholomeow page
1 parent 990e200 commit 467f4c5

7 files changed

+83
-14
lines changed

docs/src/bartholomeow.ts

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Animation, TheSupersonicPlugin } from '../../lib/src'
1+
import { TheSupersonicPlugin } from '../../lib/src'
22
import type { Configuration as DriverConfiguration } from '../../lib/src/Driver.types'
3+
import { toFixed } from '../../lib/src/utils'
34

45
const isMobile = matchMedia('(max-width: 1024px)').matches
56
const elementSize: number = isMobile ? 150 : 190
@@ -9,6 +10,39 @@ const maxRows = Math.ceil(window.innerHeight / elementSize)
910
const elementsOnScreen = maxRows * maxHorizontalElements
1011
const drivers: DriverConfiguration = {}
1112

13+
const props = [
14+
{
15+
name: 'translateX',
16+
minStart: 0,
17+
maxStart: 0,
18+
minEnd: -(window.innerWidth / 5),
19+
maxEnd: window.innerWidth / 5,
20+
},
21+
22+
{
23+
name: 'translateY',
24+
minStart: 0,
25+
maxStart: 0,
26+
minEnd: -(window.innerHeight / 5),
27+
maxEnd: window.innerHeight / 5,
28+
},
29+
30+
{
31+
name: 'rotate',
32+
minStart: 0,
33+
maxStart: 0,
34+
minEnd: -90,
35+
maxEnd: 90,
36+
},
37+
{
38+
name: 'scale',
39+
minStart: 1,
40+
maxStart: 1,
41+
minEnd: 3,
42+
maxEnd: 3.5,
43+
},
44+
]
45+
1246
let row = 0
1347
const last10sprites: any = []
1448
function gen() {
@@ -76,17 +110,47 @@ for (let i = 0; i < driverAmount; i++) {
76110
onAfterInit({ driver }) {
77111
driver.data.elements = []
78112

79-
if (driverRow >= 0) {
80-
for (let index = 0; index < elementsPerDriver; index++) {
81-
const domElement = document.querySelector<HTMLElement>(`#barth-${index + driverStartFromElement}`)!
113+
for (let index = 0; index < elementsPerDriver; index++) {
114+
const element: any = {}
115+
element.domElement = document.querySelector<HTMLElement>(`#barth-${index + driverStartFromElement}`)!
116+
117+
element.properties = {}
118+
119+
for (let i = 0; i < props.length; i++) {
120+
const sourceProp = props[i]
121+
122+
element.properties[sourceProp.name] = {}
82123

83-
driver.data.elements.push(domElement)
124+
const targetProp = element.properties[sourceProp.name]
125+
126+
targetProp.start = Math.random() * (sourceProp.maxStart - sourceProp.minStart) + sourceProp.minStart
127+
if (sourceProp.name === 'opacity' || sourceProp.name === 'scale')
128+
targetProp.start = Number.parseFloat(targetProp.start.toFixed(2))
129+
else targetProp.start = Math.ceil(targetProp.start)
130+
131+
targetProp.end = Math.random() * (sourceProp.maxEnd - sourceProp.minEnd) + sourceProp.minEnd
132+
if (sourceProp.name === 'opacity' || sourceProp.name === 'scale')
133+
targetProp.end = Number.parseFloat(targetProp.end.toFixed(2))
134+
else targetProp.end = Math.ceil(targetProp.end)
135+
136+
targetProp.distance = toFixed(targetProp.end - targetProp.start, 2)
84137
}
138+
139+
driver.data.elements.push(element)
85140
}
86141
},
87-
onBeforeRender({ driver }) {
88-
driver.data.elements.forEach((element) => {
89-
element.style.setProperty('transform', `translate3d(${driver.progress * 500}%, 0, 0)`)
142+
onAfterRender({ driver }) {
143+
driver.data.elements.forEach((element: any) => {
144+
const translateX = element.properties.translateX.distance * driver.progress + element.properties.translateX.start
145+
const translateY = element.properties.translateY.distance * driver.progress + element.properties.translateY.start
146+
const scale = element.properties.scale.distance * driver.progress + element.properties.scale.start
147+
const rotate = element.properties.rotate.distance * driver.progress + element.properties.rotate.start
148+
149+
element.domElement.style.setProperty('transform',
150+
// eslint-disable-next-line prefer-template
151+
'translate3d(' + translateX + 'px, ' + translateY + 'px, 0) '
152+
+ 'scale(' + scale + ') '
153+
+ 'rotate(' + rotate + 'deg')
90154
})
91155
},
92156
},
@@ -95,7 +159,7 @@ for (let i = 0; i < driverAmount; i++) {
95159

96160
const plugin = new TheSupersonicPlugin({
97161
drivers,
98-
debug: true,
99162
})
100163

164+
// @ts-expect-error foo
101165
window.plugin = plugin

lib/dist/Driver.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ declare class Helper {
4848
/** DOM element which is dynamically generated by plugin */
4949
domElement: HTMLElement;
5050
pluginId: string;
51-
constructor({ id, pluginId }: HelperConstructor);
51+
debug: boolean;
52+
constructor({ id, pluginId, debug }: HelperConstructor);
5253
/** Sets position of helper */
5354
updateLimits({ top, height }: HelperUpdateLimits): void;
5455
/** Deletes helper DOM element */

lib/dist/Driver.types.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export type BorderConstructor = {
6060
export type HelperConstructor = {
6161
id: string;
6262
pluginId: string;
63+
debug?: boolean;
6364
};
6465
export type UpdateLimits = {
6566
scroll: number;

lib/dist/TheSupersonicPlugin.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,12 @@ export declare class TheSupersonicPlugin {
3737
onResize: EventListener | null;
3838
/** You can store your custom data here to use between hooks */
3939
data: any;
40+
/** Make helper visible */
41+
debug: boolean;
4042
hooks: Hooks;
4143
driverInstances: Map<string, Driver>;
4244
driverActiveInstances: Set<Driver>;
43-
constructor({ drivers, hooks }: Configuration);
45+
constructor({ drivers, hooks, debug }: Configuration);
4446
/** Removes all of the plugin stuff (useful for SPA) */
4547
uninit(): void;
4648
/** Main rendering cycle. Active drivers are visible ones */

lib/dist/TheSupersonicPlugin.types.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { Configuration as DriverConfiguration } from './Driver.types';
22
import { TheSupersonicPlugin } from './TheSupersonicPlugin';
33

44
export type Configuration = {
5-
hooks?: Hooks;
65
drivers: DriverConfiguration;
6+
hooks?: Hooks;
7+
debug?: boolean;
78
};
89
export type Hooks = {
910
onBeforeInit?: (object: {

0 commit comments

Comments
 (0)