IgnatiaBelle Posted November 16, 2020 Share Posted November 16, 2020 Site URL: https://www.ignatiabelle.com/ Site URL: https://www.ignatiabelle.com/ Hi there! I want to use this code on my website's homepage as the header. https://codepen.io/iggy-van-reesema/pen/bGeZqbd I have tried pasting it all (html css and js) into a code block and also as code interjection header but both ways I do this it effects my whole body of the page and not just the header. this is the code I have used <body> <div class="container"> <div class="text"></div> </div> </body> <style> @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100'; html, body { font-family: 'Roboto Mono', monospace; background: #eee8e5; height: 100%; } .container { height: 100%; width: 100%; justify-content: center; align-items: center; display: flex; } .text { font-weight: 100; font-size: 28px; color: #212121; } .dud { color: #757575; } </style> <script> // —————————————————————————————————————————————————— // TextScramble // —————————————————————————————————————————————————— 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 += `<span class="dud">${char}</span>` } 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 = [ 'storyteller', 'cuentista', 'visual communicator', 'comunicador visual', 'lets talk', 'hablemos', ] 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() </script> My site is www.ignatiabelle.com Thanks for any help! Link to comment
IXStudio Posted November 16, 2020 Share Posted November 16, 2020 Hi, Please show with the picture where you want to show the text? Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment