Tool

Created

Editor Stat

Description

Website

Email

Phone Number

Is Active

Assigned To

Attachment

Status

Priority

Due Date

Period

Role

Tools

Client

Name

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>

VTuberスタイル 2024年1月号