Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to add Codepen code my website?


IgnatiaBelle

Question

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!

Link to comment

7 answers to this question

Recommended Posts

  • 0

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

image.thumb.png.bb38723ff0aeb73faebba1aa3c48893a.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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>

 

 

Screen Shot 2020-11-16 at 10.23.54 pm.png

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...