IgnatiaBelle
-
Posts
12 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by IgnatiaBelle
-
-
and this is how the codepen is meant to lookhttps://codepen.io/iggy-van-reesema/pen/bGeZqbd?editors=0010
-
Thankyou so so much for this! I actually realised I had sent you the wrong codepen hahahaha but I followed this layout and it worked (sort of)
So its displaying on my website now, as you can see here https://www.ignatiabelle.com/, but its affecting the whole site rather than just sitting as a header at the top.. is there a way I can fix this? as the whole site isn't functional now.
This is the code I put in a code block
Quote<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>
-
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/NWrNKNQ
Not sure where to paste the various HTML, CSS & JS codes.
I have tried pasting it all (html css and js) into a code block and I can get the text to appear and its animating just the css styling hasn't been added to it..
My site is www.ignatiabelle.com
Thanks for any help!
How to add Codepen code my website?
in Customize with code
Posted
I couldn't solve it for the page with my portfolio on it no..
What was even stranger is it was fine on the other page- about me
but it wouldn't work with the page with my work on it so I just took it off completely and had it so it only featured on the about me page