VANTA.WAVES({ el: "#no", mouseControls: true, touchControls: true, gyroControls: false, minHeight: 400.00, minWidth: 200.00, scale: 1.00, scaleMobile: 1.00, color: 0xb11e24 }) function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } let slideIndex = 1; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 4000); // Change image every 2 seconds } class TextScramble { constructor(el) { this.el = el this.chars = '!<>-_\\/[]{}—=+*^?#________' this.update = this.update.bind(this) } setText(newText) { const oldText = this.el.innerText const length = Math.max(oldText.length, newText.length) const promise = new Promise((resolve) => this.resolve = resolve) this.queue = [] for (let i = 0; i < length; i++) { const from = oldText[i] || '' const to = newText[i] || '' const start = Math.floor(Math.random() * 40) const end = start + Math.floor(Math.random() * 40) this.queue.push({ from, to, start, end }) } cancelAnimationFrame(this.frameRequest) this.frame = 0 this.update() return promise } update() { let output = '' let complete = 0 for (let i = 0, n = this.queue.length; i < n; i++) { let { from, to, start, end, char } = this.queue[i] if (this.frame >= end) { complete++ output += to } else if (this.frame >= start) { if (!char || Math.random() < 0.28) { char = this.randomChar() this.queue[i].char = char } output += `${char}` } else { output += from } } this.el.innerHTML = output if (complete === this.queue.length) { this.resolve() } else { this.frameRequest = requestAnimationFrame(this.update) this.frame++ } } randomChar() { return this.chars[Math.floor(Math.random() * this.chars.length)] } } // —————————————————————————————————————————————————— // Example // —————————————————————————————————————————————————— const phrases = [ 'Data Privacy', 'Risk Management', 'IT Law and Governance', 'Certified Lean Six Sigma', 'ITIL Foundation V4 Certified', 'CEH – Certified Ethical Hacker', ' Cisco Certified CyberOps Associate', 'CBS – Certified Blockchain Security', 'VMWARE eSX Hypervisor Certified', ' Implementer and Controls consultant', 'CCNA – Cisco Certified Network Associate', 'Certified Microsoft Systems Administrator', 'CBSA – Certified Blockchain Solution Architect', 'C|CISO – Certified Chief Information Security Officer', 'Linux Professional Institute Certification (CentOS, RedHat)', 'Web, System, Mobile App Developers (LAMP, Windows platforms)', 'ISO 27001:2013 Information Security Management Systems Auditor' ] const el = document.querySelector('.text') const fx = new TextScramble(el) let counter = 0 const next = () => { fx.setText(phrases[counter]).then(() => { setTimeout(next, 800) }) counter = (counter + 1) % phrases.length } next() $(".hover").mouseleave( function() { $(this).removeClass("hover"); } ); $(document).ready(function() { // Fakes the loading setting a timeout setTimeout(function() { $('body').addClass('loaded'); }, 3500); });