+ 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 @@
-
+
+
+
\ No newline at end of file
diff --git a/src/lib/home/Banner.svelte b/src/lib/home/Banner.svelte
index c0c01a0..8547afd 100644
--- a/src/lib/home/Banner.svelte
+++ b/src/lib/home/Banner.svelte
@@ -45,11 +45,6 @@
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 @@
-
-
+ 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;
-})();