https://technomancer.biz/js/poc/lava_lamp.js

1var bubble_text = [
2    'Click on any of the bubbles!',
3    'Welcome to our site!',
4    'Go ahead. Click on a bubble.',
5    'Click here! Or tap, if you\'re on mobile.',
6    'These bubbles are all clickable, by the way!',
7    'Click here!',
8    'What a cool website!',
9    'Feel free to browse!',
10    'Feel free to look around!'
11]
12
13document.addEventListener("DOMContentLoaded", function(event) {
14    // console.log("Tile icon made by Smashicons (https://www.flaticon.com/authors/smashicons) from www.flaticon.com");
15    // console.log("Snake icon made by Freepik (https://www.freepik.com) from www.flaticon.com");
16    // console.log("Museum icon made by Freepik (https://www.freepik.com) from www.flaticon.com");
17
18    var eyes = document.querySelector('#eyes');
19    var balls = document.querySelectorAll(".ball");
20
21    eyes.style.visibility = "visible";
22
23    var speech_timer;
24
25    speech_popup(hide_speech_popup);
26
27    document.querySelector("#lava").addEventListener("click", push_to_bubble_text_array);
28
29    var blobs = document.querySelectorAll(".lava-lamp-item");
30
31    blobs.forEach((e) => {
32        if (e.parentElement.tagName === "A") {
33            return;
34        }
35
36        e.addEventListener("click", function(event) {
37            document.querySelectorAll(".lava-lamp-item").forEach((x) => {
38                x.style.animationPlayState = "paused";
39            });
40            update_src(event.target.id);
41        })
42    });
43
44    document.querySelector("#poc-modal-btn-close").addEventListener("click", function(event) {
45        document.querySelector("#poc-modal-iframe").src = "";
46        blobs.forEach((e) => {
47            e.style.animationPlayState = "running";
48        });
49    })
50
51    document.onmousemove = function(event){
52        var x = event.clientX * 100 / window.innerWidth + "%";
53        var y = event.clientY * 100 / window.innerHeight + "%";
54
55        for (var i=0;i<2;i++){
56            balls[i].style.left = x;
57            balls[i].style.top = y;
58        }
59    }
60
61    document.onmousedown = function(){
62        eyes.style.visibility = "hidden";
63    }
64
65    document.onmouseup = function(){
66        eyes.style.visibility = "visible";
67    }
68
69    document.querySelector("#speech_bubble").addEventListener("click", function(event) {
70        clearTimeout(speech_timer);
71        hide_speech_popup();
72    });
73
74    function speech_popup(callback){
75        eyes.style.visibility = "hidden";
76        document.querySelector("#speech_bubble").style.display = "block";
77        document.querySelector("#speech_bubble_txt").innerHTML = (bubble_text[Math.floor(Math.random() * bubble_text.length)]);
78
79        speech_timer = setTimeout(callback, 3000);
80    }
81
82    function hide_speech_popup(){
83        eyes.style.visibility = "visible";
84        document.querySelector("#speech_bubble").style.display = "none";
85        speech_timer = setTimeout(speech_popup, 2500, hide_speech_popup);
86    }
87
88    function push_to_bubble_text_array(){
89        bubble_text.push(
90            'Nice weather we\'re having.',
91            'How are you?',
92            'This is cool!',
93            'Hope you\'re having a great day!',
94            'Stay safe and healthy always!',
95            'What\'s up?',
96            'Hey there!',
97            'Call me Techno!',
98            'Just call me Techno the fennec.',
99            'The fennec is the smallest fox in the world!',
100            'Hmmm...',
101            'Welcome!',
102            '<i>Kumusta?</i>',
103            'Stay hydrated!',
104            'Cool site, huh?',
105            'Get plenty of rest! You deserve it.',
106            'Hehe.',
107            'Hello, World!',
108            '[ERROR 404] Page Not Found... Just kidding.'
109        );
110        document.querySelector("#lava").removeEventListener("click", push_to_bubble_text_array);
111    }
112});