To-do

In progress

Complete

Status

作成日

説明

著者

ステータス

優先度

連絡先メール

添付ファイル

評価

通知設定

内容

名前

Button

Description

Image

Author

Priority

Due Date

Is Active

Email

Phone

Name

Date

List view

Topics

ギャラリービュー

現役グラフィックデザイナー、デザイン系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>

プライバシーポリシー

モンブラン

topics

portfolio

news

profile