like everything...this site is a work in progress

general

specifics

general

specifics

the creative studio
of cole orloff

the creative studio
of
cole orloff

2022

2022

Relativity

CGI

CGI

2022

Regular's Cafe

Branding

CGI

2022

Navistar

CGI

CGI

var stringRandom = (function() { var data = { isScrolling : false, repeat : 0, target : [], letters : '*+-/@_$[%£!XO1&>', originalStrings : '', singleLetters : [] } Array.prototype.shuffle = function() { var input = this; for (var i = input.length-1; i >=0; i--) { var randomIndex = Math.floor(Math.random()*(i+1)); var itemAtIndex = input[randomIndex]; input[randomIndex] = input[i]; input[i] = itemAtIndex; } return input; } function checkLength(x) { return Array.from(document.querySelectorAll(x)).length > 0; } function addListener(evt, fx) { window.addEventListener(evt, fx); } function changeLetter(letter) { if(letter.textContent != ' ') { letter.classList.add('is-changing'); letter.style.animationDuration = Math.random().toFixed(2) + 's'; var newChar = data.letters.substr( Math.random() * data.letters.length, 1); letter.textContent = newChar; letter.setAttribute('data-txt', newChar); } } function resetLetter(letter, value) { letter.classList.remove('is-changing'); letter.textContent = value; letter.setAttribute('data-txt', value); } function divideLetters() { data.target.forEach( (element, index) => { var text = element.textContent; var textDivided = ''; data.originalStrings = text; for(var i = 0; i < text.length; i++) { textDivided += `${text.substr(i, 1)}`; } element.innerHTML = textDivided; }); data.singleLetters = document.querySelectorAll('.el-sp'); } function changeLetters() { if(data.isScrolling) { data.singleLetters.forEach(function(el, index){ changeLetter(el); }); } setTimeout(changeLetters, 10); } function resetLetters() { var randomArray = []; for(var i = 0; i < data.singleLetters.length;i++) { randomArray.push(i); } randomArray.shuffle(); randomArray.forEach(function(el, index){ setTimeout(function(){ resetLetter(data.singleLetters[el], data.originalStrings.substring(el, el + 1)); }, (index * 20 * (Math.random() * 5))).toFixed(2); }); } function updateScrollState() { clearTimeout(delay); data.isScrolling = true; var delay = setTimeout(function() { data.isScrolling = false; resetLetters(); }, 300); }; return { init: function(selector){ if(checkLength(selector)) { data.target = Array.from(document.querySelectorAll(selector)); divideLetters(); changeLetters(); addListener('scroll', updateScrollState); } } } })(); stringRandom.init('.el-st'); const items = document.querySelectorAll('.item') const image = document.querySelector('img') items.forEach((el) => { el.addEventListener('mouseover', (e) => { imageData = e.target.getAttribute('data-image') console.log(imageData) e.target.style.zIndex = 99 image.setAttribute('src', imageData) }) el.addEventListener('mousemove', (e) => { image.style.top = e.clientY + 'px' image.style.left = e.clientX + 'px' }) el.addEventListener('mouseleave', (e) => { e.target.style.zIndex = 1 image.setAttribute('src', '') }) })