Glitch (CMYK)

glitch-cmyk.markdown

Glitch (CMYK)

A Pen by Clément Roche on CodePen.

License.

index.html

<div id="app">
	<div class="container">
		<div class="cyan">
			<div></div>
		</div>
		<div class="magenta">
			<div></div>
		</div>
		<div class="yellow">
			<div></div>
		</div>
		<div class="text">
			<div></div>
		</div>
	</div>
</div>

script.js

API('NorEvg')

const wording = [
	'bonjour',
	'hello',
	'buenos dias',
	'你好',
	'안녕하세요',
	'もしもし',
	'صباح الخير'
]
let scrolling = 0

let cyan = document.querySelector('.cyan>div')
let magenta = document.querySelector('.magenta>div')
let yellow = document.querySelector('.yellow>div')

let black = document.querySelector('.text>div')
let lettersDiv


changeWording('hello')


function changeWording(text) {
	let div = document.createElement('div')
	
	for (let i = 0; i < text.length; i++) {
		let letter = document.createElement('div')
		letter.classList.add('letter')
		letter.setAttribute('data-letter',text.charAt(i)+i)
		letter.innerText = text.charAt(i)
		if(text.charAt(i) === ' ') {
			letter.classList.add('empty')
		}
		div.insertAdjacentElement('beforeend',letter)
	}
	cyan.innerHTML = div.innerHTML
	magenta.innerHTML = div.innerHTML
	yellow.innerHTML = div.innerHTML
	black.innerHTML = div.innerHTML
	
	letterListener()
}





let ease = Power2.easeOut

move(
	{
		x: Math.random() * window.innerWidth,
		y: Math.random() * window.innerHeight
	}
)

setTimeout(()=>{
	move(
		{
			x: Math.random() * window.innerWidth,
			y: Math.random() * window.innerHeight
		}
	)
},1000)

setTimeout(()=>{
	move(
		{
			x: Math.random() * window.innerWidth,
			y: Math.random() * window.innerHeight
		}
	)
},2000)

document.body.addEventListener('mousemove',(e)=>{
	
	move(e)
	
})

function move(e) {
	let x = ((-window.innerWidth/2)+(e.x))/10
	let y = ((-window.innerHeight/2)+(e.y))/10
	
	// TweenLite.to(black, 0.25, { ease: ease, x: x, y: y, rotationY:x/5, rotationX:y});
	// TweenLite.to(cyan, 0.75, { ease: ease, x: x-5, y: y-5, rotationY:x/5, rotationX:y});
	// TweenLite.to(magenta, 1.25, { ease: ease, x: x+5, y: y, rotationY:x/5, rotationX:y});
	// TweenLite.to(yellow, 1.75, { ease: ease, x: x, y: y+5, rotationY:x/5, rotationX:y});
	
	TweenLite.to(black, 0.25, { ease: ease, x: x, y: y, rotationY:x/5, rotationX:y});
	TweenLite.to(cyan, 0.50, { ease: ease, x: x-3, y: y-3, rotationY:x/5, rotationX:y});
	TweenLite.to(magenta, 0.75, { ease: ease, x: x-6, y: y-6, rotationY:x/5, rotationX:y});
	TweenLite.to(yellow, 1, { ease: ease, x: x-9, y: y-9, rotationY:x/5, rotationX:y});
}

function letterListener() {
		
	lettersDiv = document.querySelectorAll('.letter')
	lettersDiv.forEach((letterDiv,index)=>{
		letterDiv.addEventListener('mousemove',function(e){
			let letter = this.getAttribute('data-letter')
			let sameLetterDivs = document.querySelectorAll('.letter[data-letter='+ letter +']')
			sameLetterDivs.forEach((div)=>{
				let x = e.offsetX - (div.offsetWidth/2)
				let y = e.offsetY - (div.offsetHeight/2)
				TweenLite.to(div, 1, { ease: Elastic.easeOut.config(1, 0.3), x: -x, y: -y});
			})
		})
	})
}


document.addEventListener(('click'),()=>{
	lettersDiv.forEach((div)=>{
		TweenLite.to(div, 1, { ease: Elastic.easeOut.config(1, 0.3), x: 0, y: 0});
	})
})

document.addEventListener(('wheel'),(e)=>{
	scrolling += Math.sign(e.deltaY)
	if(scrolling>5){
		scrolling = 0
		changeWording(wording[Math.floor(Math.random()*wording.length)])
	}
	if(scrolling<-5){
		scrolling = 0
		changeWording(wording[Math.floor(Math.random()*wording.length)])
	}
	// changeWording(wording[Math.abs(current%wording.length)])
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://codepen.io/ClementRoche/pen/OrGaMg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.scss

@font-face {
	font-family: "Druk";
	src: url("//rocheclement.fr/fonts/druk/DrukWide-Heavy-Web.woff2") format("woff2");
}

* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	width: 100vw;
	overflow:hidden;
	cursor: grab;
	background: #26282c;
}

::selection {
	background: rgba(0,0,0,0.0001);
}

#app {
	height: 100%;
	width: 100%;
	display: flex;

	.container {
		margin: auto;
		position: relative;
		
		.text{
			color:rgb(255,255,255);
			// opacity:0;

		}

		> div {
			font-family: "Druk";
			font-weight: 800;
			font-style: normal;
			font-stretch: normal;
			font-size: 8vw;

			>div {
				display:flex;
				flex-direction: row;
				>.empty {
					width: 4vw;
				}
			}
		}

		> div:not(.text) {
			color: rgba(0, 0, 0, 0.001);
			position: absolute;
			width: 100%;
			> div {
				-webkit-text-stroke-width: 4px;
				position: absolute;
				width: 100%;
				top: 0px;
				left: 0px;
				mix-blend-mode: multiply;
				will-change: opacity;
				opacity:1;
				
			}
		}

		.cyan {
			> div {
				-webkit-text-stroke-color: rgb(0, 255, 255);
				color: rgb( 0, 255,255);
			}
		}

		.magenta {
			> div {
				-webkit-text-stroke-color: rgb(255, 0, 255);
				color: rgb(255, 0, 255);
			}
		}

		.yellow {
			> div {
				-webkit-text-stroke-color: rgb(255, 255, 0);
				color: rgb(255, 255, 0);
			}
		}
	}
}