How to add Codepen code my website?

IgnatiaBelle · November 15, 2020

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!

Beyondspace · November 15, 2020

40 minutes ago, IgnatiaBelle said:

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!

have you convert scss to css like this? Also remove body tag from the html

tuanphan · November 15, 2020

Try adding a Code Block > Paste this code

<body>

  <main class="page">
    <div class="row">
      <div class="col-md-12">
        <div class="mood-board">
          <div class="title">
              <h1 class="align-center">From Trouville-sur-Mer</h1>
          </div>
          <!-- Start of Mood Board Bg -->
          <div id="background" class="images">

            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990802994cae5530aa4d3/1473876096339/5706067294_df3f598fc3.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d9909e2994cae5530aa608/1473876127131/visitez-la-cotes-basquesss.JPG" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990ad2994cae5530aa6b6/1473876141612/tumblr_inline_nmr7wkhRzo1r2u8iv_500.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990bd2994cae5530aa7eb/1473876157299/9718096_2.jpg" alt="" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990db2994cae5530aaab7/1473876187333/Bernard-Villemot-portrait-affichiste-graphiste-FR-index-grafik.jpg" alt="Bernard-Villemot-portrait" />
              <p class="description">
                <i>Bernard Villemot &#8211; French graphic artist (1911 - 1989).</i>     
              </p>
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990e72994cae5530aab4b/1473876200141/orangina.jpg" alt="Orangina" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d990fd2994cae5530aac9c/1473876222103/bergasol.jpg" alt="Bergazol" />
            </div>
            <div  class="draggable resizeable element">
              <img src="//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57d991092994cae5530aad29/1473876233277/perrier.jpg" alt="Perrie" />
            </div>

          </div>
          <!-- Mood board Bg ends -->

        </div>
      </div>
    </div>
  </main>

</body>

<style>
  /*
==============================================
Fonts Installation
==============================================
*/
@import "https://fonts.googleapis.com/css?family=Droid+Serif";
@font-face {
  font-family: 'Bodoni';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad241414fb5d694751ab7/1473958465275/BodoniFLF-Roman.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bodoni Bold';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad236414fb5d694751a44/1473958454896/BodoniFLF-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Bodoni Italic';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad23b414fb5d694751a73/1473958460144/BodoniFLF-Italic.ttf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Bodoni Bold Italic';
  src: url("//static1.squarespace.com/static/543870a5e4b0a877b5a652d9/t/57dad231414fb5d694751a13/1473958449544/BodoniFLF-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
/*
==============================================
Variables
==============================================
*/
/*
==============================================
Mixins
==============================================
*/
/*
==============================================
Overall styles
==============================================
*/
.align-center {
  text-align: center;
}

h1 {
  font-family: "Bodoni Bold", Garamond, "Times New Roman", serif;
  font-size: 7vw;
  color: #000;
  letter-spacing: -0.02em;
}

p {
  font-family: "Bodoni Italic", Garamond, "Times New Roman", serif;
  font-size: 0.8em;
  font-style: italic;
  padding-top: 0.5em;
  letter-spacing: 0.09em;
}

.description {
  display: none;
}

.mood-board {
  width: 100%;
  height: 100vh;
  background: #ffeecc;
  position: relative;
}
.mood-board .title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 40vh;
}
.mood-board .images {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: auto;
  margin: auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.mood-board .element {
  position: absolute;
  z-index: 0;
}
.mood-board .element:hover .description {
  display: block;
}
.mood-board .element img {
  width: 100%;
  height: 100%;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
  var draggable = $('.draggable');
  var resizable = $('.resizeable');
  var element = $('.element');

  element.each( setRandomSize );
  element.each( setRandomPosition );
  
  resizable.resizable({
        containment: "#background",
        aspectRatio: true,
        handles: "n, w, s, e"
  });

  draggable.draggable({
      cursor: "move",
      containment: "#background",
      stack: ".element",
  });
  if(window.innerHeight > window.innerWidth){
    
  }

  function setRandomSize(){
    //Get IMG size
    var img = $(this).find('img');
    imgHeight = img.outerHeight();
    imgWidth = img.outerWidth();
    
    if(window.innerHeight > window.innerWidth){
      //Generate random Width % [10, 60]
      var randomWidth = randomIntFromInterval(10, 60);
      $(this).css({
        width: randomWidth + '%'
      });
    } else {
      //Change Height to [100, 330] randomly
      var randomHeight = randomIntFromInterval(100, 330);
      //Calc proportional width
      var proportionalWidth = (imgWidth * randomHeight) / imgHeight; 
      $(this).css({
        height: randomHeight + 'px',
        width: proportionalWidth + 'px'
      });
    }
    
  }

  function setRandomPosition(){
    //Generate random Top % [0, 75]
    var randomTop = randomIntFromInterval(0, 75);
    //Generate randon Left % [0, 85]
    var randomLeft = randomIntFromInterval(0, 75);
    $(this).css({
      top: randomTop + '%',
      left: randomLeft + '%'
    })
  }

  function randomIntFromInterval(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

});
</script>

IgnatiaBelle · November 16, 2020

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>

IgnatiaBelle · November 16, 2020

and this is how the codepen is meant to look

https://codepen.io/iggy-van-reesema/pen/bGeZqbd?editors=0010

Beyondspace · November 16, 2020

1 hour ago, IgnatiaBelle said:

and this is how the codepen is meant to look

https://codepen.io/iggy-van-reesema/pen/bGeZqbd?editors=0010

I am checking

Beyondspace · November 16, 2020

2 hours ago, IgnatiaBelle said:

and this is how the codepen is meant to look

https://codepen.io/iggy-van-reesema/pen/bGeZqbd?editors=0010

have you solve it?

IgnatiaBelle · November 16, 2020

8 hours ago, bangank36 said:

have you solve it?

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

Cherishrose1 · March 16, 2022

I too have been trying to add codepen script into my site with no luck 😞

I would like to add this - https://codepen.io/rachsmith/pen/AeEmXG but am getting nowhere, any ideas?

tuanphan · March 18, 2022

On 3/16/2022 at 7:43 PM, Cherishrose1 said:

I too have been trying to add codepen script into my site with no luck 😞

I would like to add this - https://codepen.io/rachsmith/pen/AeEmXG but am getting nowhere, any ideas?

Add a Code Block > paste this code

<style>
  body {
  background: #111;
}

@keyframes flutter-left {
  0%   { transform: rotate3d(0, 1, 0, 20deg); }
  50% { transform: rotate3d(0, 1, 0, 70deg); }
  100% { transform: rotate3d(0, 1, 0, 20deg); }
}

@keyframes flutter-right {
  0%   { transform: rotate3d(0, 1, 0, -20deg); }
  50% { transform: rotate3d(0, 1, 0, -70deg); }
  100% { transform: rotate3d(0, 1, 0, -20deg); }
}

.butterfly {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0; bottom: 0; left: 0;    right: 0;
	transform-style: preserve-3d;
  transform: rotate3d(1, 0.5, 0, 110deg);
}

.left-wing, .right-wing {
  width: 24px;
  height: 42px;
  position: absolute;
  top: 10px;  
}

.left-wing {
  left: 10px;
  top: 10px;
  transform-origin: 24px 50%;
  transform: rotate3d(0, 1, 0, 20deg);
  animation: flutter-left 0.3s infinite;
}

.right-wing {
  left: 34px;
  transform: rotate3d(0, 1, 0, -20deg);
  transform-origin: 0px 50%;
  animation: flutter-right 0.3s infinite;
}

.left-wing .top {
  right: 0;
}

.top, .bottom {
  background: pink;
  opacity: 0.7;
  position: absolute;
}

.top {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.bottom {
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
</style>
<script>
  var butterflies = [];
setTimeout(function() {
  for (var i=0; i<20; i++) {
    var b = new Butterfly();
    b.init();
    butterflies.push(b);
  };
  
  animate();
}, 500);

function Butterfly() {
  var _this = this;
  
  _this.init = function() {
    _this.x = Math.floor(Math.random()*window.innerWidth);
    _this.y = Math.floor(Math.random()*window.innerHeight);;
    _this.directionX = true;
    _this.directionY = true;

   _this.domElement = document.createElement('div');
   _this.domElement.className = 'butterfly';
   _this.domElement.innerHTML = '<div class="left-wing"><div class="top"></div><div class="bottom"></div></div><div class="right-wing"><div class="top"></div><div class="bottom"></div></div>';
    document.getElementsByTagName('body')[0].appendChild(_this.domElement);
  
  }

  _this.moveButterfly = function() {
    _this.domElement.style.webkitTransform = 'translate3D('+_this.x+'px, '+_this.y+'px, 0px) rotate3d(1, 0.5, 0, 110deg)';
    var randomnumberX=Math.floor(Math.random()*11);
    var randomnumberY=Math.floor(Math.random()*11);
    if(randomnumberX > 8) {
      _this.directionX = _this.directionX*-1;
    }
  
    if(randomnumberY > 8) {
      _this.directionY = _this.directionY*-1;
    }
  
    if(_this.directionX == true) {
      _this.x = _this.x+1;
    } else {
      _this.x = _this.x-1;
    }
  
    if(_this.directionY == true) {
      _this.y = _this.y+1;
    } else {
      _this.y = _this.y-1;
    }
  
  }
  
  return _this;
}

function animate() {
  for(var i=0, l=butterflies.length; i<l; i++) {
    butterflies[i].moveButterfly();
  }
  webkitRequestAnimationFrame(animate);
}
</script>

Cherishrose1 · April 15, 2022

On 3/18/2022 at 12:53 PM, tuanphan said:

Add a Code Block > paste this code

<style>
  body {
  background: #111;
}

@keyframes flutter-left {
  0%   { transform: rotate3d(0, 1, 0, 20deg); }
  50% { transform: rotate3d(0, 1, 0, 70deg); }
  100% { transform: rotate3d(0, 1, 0, 20deg); }
}

@keyframes flutter-right {
  0%   { transform: rotate3d(0, 1, 0, -20deg); }
  50% { transform: rotate3d(0, 1, 0, -70deg); }
  100% { transform: rotate3d(0, 1, 0, -20deg); }
}

.butterfly {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0; bottom: 0; left: 0;    right: 0;
	transform-style: preserve-3d;
  transform: rotate3d(1, 0.5, 0, 110deg);
}

.left-wing, .right-wing {
  width: 24px;
  height: 42px;
  position: absolute;
  top: 10px;  
}

.left-wing {
  left: 10px;
  top: 10px;
  transform-origin: 24px 50%;
  transform: rotate3d(0, 1, 0, 20deg);
  animation: flutter-left 0.3s infinite;
}

.right-wing {
  left: 34px;
  transform: rotate3d(0, 1, 0, -20deg);
  transform-origin: 0px 50%;
  animation: flutter-right 0.3s infinite;
}

.left-wing .top {
  right: 0;
}

.top, .bottom {
  background: pink;
  opacity: 0.7;
  position: absolute;
}

.top {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.bottom {
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
}
</style>
<script>
  var butterflies = [];
setTimeout(function() {
  for (var i=0; i<20; i++) {
    var b = new Butterfly();
    b.init();
    butterflies.push(b);
  };
  
  animate();
}, 500);

function Butterfly() {
  var _this = this;
  
  _this.init = function() {
    _this.x = Math.floor(Math.random()*window.innerWidth);
    _this.y = Math.floor(Math.random()*window.innerHeight);;
    _this.directionX = true;
    _this.directionY = true;

   _this.domElement = document.createElement('div');
   _this.domElement.className = 'butterfly';
   _this.domElement.innerHTML = '<div class="left-wing"><div class="top"></div><div class="bottom"></div></div><div class="right-wing"><div class="top"></div><div class="bottom"></div></div>';
    document.getElementsByTagName('body')[0].appendChild(_this.domElement);
  
  }

  _this.moveButterfly = function() {
    _this.domElement.style.webkitTransform = 'translate3D('+_this.x+'px, '+_this.y+'px, 0px) rotate3d(1, 0.5, 0, 110deg)';
    var randomnumberX=Math.floor(Math.random()*11);
    var randomnumberY=Math.floor(Math.random()*11);
    if(randomnumberX > 8) {
      _this.directionX = _this.directionX*-1;
    }
  
    if(randomnumberY > 8) {
      _this.directionY = _this.directionY*-1;
    }
  
    if(_this.directionX == true) {
      _this.x = _this.x+1;
    } else {
      _this.x = _this.x-1;
    }
  
    if(_this.directionY == true) {
      _this.y = _this.y+1;
    } else {
      _this.y = _this.y-1;
    }
  
  }
  
  return _this;
}

function animate() {
  for(var i=0, l=butterflies.length; i<l; i++) {
    butterflies[i].moveButterfly();
  }
  webkitRequestAnimationFrame(animate);
}
</script>

Thank you so much 🙂

How to add Codepen code my website?

Recommended Posts

IgnatiaBelle

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

IgnatiaBelle

tuanphan

IgnatiaBelle

Posted Images

Beyondspace

tuanphan

IgnatiaBelle

IgnatiaBelle

Beyondspace

Beyondspace

IgnatiaBelle

Cherishrose1

tuanphan

Cherishrose1

Create an account or sign in to comment

News

IgnatiaBelle

tuanphan

IgnatiaBelle

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources