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

使用バージョン

使用歴

Topics

Contact Number

Point

List

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

<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/667d25609d7f358570d3e5ef/1i1cdk0ju';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>

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

    <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>

#朝までFigma

#朝までシリーズ一覧

シリーズ全体のデザイン方針はこちら

Behance