diff --git a/package-lock.json b/package-lock.json index cb33004..4dea9a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,20 @@ { - "name": "bartindustries-svelte", + "name": "adsite", "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "bartindustries-svelte", + "name": "adsite", "version": "0.0.1", "dependencies": { "@fontsource/fira-mono": "^4.5.0", "@lukeed/uuid": "^2.0.0", + "@splidejs/splide-extension-auto-scroll": "^0.3.7", + "@splidejs/svelte-splide": "^0.1.18", "cookie": "^0.4.1", + "simple-svelte-slideshow": "^1.0.0", + "three": "^0.138.0", "vanilla-tilt": "^1.7.2" }, "devDependencies": { @@ -29,6 +33,7 @@ "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", + "svelthree": "^0.119.0-5", "tailwindcss": "^3.0.17", "tslib": "^2.3.1", "typescript": "^4.4.3" @@ -251,6 +256,11 @@ "node": ">= 8" } }, + "node_modules/@polka/url": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz", + "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==" + }, "node_modules/@rollup/pluginutils": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz", @@ -264,6 +274,24 @@ "node": ">= 8.0.0" } }, + "node_modules/@splidejs/splide": { + "version": "3.6.12", + "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-3.6.12.tgz", + "integrity": "sha512-ggOUAuSxjWuxxL0IQEZcux26KByfKWfYM2HYmvDBdxkXc5evVW+xuECO+3iuciyrJpgcbYTr4hn0cHfbNlYIeA==" + }, + "node_modules/@splidejs/splide-extension-auto-scroll": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/@splidejs/splide-extension-auto-scroll/-/splide-extension-auto-scroll-0.3.7.tgz", + "integrity": "sha512-PzgXC68Ey5XIHQQYwcJcY6EeZN5SDWu5xxFnOfupPnNZyKMKtHZWv0GTCyT5eI1WV50bi1YbIKJD2UOjf+eHIg==" + }, + "node_modules/@splidejs/svelte-splide": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@splidejs/svelte-splide/-/svelte-splide-0.1.18.tgz", + "integrity": "sha512-R/19qmvSSCwdcBv1pfRCWRwrXfDvMY5epB7LW1vkSo5kzNvv56fjPurmJjkzHDHdrvh9Kr83SAF33jj7BLZjbg==", + "dependencies": { + "@splidejs/splide": "^3.6.12" + } + }, "node_modules/@sveltejs/adapter-auto": { "version": "1.0.0-next.18", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.18.tgz", @@ -903,6 +931,14 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "node_modules/console-clear": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz", + "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==", + "engines": { + "node": ">=4" + } + }, "node_modules/cookie": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", @@ -1760,6 +1796,14 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "node_modules/get-port": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz", + "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=", + "engines": { + "node": ">=4" + } + }, "node_modules/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -2065,6 +2109,14 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/local-access": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz", + "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==", + "engines": { + "node": ">=6" + } + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -2120,6 +2172,17 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -2163,7 +2226,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==", - "dev": true, "engines": { "node": ">=4" } @@ -2639,7 +2701,6 @@ "version": "1.8.1", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==", - "dev": true, "dependencies": { "mri": "^1.1.0" }, @@ -2707,6 +2768,54 @@ "node": ">=8" } }, + "node_modules/simple-svelte-slideshow": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/simple-svelte-slideshow/-/simple-svelte-slideshow-1.0.0.tgz", + "integrity": "sha512-XRfreMgxNzh+pmg1nKQx0AXrCzPex6utLVElZDxpujDThXsll4Kydhj9hG2BAMNKpnC0Ut3RVZzCjBah0FDwZQ==", + "dependencies": { + "sirv-cli": "^0.4.4" + } + }, + "node_modules/sirv": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz", + "integrity": "sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==", + "dependencies": { + "@polka/url": "^0.5.0", + "mime": "^2.3.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sirv-cli": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz", + "integrity": "sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==", + "dependencies": { + "console-clear": "^1.1.0", + "get-port": "^3.2.0", + "kleur": "^3.0.0", + "local-access": "^1.0.1", + "sade": "^1.4.0", + "sirv": "^0.4.6", + "tinydate": "^1.0.0" + }, + "bin": { + "sirv": "index.js" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/sirv-cli/node_modules/kleur": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", + "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", + "engines": { + "node": ">=6" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -2959,6 +3068,21 @@ } } }, + "node_modules/svelthree": { + "version": "0.119.0-5", + "resolved": "https://registry.npmjs.org/svelthree/-/svelthree-0.119.0-5.tgz", + "integrity": "sha512-5niteQrl5l7evhSSkfcf/I8FSccZD39kLnEZBKmnSJYwUon87fDnO8+maOzxcFBaWEOM1RdRcGy9J0LdXbLfrQ==", + "dev": true, + "dependencies": { + "svelthree-three": "git+https://github.com/vatro/svelthree-three.git#119" + } + }, + "node_modules/svelthree-three": { + "version": "0.119.1", + "resolved": "git+ssh://git@github.com/vatro/svelthree-three.git#3a0c78631b9382179828c1ace0edb83df541a6a1", + "dev": true, + "license": "MIT" + }, "node_modules/table": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", @@ -3054,6 +3178,11 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "node_modules/three": { + "version": "0.138.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.138.0.tgz", + "integrity": "sha512-xM/WwUd53ClkbHFrftW29aIzMVvyhj4rSZmIVgn6hZ/kYB7aMjDD8FFy4VJamygXSrldJuOgEJuaI+E+8mt/KA==" + }, "node_modules/tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", @@ -3064,6 +3193,14 @@ "globrex": "^0.1.2" } }, + "node_modules/tinydate": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", + "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==", + "engines": { + "node": ">=4" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3435,6 +3572,11 @@ "fastq": "^1.6.0" } }, + "@polka/url": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz", + "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==" + }, "@rollup/pluginutils": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.2.tgz", @@ -3445,6 +3587,24 @@ "picomatch": "^2.2.2" } }, + "@splidejs/splide": { + "version": "3.6.12", + "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-3.6.12.tgz", + "integrity": "sha512-ggOUAuSxjWuxxL0IQEZcux26KByfKWfYM2HYmvDBdxkXc5evVW+xuECO+3iuciyrJpgcbYTr4hn0cHfbNlYIeA==" + }, + "@splidejs/splide-extension-auto-scroll": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/@splidejs/splide-extension-auto-scroll/-/splide-extension-auto-scroll-0.3.7.tgz", + "integrity": "sha512-PzgXC68Ey5XIHQQYwcJcY6EeZN5SDWu5xxFnOfupPnNZyKMKtHZWv0GTCyT5eI1WV50bi1YbIKJD2UOjf+eHIg==" + }, + "@splidejs/svelte-splide": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/@splidejs/svelte-splide/-/svelte-splide-0.1.18.tgz", + "integrity": "sha512-R/19qmvSSCwdcBv1pfRCWRwrXfDvMY5epB7LW1vkSo5kzNvv56fjPurmJjkzHDHdrvh9Kr83SAF33jj7BLZjbg==", + "requires": { + "@splidejs/splide": "^3.6.12" + } + }, "@sveltejs/adapter-auto": { "version": "1.0.0-next.18", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0-next.18.tgz", @@ -3875,6 +4035,11 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "console-clear": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz", + "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==" + }, "cookie": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", @@ -4478,6 +4643,11 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "get-port": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz", + "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=" + }, "glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -4714,6 +4884,11 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "local-access": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz", + "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==" + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4760,6 +4935,11 @@ "picomatch": "^2.2.3" } }, + "mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==" + }, "min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -4793,8 +4973,7 @@ "mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", - "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==", - "dev": true + "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==" }, "ms": { "version": "2.1.2", @@ -5091,7 +5270,6 @@ "version": "1.8.1", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==", - "dev": true, "requires": { "mri": "^1.1.0" } @@ -5143,6 +5321,44 @@ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true }, + "simple-svelte-slideshow": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/simple-svelte-slideshow/-/simple-svelte-slideshow-1.0.0.tgz", + "integrity": "sha512-XRfreMgxNzh+pmg1nKQx0AXrCzPex6utLVElZDxpujDThXsll4Kydhj9hG2BAMNKpnC0Ut3RVZzCjBah0FDwZQ==", + "requires": { + "sirv-cli": "^0.4.4" + } + }, + "sirv": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz", + "integrity": "sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==", + "requires": { + "@polka/url": "^0.5.0", + "mime": "^2.3.1" + } + }, + "sirv-cli": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz", + "integrity": "sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==", + "requires": { + "console-clear": "^1.1.0", + "get-port": "^3.2.0", + "kleur": "^3.0.0", + "local-access": "^1.0.1", + "sade": "^1.4.0", + "sirv": "^0.4.6", + "tinydate": "^1.0.0" + }, + "dependencies": { + "kleur": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", + "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==" + } + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -5290,6 +5506,20 @@ "strip-indent": "^3.0.0" } }, + "svelthree": { + "version": "0.119.0-5", + "resolved": "https://registry.npmjs.org/svelthree/-/svelthree-0.119.0-5.tgz", + "integrity": "sha512-5niteQrl5l7evhSSkfcf/I8FSccZD39kLnEZBKmnSJYwUon87fDnO8+maOzxcFBaWEOM1RdRcGy9J0LdXbLfrQ==", + "dev": true, + "requires": { + "svelthree-three": "git+https://github.com/vatro/svelthree-three.git#119" + } + }, + "svelthree-three": { + "version": "git+ssh://git@github.com/vatro/svelthree-three.git#3a0c78631b9382179828c1ace0edb83df541a6a1", + "dev": true, + "from": "svelthree-three@git+https://github.com/vatro/svelthree-three.git#119" + }, "table": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz", @@ -5368,6 +5598,11 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "three": { + "version": "0.138.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.138.0.tgz", + "integrity": "sha512-xM/WwUd53ClkbHFrftW29aIzMVvyhj4rSZmIVgn6hZ/kYB7aMjDD8FFy4VJamygXSrldJuOgEJuaI+E+8mt/KA==" + }, "tiny-glob": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz", @@ -5378,6 +5613,11 @@ "globrex": "^0.1.2" } }, + "tinydate": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", + "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==" + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index e4bf86e..e5ce244 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "bartindustries-svelte", + "name": "adsite", "version": "0.0.1", "scripts": { "dev": "svelte-kit dev", @@ -27,6 +27,7 @@ "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", + "svelthree": "^0.119.0-5", "tailwindcss": "^3.0.17", "tslib": "^2.3.1", "typescript": "^4.4.3" @@ -34,7 +35,11 @@ "dependencies": { "@fontsource/fira-mono": "^4.5.0", "@lukeed/uuid": "^2.0.0", + "@splidejs/splide-extension-auto-scroll": "^0.3.7", + "@splidejs/svelte-splide": "^0.1.18", "cookie": "^0.4.1", + "simple-svelte-slideshow": "^1.0.0", + "three": "^0.138.0", "vanilla-tilt": "^1.7.2" }, "type": "module" diff --git a/src/app.css b/src/app.css index 215fbaf..7c8bbb9 100644 --- a/src/app.css +++ b/src/app.css @@ -9,6 +9,11 @@ src: url('/fonts/BaronNeue-Black.otf'); } +@font-face { + font-family: 'BaronLight'; + src: url('/fonts/BaronNeue-Regular.otf'); +} + :root { font-family: 'Roboto', sans-serif; } @@ -17,6 +22,15 @@ font-family: 'Baron', sans-serif; } +.baron-light { + font-family: 'BaronLight', sans-serif; +} + +hr { + border-color: white; + border-width: 2px; +} + #svelte { min-height: 100vh; display: flex; diff --git a/src/app.html b/src/app.html index 162a3a6..71b288c 100644 --- a/src/app.html +++ b/src/app.html @@ -7,8 +7,7 @@ %svelte.head% - +
%svelte.body%
- diff --git a/src/lib/BigBoysClub.svelte b/src/lib/BigBoysClub.svelte new file mode 100644 index 0000000..dfb5a24 --- /dev/null +++ b/src/lib/BigBoysClub.svelte @@ -0,0 +1,19 @@ + + +
+
+

BIG

+
Boys Club
+
+

+ Big Boys Club a place focused on the Macro/Micro Size community. + It is inclusive to all kinds and types be that giantess, destruction, vore, toyplay, mmd or anything else. +

+
+ + Join the Discord + +
+
\ No newline at end of file diff --git a/src/lib/Blog.svelte b/src/lib/Blog.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Dash.svelte b/src/lib/Dash.svelte new file mode 100644 index 0000000..c1c9a02 --- /dev/null +++ b/src/lib/Dash.svelte @@ -0,0 +1,20 @@ + + +
+
+
+

Subject name: {Mid['name']}

+

Vitals OK

+

{Mid['heightcm']} cm tall

+

Weighs {Mid['weightkg']} kg

+
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/lib/Socials.svelte b/src/lib/Socials.svelte index ffcf93b..4a24f2a 100644 --- a/src/lib/Socials.svelte +++ b/src/lib/Socials.svelte @@ -4,27 +4,15 @@ - - diff --git a/src/lib/elements/AnchorButton.svelte b/src/lib/elements/AnchorButton.svelte index b0a6a44..ccd478e 100644 --- a/src/lib/elements/AnchorButton.svelte +++ b/src/lib/elements/AnchorButton.svelte @@ -1,10 +1,12 @@ diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte index 3ff7ccb..db01362 100644 --- a/src/lib/footer/Footer.svelte +++ b/src/lib/footer/Footer.svelte @@ -1,29 +1,24 @@ -
+
+ +
-

Bart Industries

-
+

Midblep // hugegrowingcat

Copyright 2022 Mid

-
- Theme: - -
diff --git a/src/lib/footer/Social.svelte b/src/lib/footer/Social.svelte index 30bebd6..e5ae29f 100644 --- a/src/lib/footer/Social.svelte +++ b/src/lib/footer/Social.svelte @@ -13,5 +13,5 @@ class="text-xs flex flex-col justify-center hover:scale-110 duration-150" > {icon} - {text} + {text} diff --git a/src/lib/header/Button.svelte b/src/lib/header/Button.svelte index b5ba14c..252c0ee 100644 --- a/src/lib/header/Button.svelte +++ b/src/lib/header/Button.svelte @@ -1,27 +1,37 @@ diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte index 6d49485..28bab76 100644 --- a/src/lib/header/Header.svelte +++ b/src/lib/header/Header.svelte @@ -3,7 +3,7 @@
diff --git a/src/lib/macromarch/Feed.svelte b/src/lib/macromarch/Feed.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/mid.json b/src/lib/mid.json new file mode 100644 index 0000000..fcea047 --- /dev/null +++ b/src/lib/mid.json @@ -0,0 +1,5 @@ +{ + "name": "Midnight", + "heightcm": "200", + "weightkg": "600" +} \ No newline at end of file diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte deleted file mode 100644 index ce76694..0000000 --- a/src/routes/__error.svelte +++ /dev/null @@ -1,3 +0,0 @@ -
-

Error

-
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index af6f0cc..d52ff5b 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -6,14 +6,18 @@ import "../app.css"; -
- +
+
+ -
-
+
+
- -
+
+ +
+
-
-
+
+
diff --git a/src/routes/characters.svelte b/src/routes/characters.svelte new file mode 100644 index 0000000..9bf883f --- /dev/null +++ b/src/routes/characters.svelte @@ -0,0 +1,245 @@ + + +
+ +
+

Characters

+
+
+ +
+
+
+ + {#each images as image} + + Mid + + {/each} + +
+
+ +
+
+

+ Midnight + // + Mid + // + Midblep +

+

+ Mid is a tall black cat. He is quite the gentleman but can get rough and dirty if need be. He is part of the Thallium military, working as an Engineer on the newest technologies. + He has created his companion Truxton, which helps him through life. +

+

+ In actuality however, Mid is a universal entity that transcends into the 4th dimension of time. + His embodiment is a supermassive black hole that encompasses all of livable reality, its multiverses and alternate timelines and everything else. + All of creation is a part of him, and so he often manifests inside of the infinite worlds inside of him as this black cat. + However, it varies massively from reality to reality as he likes to artificially limit his own capabilities to enact some fun scenarios to cure his boredom with. + These adventures often lead to growth, worship or other indulgences. +

+

+ The God does have a weak spot though. Provoke him enough in places where it hurts most, like size, and another being may force its way out of him. + That being is Shenrock, an utterly evil and destructive dark version of the cat. It will seek to permanently destroy and kill, corrupting everything in its path until it has gotten its revenge. +

+
+
+
+ +
+
+

+ Koffie + // + Coffee +

+

+ Koffie is one of Mid's accidental creations of life early on. He is a tall Rexouium with warm brown, black, white and orange colors that are themed after coffee. + His body is made out of the substance of coffee, milk and similar things. He has partial control over its composition which makes him able to pour you a cup of coffee out of his fingers by temporarily making that part of him fluid. +

+

+ Drinking or coming in contact with coffee-related substances will cause him to absorb it and grow in overall size. + Unfortunately enough he is also an addict that will do anything to get a cup, and can smell coffee from miles away. But he is not shy to share if he's in a good mood. + All of this coffee has also resulted in him becoming a complete Insomniac. +

+
+
+ +
+
+
+
+

Martin

+

+ Martin is a short Pine Marten with brown fur that also works in the Thallium military. + He is quite shy and unconfident, but loves to help Mid whenever he can and practically sees him as his big bro or dad considering he never had one. + With a long flexible body he can fit in a lot of places which makes him very useful. +

+

+ Martin has the special trait that if he is belittled or made fun of, his body can't help but start to steal the size of the parties that are making fun of him pretty much until he feels safe again. + In particularly bad situations the ratio that is being converted might even be 2:1 or more, meaning he'll grow 2m for every meter stolen from a single person involved. + The only way he is able to shrink back is with Truxton, which was the first machine able to compress someone's size just as it did for Mid. +

+
+ +
+ +
+
+
+
+ +
+
+ +
+ +
+
+

Seffy

+

+ Seffy is a happy, but rather subby, Truxtion. He is an Electrical Engineer at a no-name company and is good at what he does. + He is part of Batch 3 of the Truxtion shells and is uniquely modified. Instead of being hooked up to Truxton's network, Seffy has his own mind and internaly independent of the hive-mind. + Seffy loves to attach various accessories to his modular body, most notably a set of tails. He is often seen with an oversized shark tail. +

+

+ His biggest modification is to how he is powered. Inside he is entirely hollow to house his fuel. This fuel can be any liquid, as long as it has a form of energy to be consumed. + Since Seffy was specially constructed to relieve Mid, this liquid often tends to be his cum. The inlet port is his tail, which can click off with a lock to reveal a hole. +

+

+ Because Mid is very potent Seffy could never hold everything, so there is a way to relieve internal pressure to safe levels so he won't burst under the pressure. + This is done by simply expanding his form, thus making him grow bigger. He returns back to normal as he empties out or uses the fuel over time. +

+
+
+
+ +
+
+

Other characters

+ +
+
+

Truxton

+

+ Truxton is more of a mind than any physical thing. +

+
+
+

Dunky

+

+ Dunky is a sentient worm-on-a-string, one of those old toys. He has no mouth and cannot talk, but he can communicate effectively and makes for the best hugger. + Though he is quite big, easily 10 meters in length, and could serve as a pillow or bed as well. +

+

+ He likes to put things on his string almost like a tool slot. + His pattern is themed after the Asexual flag, representing some of my feelings towards traditional physical intimacy. + Because of that he is completely Safe For Work. +

+ +
+
+

Sprocket

+

+ Mid is a universal entity that transcends even the 4th dimension, he can do anything from turning into other creatures to making himself and others hyper, to even manipulating the world and objects around him, his only rule is to not mess with souls as this tampers with the fabric of life itself. Mid can be any size he wants to be and can be in any scenario since he is reality itself, he only limits himself from his true godhood so his eternal existence doesn't get boring for him. +

+
+
+

Shiba

+

+ Mid is a universal entity that transcends even the 4th dimension, he can do anything from turning into other creatures to making himself and others hyper, to even manipulating the world and objects around him, his only rule is to not mess with souls as this tampers with the fabric of life itself. Mid can be any size he wants to be and can be in any scenario since he is reality itself, he only limits himself from his true godhood so his eternal existence doesn't get boring for him. +

+
+
+

Friction

+

+ Mid is a universal entity that transcends even the 4th dimension, he can do anything from turning into other creatures to making himself and others hyper, to even manipulating the world and objects around him, his only rule is to not mess with souls as this tampers with the fabric of life itself. Mid can be any size he wants to be and can be in any scenario since he is reality itself, he only limits himself from his true godhood so his eternal existence doesn't get boring for him. +

+
+
+
+
+ +
\ No newline at end of file diff --git a/src/routes/esu.svelte b/src/routes/esu.svelte deleted file mode 100644 index 3d155bc..0000000 --- a/src/routes/esu.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - - Home - - -
- -
-
- -
-
- -
-

easter system

UNIVERSE

-
-
- -
-
-
- -
- - \ No newline at end of file diff --git a/src/routes/furry.svelte b/src/routes/furry.svelte deleted file mode 100644 index 6d86244..0000000 --- a/src/routes/furry.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - Home - - -
diff --git a/src/routes/index.svelte b/src/routes/index.svelte index f524edf..a4d3ac2 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,15 +1,16 @@ - Home | Bart Industries + Mid's Domain
-
+
diff --git a/src/routes/macromarch/index.svelte b/src/routes/macromarch/index.svelte new file mode 100644 index 0000000..ea334a7 --- /dev/null +++ b/src/routes/macromarch/index.svelte @@ -0,0 +1,7 @@ + +
+ +
\ No newline at end of file diff --git a/src/routes/portfolio.svelte b/src/routes/portfolio.svelte deleted file mode 100644 index 6d86244..0000000 --- a/src/routes/portfolio.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - Home - - -
diff --git a/src/routes/works.svelte b/src/routes/works.svelte deleted file mode 100644 index 6d86244..0000000 --- a/src/routes/works.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - Home - - -
diff --git a/static/banner3.png b/static/banner3.png deleted file mode 100644 index 2999907..0000000 Binary files a/static/banner3.png and /dev/null differ diff --git a/static/banner6.png b/static/banner6.png deleted file mode 100644 index d051bbb..0000000 Binary files a/static/banner6.png and /dev/null differ diff --git a/static/banner8.png b/static/banner8.png deleted file mode 100644 index a47c6f6..0000000 Binary files a/static/banner8.png and /dev/null differ diff --git a/static/dunky.png b/static/dunky.png new file mode 100644 index 0000000..abfc7a4 Binary files /dev/null and b/static/dunky.png differ diff --git a/static/grow.png b/static/grow.png new file mode 100644 index 0000000..5ad5481 Binary files /dev/null and b/static/grow.png differ diff --git a/static/image0.png b/static/image0.png new file mode 100644 index 0000000..30fd32e Binary files /dev/null and b/static/image0.png differ diff --git a/static/images/bbc.png b/static/images/bbc.png new file mode 100644 index 0000000..a66f6e7 Binary files /dev/null and b/static/images/bbc.png differ diff --git a/static/images/footer/bbc.png b/static/images/footer/bbc.png new file mode 100644 index 0000000..69f6a9e Binary files /dev/null and b/static/images/footer/bbc.png differ diff --git a/static/images/footer/bigboysclub.png b/static/images/footer/bigboysclub.png new file mode 100644 index 0000000..a0fca45 Binary files /dev/null and b/static/images/footer/bigboysclub.png differ diff --git a/static/images/mid/image1.png b/static/images/mid/image1.png new file mode 100644 index 0000000..034dcdc Binary files /dev/null and b/static/images/mid/image1.png differ diff --git a/static/images/mid/image10.jpg b/static/images/mid/image10.jpg new file mode 100644 index 0000000..3e81ae7 Binary files /dev/null and b/static/images/mid/image10.jpg differ diff --git a/static/images/mid/image11.png b/static/images/mid/image11.png new file mode 100644 index 0000000..51dfcaa Binary files /dev/null and b/static/images/mid/image11.png differ diff --git a/static/images/mid/image12.jpg b/static/images/mid/image12.jpg new file mode 100644 index 0000000..7eeebf4 Binary files /dev/null and b/static/images/mid/image12.jpg differ diff --git a/static/banner5.jpeg b/static/images/mid/image13.jpeg similarity index 100% rename from static/banner5.jpeg rename to static/images/mid/image13.jpeg diff --git a/static/images/mid/image14.png b/static/images/mid/image14.png new file mode 100644 index 0000000..30fd32e Binary files /dev/null and b/static/images/mid/image14.png differ diff --git a/static/images/mid/image15.PNG b/static/images/mid/image15.PNG new file mode 100644 index 0000000..0c06f53 Binary files /dev/null and b/static/images/mid/image15.PNG differ diff --git a/static/images/mid/image16.PNG b/static/images/mid/image16.PNG new file mode 100644 index 0000000..05e9eac Binary files /dev/null and b/static/images/mid/image16.PNG differ diff --git a/static/images/mid/image2.jpg b/static/images/mid/image2.jpg new file mode 100644 index 0000000..ccc4a11 Binary files /dev/null and b/static/images/mid/image2.jpg differ diff --git a/static/images/mid/image21.jpg b/static/images/mid/image21.jpg new file mode 100644 index 0000000..f56e4da Binary files /dev/null and b/static/images/mid/image21.jpg differ diff --git a/static/images/mid/image22.png b/static/images/mid/image22.png new file mode 100644 index 0000000..c23600c Binary files /dev/null and b/static/images/mid/image22.png differ diff --git a/static/banner1.png b/static/images/mid/image23.png similarity index 100% rename from static/banner1.png rename to static/images/mid/image23.png diff --git a/static/banner4.png b/static/images/mid/image24.png similarity index 100% rename from static/banner4.png rename to static/images/mid/image24.png diff --git a/static/banner2.png b/static/images/mid/image25.png similarity index 100% rename from static/banner2.png rename to static/images/mid/image25.png diff --git a/static/images/mid/image27.png b/static/images/mid/image27.png new file mode 100644 index 0000000..29b7ea0 Binary files /dev/null and b/static/images/mid/image27.png differ diff --git a/static/images/mid/image28.jpg b/static/images/mid/image28.jpg new file mode 100644 index 0000000..51fb6f1 Binary files /dev/null and b/static/images/mid/image28.jpg differ diff --git a/static/images/mid/image29.png b/static/images/mid/image29.png new file mode 100644 index 0000000..7e33fd2 Binary files /dev/null and b/static/images/mid/image29.png differ diff --git a/static/images/mid/image3.png b/static/images/mid/image3.png new file mode 100644 index 0000000..73c5410 Binary files /dev/null and b/static/images/mid/image3.png differ diff --git a/static/images/mid/image31.jpg b/static/images/mid/image31.jpg new file mode 100644 index 0000000..0e532a8 Binary files /dev/null and b/static/images/mid/image31.jpg differ diff --git a/static/images/mid/image33.png b/static/images/mid/image33.png new file mode 100644 index 0000000..e8d4c92 Binary files /dev/null and b/static/images/mid/image33.png differ diff --git a/static/images/mid/image35.jpg b/static/images/mid/image35.jpg new file mode 100644 index 0000000..e3fee62 Binary files /dev/null and b/static/images/mid/image35.jpg differ diff --git a/static/images/mid/image36.png b/static/images/mid/image36.png new file mode 100644 index 0000000..3575bf6 Binary files /dev/null and b/static/images/mid/image36.png differ diff --git a/static/images/mid/image37.png b/static/images/mid/image37.png new file mode 100644 index 0000000..a0fca45 Binary files /dev/null and b/static/images/mid/image37.png differ diff --git a/static/images/mid/image4.jpg b/static/images/mid/image4.jpg new file mode 100644 index 0000000..ec9f753 Binary files /dev/null and b/static/images/mid/image4.jpg differ diff --git a/static/images/mid/image5.png b/static/images/mid/image5.png new file mode 100644 index 0000000..6c928d5 Binary files /dev/null and b/static/images/mid/image5.png differ diff --git a/static/images/mid/image6.png b/static/images/mid/image6.png new file mode 100644 index 0000000..222aa86 Binary files /dev/null and b/static/images/mid/image6.png differ diff --git a/static/images/mid/image7.png b/static/images/mid/image7.png new file mode 100644 index 0000000..7da8954 Binary files /dev/null and b/static/images/mid/image7.png differ diff --git a/static/banner7.png b/static/images/mid/image8.png similarity index 100% rename from static/banner7.png rename to static/images/mid/image8.png diff --git a/static/images/mid/image9.gif b/static/images/mid/image9.gif new file mode 100644 index 0000000..6bcf9fd Binary files /dev/null and b/static/images/mid/image9.gif differ diff --git a/static/images/pattern5.png b/static/images/pattern5.png new file mode 100644 index 0000000..c455f68 Binary files /dev/null and b/static/images/pattern5.png differ diff --git a/static/images/seffy.png b/static/images/seffy.png new file mode 100644 index 0000000..4ca1bb1 Binary files /dev/null and b/static/images/seffy.png differ diff --git a/static/koffie.png b/static/koffie.png new file mode 100644 index 0000000..7cd4ae3 Binary files /dev/null and b/static/koffie.png differ diff --git a/static/martin.png b/static/martin.png new file mode 100644 index 0000000..36a6f65 Binary files /dev/null and b/static/martin.png differ diff --git a/static/martin2.png b/static/martin2.png new file mode 100644 index 0000000..ec849d3 Binary files /dev/null and b/static/martin2.png differ diff --git a/static/mid.png b/static/mid.png new file mode 100644 index 0000000..962e270 Binary files /dev/null and b/static/mid.png differ diff --git a/static/models/MaleCat.fbx b/static/models/MaleCat.fbx new file mode 100644 index 0000000..3e203b9 Binary files /dev/null and b/static/models/MaleCat.fbx differ diff --git a/static/seffy.png b/static/seffy.png new file mode 100644 index 0000000..7b864f9 Binary files /dev/null and b/static/seffy.png differ diff --git a/static/tilt.js b/static/tilt.js deleted file mode 100644 index 6beab04..0000000 --- a/static/tilt.js +++ /dev/null @@ -1,540 +0,0 @@ -var VanillaTilt = (function () { - 'use strict'; - - /** - * Created by Sergiu Șandor (micku7zu) on 1/27/2017. - * Original idea: https://github.com/gijsroge/tilt.js - * MIT License. - * Version 1.7.2 - */ - - class VanillaTilt { - constructor(element, settings = {}) { - if (!(element instanceof Node)) { - throw "Can't initialize VanillaTilt because " + element + ' is not a Node.'; - } - - this.width = null; - this.height = null; - this.clientWidth = null; - this.clientHeight = null; - this.left = null; - this.top = null; - - // for Gyroscope sampling - this.gammazero = null; - this.betazero = null; - this.lastgammazero = null; - this.lastbetazero = null; - - this.transitionTimeout = null; - this.updateCall = null; - this.event = null; - - this.updateBind = this.update.bind(this); - this.resetBind = this.reset.bind(this); - - this.element = element; - this.settings = this.extendSettings(settings); - - this.reverse = this.settings.reverse ? -1 : 1; - this.glare = VanillaTilt.isSettingTrue(this.settings.glare); - this.glarePrerender = VanillaTilt.isSettingTrue(this.settings['glare-prerender']); - this.fullPageListening = VanillaTilt.isSettingTrue(this.settings['full-page-listening']); - this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope); - this.gyroscopeSamples = this.settings.gyroscopeSamples; - - this.elementListener = this.getElementListener(); - - if (this.glare) { - this.prepareGlare(); - } - - if (this.fullPageListening) { - this.updateClientSize(); - } - - this.addEventListeners(); - this.reset(); - this.updateInitialPosition(); - } - - static isSettingTrue(setting) { - return setting === '' || setting === true || setting === 1; - } - - /** - * Method returns element what will be listen mouse events - * @return {Node} - */ - getElementListener() { - if (this.fullPageListening) { - return window.document; - } - - if (typeof this.settings['mouse-event-element'] === 'string') { - const mouseEventElement = document.querySelector(this.settings['mouse-event-element']); - - if (mouseEventElement) { - return mouseEventElement; - } - } - - if (this.settings['mouse-event-element'] instanceof Node) { - return this.settings['mouse-event-element']; - } - - return this.element; - } - - /** - * Method set listen methods for this.elementListener - * @return {Node} - */ - addEventListeners() { - this.onMouseEnterBind = this.onMouseEnter.bind(this); - this.onMouseMoveBind = this.onMouseMove.bind(this); - this.onMouseLeaveBind = this.onMouseLeave.bind(this); - this.onWindowResizeBind = this.onWindowResize.bind(this); - this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this); - - this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind); - this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind); - this.elementListener.addEventListener('mousemove', this.onMouseMoveBind); - - if (this.glare || this.fullPageListening) { - window.addEventListener('resize', this.onWindowResizeBind); - } - - if (this.gyroscope) { - window.addEventListener('deviceorientation', this.onDeviceOrientationBind); - } - } - - /** - * Method remove event listeners from current this.elementListener - */ - removeEventListeners() { - this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind); - this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind); - this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind); - - if (this.gyroscope) { - window.removeEventListener('deviceorientation', this.onDeviceOrientationBind); - } - - if (this.glare || this.fullPageListening) { - window.removeEventListener('resize', this.onWindowResizeBind); - } - } - - destroy() { - clearTimeout(this.transitionTimeout); - if (this.updateCall !== null) { - cancelAnimationFrame(this.updateCall); - } - - this.reset(); - - this.removeEventListeners(); - this.element.vanillaTilt = null; - delete this.element.vanillaTilt; - - this.element = null; - } - - onDeviceOrientation(event) { - if (event.gamma === null || event.beta === null) { - return; - } - - this.updateElementPosition(); - - if (this.gyroscopeSamples > 0) { - this.lastgammazero = this.gammazero; - this.lastbetazero = this.betazero; - - if (this.gammazero === null) { - this.gammazero = event.gamma; - this.betazero = event.beta; - } else { - this.gammazero = (event.gamma + this.lastgammazero) / 2; - this.betazero = (event.beta + this.lastbetazero) / 2; - } - - this.gyroscopeSamples -= 1; - } - - const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX; - const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY; - - const degreesPerPixelX = totalAngleX / this.width; - const degreesPerPixelY = totalAngleY / this.height; - - const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero); - const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero); - - const posX = angleX / degreesPerPixelX; - const posY = angleY / degreesPerPixelY; - - if (this.updateCall !== null) { - cancelAnimationFrame(this.updateCall); - } - - this.event = { - clientX: posX + this.left, - clientY: posY + this.top - }; - - this.updateCall = requestAnimationFrame(this.updateBind); - } - - onMouseEnter() { - this.updateElementPosition(); - this.element.style.willChange = 'transform'; - this.setTransition(); - } - - onMouseMove(event) { - if (this.updateCall !== null) { - cancelAnimationFrame(this.updateCall); - } - - this.event = event; - this.updateCall = requestAnimationFrame(this.updateBind); - } - - onMouseLeave() { - this.setTransition(); - - if (this.settings.reset) { - requestAnimationFrame(this.resetBind); - } - } - - reset() { - this.event = { - clientX: this.left + this.width / 2, - clientY: this.top + this.height / 2 - }; - - if (this.element && this.element.style) { - this.element.style.transform = - `perspective(${this.settings.perspective}px) ` + - `rotateX(0deg) ` + - `rotateY(0deg) ` + - `scale3d(1, 1, 1)`; - } - - this.resetGlare(); - } - - resetGlare() { - if (this.glare) { - this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)'; - this.glareElement.style.opacity = '0'; - } - } - - updateInitialPosition() { - if (this.settings.startX === 0 && this.settings.startY === 0) { - return; - } - - this.onMouseEnter(); - - if (this.fullPageListening) { - this.event = { - clientX: - ((this.settings.startX + this.settings.max) / (2 * this.settings.max)) * - this.clientWidth, - clientY: - ((this.settings.startY + this.settings.max) / (2 * this.settings.max)) * - this.clientHeight - }; - } else { - this.event = { - clientX: - this.left + - ((this.settings.startX + this.settings.max) / (2 * this.settings.max)) * this.width, - clientY: - this.top + - ((this.settings.startY + this.settings.max) / (2 * this.settings.max)) * this.height - }; - } - - let backupScale = this.settings.scale; - this.settings.scale = 1; - this.update(); - this.settings.scale = backupScale; - this.resetGlare(); - } - - getValues() { - let x, y; - - if (this.fullPageListening) { - x = this.event.clientX / this.clientWidth; - y = this.event.clientY / this.clientHeight; - } else { - x = (this.event.clientX - this.left) / this.width; - y = (this.event.clientY - this.top) / this.height; - } - - x = Math.min(Math.max(x, 0), 1); - y = Math.min(Math.max(y, 0), 1); - - let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2); - let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2); - let angle = - Math.atan2( - this.event.clientX - (this.left + this.width / 2), - -(this.event.clientY - (this.top + this.height / 2)) - ) * - (180 / Math.PI); - - return { - tiltX: tiltX, - tiltY: tiltY, - percentageX: x * 100, - percentageY: y * 100, - angle: angle - }; - } - - updateElementPosition() { - let rect = this.element.getBoundingClientRect(); - - this.width = this.element.offsetWidth; - this.height = this.element.offsetHeight; - this.left = rect.left; - this.top = rect.top; - } - - update() { - let values = this.getValues(); - - this.element.style.transform = - 'perspective(' + - this.settings.perspective + - 'px) ' + - 'rotateX(' + - (this.settings.axis === 'x' ? 0 : values.tiltY) + - 'deg) ' + - 'rotateY(' + - (this.settings.axis === 'y' ? 0 : values.tiltX) + - 'deg) ' + - 'scale3d(' + - this.settings.scale + - ', ' + - this.settings.scale + - ', ' + - this.settings.scale + - ')'; - - if (this.glare) { - this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`; - this.glareElement.style.opacity = `${ - (values.percentageY * this.settings['max-glare']) / 100 - }`; - } - - this.element.dispatchEvent( - new CustomEvent('tiltChange', { - detail: values - }) - ); - - this.updateCall = null; - } - - /** - * Appends the glare element (if glarePrerender equals false) - * and sets the default style - */ - prepareGlare() { - // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. - if (!this.glarePrerender) { - // Create glare element - const jsTiltGlare = document.createElement('div'); - jsTiltGlare.classList.add('js-tilt-glare'); - - const jsTiltGlareInner = document.createElement('div'); - jsTiltGlareInner.classList.add('js-tilt-glare-inner'); - - jsTiltGlare.appendChild(jsTiltGlareInner); - this.element.appendChild(jsTiltGlare); - } - - this.glareElementWrapper = this.element.querySelector('.js-tilt-glare'); - this.glareElement = this.element.querySelector('.js-tilt-glare-inner'); - - if (this.glarePrerender) { - return; - } - - Object.assign(this.glareElementWrapper.style, { - position: 'absolute', - top: '0', - left: '0', - width: '100%', - height: '100%', - overflow: 'hidden', - 'pointer-events': 'none' - }); - - Object.assign(this.glareElement.style, { - position: 'absolute', - top: '50%', - left: '50%', - 'pointer-events': 'none', - 'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, - transform: 'rotate(180deg) translate(-50%, -50%)', - 'transform-origin': '0% 0%', - opacity: '0' - }); - - this.updateGlareSize(); - } - - updateGlareSize() { - if (this.glare) { - const glareSize = - (this.element.offsetWidth > this.element.offsetHeight - ? this.element.offsetWidth - : this.element.offsetHeight) * 2; - - Object.assign(this.glareElement.style, { - width: `${glareSize}px`, - height: `${glareSize}px` - }); - } - } - - updateClientSize() { - this.clientWidth = - window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; - - this.clientHeight = - window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; - } - - onWindowResize() { - this.updateGlareSize(); - this.updateClientSize(); - } - - setTransition() { - clearTimeout(this.transitionTimeout); - this.element.style.transition = this.settings.speed + 'ms ' + this.settings.easing; - if (this.glare) - this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`; - - this.transitionTimeout = setTimeout(() => { - this.element.style.transition = ''; - if (this.glare) { - this.glareElement.style.transition = ''; - } - }, this.settings.speed); - } - - /** - * Method return patched settings of instance - * @param {boolean} settings.reverse - reverse the tilt direction - * @param {number} settings.max - max tilt rotation (degrees) - * @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0 - * @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0 - * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets - * @param {string} settings.easing - Easing on enter/exit - * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc.. - * @param {number} settings.speed - Speed of the enter/exit transition - * @param {boolean} settings.transition - Set a transition on enter/exit - * @param {string|null} settings.axis - What axis should be disabled. Can be X or Y - * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y - * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%) - * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise - * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element - * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events - * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit - * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events - * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc.. - * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position. - */ - extendSettings(settings) { - let defaultSettings = { - reverse: false, - max: 15, - startX: 0, - startY: 0, - perspective: 1000, - easing: 'cubic-bezier(.03,.98,.52,.99)', - scale: 1, - speed: 300, - transition: true, - axis: null, - glare: false, - 'max-glare': 1, - 'glare-prerender': false, - 'full-page-listening': false, - 'mouse-event-element': null, - reset: true, - gyroscope: true, - gyroscopeMinAngleX: -45, - gyroscopeMaxAngleX: 45, - gyroscopeMinAngleY: -45, - gyroscopeMaxAngleY: 45, - gyroscopeSamples: 10 - }; - - let newSettings = {}; - for (var property in defaultSettings) { - if (property in settings) { - newSettings[property] = settings[property]; - } else if (this.element.hasAttribute('data-tilt-' + property)) { - let attribute = this.element.getAttribute('data-tilt-' + property); - try { - newSettings[property] = JSON.parse(attribute); - } catch (e) { - newSettings[property] = attribute; - } - } else { - newSettings[property] = defaultSettings[property]; - } - } - - return newSettings; - } - - static init(elements, settings) { - if (elements instanceof Node) { - elements = [elements]; - } - - if (elements instanceof NodeList) { - elements = [].slice.call(elements); - } - - if (!(elements instanceof Array)) { - return; - } - - elements.forEach((element) => { - if (!('vanillaTilt' in element)) { - element.vanillaTilt = new VanillaTilt(element, settings); - } - }); - } - } - - if (typeof document !== 'undefined') { - /* expose the class to window */ - window.VanillaTilt = VanillaTilt; - - /** - * Auto load - */ - VanillaTilt.init(document.querySelectorAll('[data-tilt]')); - } - - return VanillaTilt; -})();