oros/finalising_version_baby.html at main · HastarTara/oros · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Flip with Float and Parallax</title>
    <style>
        body, html {
            margin: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #242424;
            overflow: hidden; /* Prevent scrolling */


        }
        .card-container {
            width: 100vw; /* Use the full viewport width */
            height: 100vh; /* Use the full viewport height */
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card {
            width: 300px;
            height: 600px;
            border-radius: 30px;
            overflow: hidden;
            transform-style: preserve-3d;
            position: relative;
            animation: float 3s ease-in-out infinite;
            transition: transform 0.6s ease, transform 0.4s ease-out; /* Combines flip and parallax transitions */
        }
        .front, .back {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden; /* Hide both sides initially */
        }
        .front {
            background: url('https://preview.redd.it/ars-goetia-if-there-had-been-contemporary-oil-paintings-of-v0-zmra82j85wec1.jpg?width=1024&format=pjpg&auto=webp&s=c59b3cab376aaaa04e2a6198d042e532a42e7817') center/cover no-repeat;
        }
        .back {
            background: url('https://substackcdn.com/image/fetch/w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fddb98739-d1ac-4601-ba5a-38415435e67b_780x1417.webp') center/cover no-repeat;
            background-size: 110% 106%;
            transform: rotateY(180deg); /* Back faces the opposite direction */
        }
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>
    <script>
        const card = document.querySelector('.card');
        const front = document.querySelector('.front');
        const back = document.querySelector('.back');
        let isFlipped = false;

        // Flip card when 'X' key is pressed
        document.addEventListener('keydown', (e) => {
            if (e.key === 'x' || e.key === 'X') {
                flipCard();
            }
        });

        // Double-tap for touch devices
        let lastTouchTime = 0;
        const DOUBLE_TAP_THRESHOLD = 300; // Maximum time between taps in milliseconds

        card.addEventListener('touchstart', (e) => {
            const currentTime = new Date().getTime();
            const timeDifference = currentTime - lastTouchTime;

            if (timeDifference < DOUBLE_TAP_THRESHOLD) {
                flipCard(); // Call the flipCard function on double-tap
            }

            // Update last touch time
            lastTouchTime = currentTime;
        });

        // Function to handle the card flip
        function flipCard() {
            // Stop the floating animation when flip starts
            card.style.animation = 'none';

            // Apply the flip transform with a delay to allow the animation to trigger
            setTimeout(() => {
                card.style.transform = isFlipped ? '' : 'rotateY(180deg)';
                isFlipped = !isFlipped;

                // Delay changing backface visibility to sync with animation duration
                setTimeout(() => {
                    front.style.backfaceVisibility = isFlipped ? 'hidden' : 'visible';
                    back.style.backfaceVisibility = isFlipped ? 'visible' : 'hidden';

                    // Resume floating animation after flip completes
                    card.style.animation = 'float 3s ease-in-out infinite';
                }, 200); // Sync this delay with the flip transition time
            }, 10); // Small delay to ensure animation triggers
        }

        // Parallax effect during mouse or touch movement (optional)
        const applyParallax = (e) => {
            const cardRect = card.getBoundingClientRect();
            const centerX = cardRect.left + cardRect.width / 2;
            const centerY = cardRect.top + cardRect.height / 2;

            let deltaX, deltaY;

            if (e.touches) {
                // For touch events
                deltaX = (e.touches[0].clientX - centerX) / (cardRect.width / 2);
                deltaY = (e.touches[0].clientY - centerY) / (cardRect.height / 2);
            } else {
                // For mouse events
                deltaX = (e.clientX - centerX) / (cardRect.width / 2);
                deltaY = (e.clientY - centerY) / (cardRect.height / 2);
            }

            // Increase the factor to make the parallax stronger (e.g., double the intensity)
            const intensity = 50; // Doubling from 25 to 50

            const rotateX = Math.min(Math.max(deltaY * intensity, -intensity), intensity);
            const rotateY = Math.min(Math.max(deltaX * intensity, -intensity), intensity);

card.style.transform = `rotateY(${rotateY}deg) rotateX(${-rotateX}deg)`;

        // Start dragging for mouse and touch (optional)
        card.addEventListener('mousedown', () => {
            card.style.animation = 'none'; // Stop floating animation
        });

        card.addEventListener('touchstart', () => {
            card.style.animation = 'none'; // Stop floating animation
        });

        // Stop dragging and reset animation
        document.addEventListener('mouseup', () => {
            card.style.animation = 'float 3s ease-in-out infinite'; // Resume floating if not flipped
            card.style.transform = ''; // Reset parallax if not flipped
        });

        document.addEventListener('touchend', () => {
            card.style.animation = 'float 3s ease-in-out infinite'; // Resume floating after touch
            card.style.transform = ''; // Reset parallax if not flipped
        });

        // Update parallax effect during mousemove
        document.addEventListener('mousemove', applyParallax);

        // Update parallax effect during touchmove
        card.addEventListener('touchmove', applyParallax);

        document.addEventListener('click', () => {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { // Firefox
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
                document.documentElement.msRequestFullscreen();
            }
        });

    </script>
</body>
</html>