Unisuke Portfolio

よくみる U I 検証会

01.メニューを開くと × ボタンに変わるやつ

Demo

Source

html css js

                            <a onclick="menu_open()" class="open">
                            	<aside class="menu-line"></aside>
                            </a>
                        

                            .menu {
                            	margin: 4rem 0 2rem 0;
                            	display: block;
                            	height: calc(2rem + 2px);
                            	width: fit-content;
                            }

                            .menu-line {
                            	width: 5rem;
                            	height: 2px;
                            	background-color: #7B6800;
                            	display: block;
                            	position: relative;
                            	transition: .5s;
                            }

                            .menu-line:before, .menu-line:after {
                            	content: '';
                            	width: 5rem;
                            	height: 2px;
                            	background-color: #7B6800;
                            	position: absolute;
                            	transition: .5s;
                            }

                            .menu-line:before {
                            	bottom: -1rem;
                            }

                            .menu-line:after {
                            	bottom: 1rem;
                            	opacity: 1;
                            }

                            .menu.active .menu-line {
                            	transform: rotate(45deg);
                            	transform-origin: center;
                            	transition: .5s;
                            }

                            .menu.active .menu-line:before {
                            	bottom: 0;
                            	transform: rotate(-90deg);
                            	transition: .5s;
                            }

                            .menu.active .menu-line:after {
                            	position: static;
                            	transform: rotate(-90deg);
                            	opacity: 0;
                            	transition: .5s;
                            }

                        

                            const menu_open = () => {
                            	document.getElementsByClassName('menu')[0].classList.toggle('active')
                            }
                        

02.カーソルのカスタム

Demo

ページ内のカーソルを参照してください。

Source

html css js

                            <div id="cursor"></div>
                        

                            html,body,a{
                            	cursor: none;
                            }

                            #cursor {
                            	transform: translate(0, 0);
                            	pointer-events: none;
                            	position: fixed;
                            	top: -6px;
                            	left: -6px;
                            	width: 12px;
                            	height: 12px;
                            	background: rgba(217, 217, 217, 0.75);
                            	border-radius: 50%;
                            	z-index: 999;
                            	transition: width .3s, height .3s, top .3s, left .3s;
                            }

                            #cursor.hover {
                            	top: -16px;
                            	left: -16px;
                            	width: 36px;
                            	height: 36px;
                            	background: rgba(123,104,50,0.75);
                            }

                        

                            const cursor = document.getElementById('cursor');
                            document.addEventListener('mousemove',  (e) => {
                            	cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
                            const linkElem = document.querySelectorAll('a');
                            for (let i = 0; i < linkElem.length; i++) {
                            	linkElem[i].addEventListener('mouseover', (e) => {
                            		cursor.classList.add('hover');
                            	});
                            	linkElem[i].addEventListener('mouseout', (e) => {
                            		cursor.classList.remove('hover');
                            	});
                            }
                        

@2021 unisuke