Tool

Created

Editor Stat

Description

Website

Email

Phone Number

Is Active

Assigned To

Attachment

Status

Priority

Due Date

Period

Role

Tools

Client

Name

Topics

Contact Number

Owner

Point

詳細

List

一覧

現役グラフィックデザイナー、デザイン系VTuber、Adobe Community Expertの「モンブラン」の総合Webページです。
モンブランは何者なのか？が全て集約しています。

こんにちは、デザイナーのモンブランです。

    <section class="card-section">
        <div class="loading" id="loading">
            <div class="loading-spinner"></div>
            <div class="loading-text">名刺を読み込んでいます</div>
            <div class="loading-progress" id="loadingProgress">0%</div>
        </div>

        <div class="card">
            <div class="card-inner">
                <div class="shine"></div>
                <div class="drag-overlay"></div>
                <div class="card-front">
                    <a href="https://x.com/MontBlanc04" target="_blank"><img src="https://montblanc6879.sakura.ne.jp/assets/imgs/bc/front-card-image.jpg" alt="名刺表面" class="card-image" id="frontImage" draggable="false"></a>
                </div>
                <div class="card-back">
                    <img src="https://montblanc6879.sakura.ne.jp/assets/imgs/bc/back-card-image.jpg" alt="名刺裏面" class="card-image" id="backImage" draggable="false">
                </div>
            </div>
        </div>
    </section>

    <div class="scroll-indicator">
        <div class="arrow"></div>
        <div>Scroll</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const card = document.querySelector('.card-inner');
            const cardContainer = document.querySelector('.card');
            const dragOverlay = document.querySelector('.drag-overlay');
            const loading = document.getElementById('loading');
            const frontImage = document.getElementById('frontImage');
            const backImage = document.getElementById('backImage');
            let isDragging = false;
            let startX;
            let startY;
            let initialTouchY;
            let startRotation = 0;
            let currentRotation = 0;
            let lastDirection = 0;
            let isHorizontalDrag = false;
            let hasDecidedDirection = false;

            function update3DEffect(rotation) {
                const normalizedRotation = rotation % 360;
                
                let transform = `rotateY(${rotation}deg)`;
                
                const tiltAmount = Math.sin((normalizedRotation * Math.PI) / 180) * 5;
                transform += ` rotateX(${tiltAmount}deg)`;
                
                const zTranslate = Math.abs(Math.sin((normalizedRotation * Math.PI) / 180)) * 30;
                transform += ` translateZ(${-zTranslate}px)`;

                const rotationProgress = Math.abs((normalizedRotation % 180) / 180);
                const shine = document.querySelector('.shine');
                shine.style.opacity = 0.1 + (rotationProgress * 0.2);

                card.style.transform = transform;
            }

            function initialRotation() {
                card.style.transition = 'transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)';
                currentRotation += 360;
                update3DEffect(currentRotation);
                
                setTimeout(() => {
                    card.style.transition = '';
                }, 1200);
            }

            function handleStart(clientX, clientY) {
                isDragging = true;
                startX = clientX;
                startY = clientY;
                initialTouchY = clientY;
                cardContainer.classList.add('dragging');
                startRotation = currentRotation;
                lastDirection = 0;
                isHorizontalDrag = false;
                hasDecidedDirection = false;
                card.style.transition = 'none';
            }

            function handleMove(e, clientX, clientY) {
                if (!isDragging) return;
                
                const deltaX = Math.abs(clientX - startX);
                const deltaY = Math.abs(clientY - initialTouchY);

                if (!hasDecidedDirection && (deltaX > 5 || deltaY > 5)) {
                    hasDecidedDirection = true;
                    isHorizontalDrag = deltaX > deltaY;

                    if (isHorizontalDrag && e) {
                        e.preventDefault();
                    }
                }

                if (isHorizontalDrag) {
                    const direction = Math.sign(deltaX);
                    const rotation = startRotation + (deltaX * 0.3);
                    currentRotation = rotation;
                    
                    if (Math.abs(deltaX) > 5) {
                        lastDirection = direction;
                    }
                    
                    update3DEffect(rotation);
                }
            }

            function handleEnd() {
                if (!isDragging) return;
                isDragging = false;
                cardContainer.classList.remove('dragging');

                if (isHorizontalDrag) {
                    const deltaX = Math.abs(currentRotation - startRotation);
                    
                    if (deltaX < 20) {
                        currentRotation = startRotation;
                    } else {
                        if (lastDirection > 0) {
                            currentRotation = Math.ceil(currentRotation / 180) * 180;
                        } else {
                            currentRotation = Math.floor(currentRotation / 180) * 180;
                        }
                    }
                    
                    card.style.transition = 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)';
                    update3DEffect(currentRotation);
                    
                    setTimeout(() => {
                        card.style.transition = '';
                    }, 500);
                }
            }

            // イベントリスナーの設定
            dragOverlay.addEventListener('mousedown', (e) => {
                e.preventDefault();
                handleStart(e.clientX, e.clientY);
            });

            window.addEventListener('mousemove', (e) => {
                handleMove(e, e.clientX, e.clientY);
            });

            window.addEventListener('mouseup', (e) => {
                handleEnd();
            });

            dragOverlay.addEventListener('touchstart', (e) => {
                const touch = e.touches[0];
                handleStart(touch.clientX, touch.clientY);
            }, { passive: true });

            window.addEventListener('touchmove', (e) => {
                if (!e.touches[0]) return;
                const touch = e.touches[0];
                handleMove(e, touch.clientX, touch.clientY);
            }, { passive: false });

            window.addEventListener('touchend', (e) => {
                if (e.changedTouches.length > 0) {
                    const touch = e.changedTouches[0];
                    handleEnd();
                }
            });

            frontImage.addEventListener('dragstart', (e) => e.preventDefault());
            backImage.addEventListener('dragstart', (e) => e.preventDefault());

            // 画像の読み込みと初期アニメーション
            let loadedImages = 0;
            const totalImages = 2;
            const loadingProgress = document.getElementById('loadingProgress');

            function updateProgress() {
                loadedImages++;
                const progress = Math.round((loadedImages / totalImages) * 100);
                loadingProgress.textContent = `${progress}%`;
            }

            Promise.all([
                new Promise((resolve) => {
                    if (frontImage.complete) {
                        updateProgress();
                        resolve();
                    } else {
                        frontImage.onload = () => {
                            updateProgress();
                            resolve();
                        };
                        frontImage.onerror = () => {
                            updateProgress();
                            resolve();
                        };
                    }
                }),
                new Promise((resolve) => {
                    if (backImage.complete) {
                        updateProgress();
                        resolve();
                    } else {
                        backImage.onload = () => {
                            updateProgress();
                            resolve();
                        };
                        backImage.onerror = () => {
                            updateProgress();
                            resolve();
                        };
                    }
                })
            ]).then(() => {
                setTimeout(() => {
                    loading.style.opacity = '0';
                    setTimeout(() => {
                        loading.style.display = 'none';
                        cardContainer.classList.add('show');
                        
                        setTimeout(() => {
                            initialRotation();
                            setTimeout(() => {
                                cardContainer.classList.add('floating');
                            }, 1200);
                        }, 1200);
                    }, 300);
                }, 500);
            });

            loading.style.transition = 'opacity 0.3s ease-out';
        });
    </script>

プライバシーポリシー

Writing / Review

note

執筆実績