メールアドレス

電話番号

お問い合わせの種類

お問い合わせ日

IP address

カテゴリ

連絡先

User Agent

page

日時

名前

To-do

In progress

Complete

ステータス

Tool

Created

Editor Stat

Description

Website

Email

Phone Number

Is Active

Assigned To

Attachment

Status

Priority

Due Date

Period

Role

Tools

Client

Name

Owner

File

Quantity

Date Created

使用バージョン

使用歴

Date

List view

All 

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>

プライバシーポリシー

モンブラン公式サイト

ドメイン

管理ページ

公式サイトパーツ

他パーツページ

プレーリーカード用ページ

下書き

各データベース

ポートフォリオ