Jump to content

Add Code Pen to html block

Recommended Posts

Hi, I'm struggling with my first attempt at plugging a basic Codepen design into a SS html block. I read I need to enter the html followed by the CSS followed by the JS in the sequence [below] but I cannot get it to work. What I am getting is a single image opposed to the more effective showreel.

Appreciate any suggestions, advice or for someone to have a go generating what I need form the codepen link below.

HMTL> HTML code here > CSS <style> CSS code here JS </style> <script src="https:e”sources> JS code here </script>

Here is the design link > https://codepen.io/vadymhimself/pen/eYmRMOX

Thank you in advance.

Link to comment
  • Replies 7
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

The current Codepen uses SCSS & Babel script so you need to convert it to CSS & JavaScript first

image.thumb.png.71ffe7c5cb48c4a3cb668c9c234f6b1c.png

Also, the script uses external code so you need to declare it

image.thumb.png.a6feae055aa11e8b21877c786ee1eac5.png

You can edit page where you want to use code > Add a Code Block > Paste these code

<h1 class="text">Monochrome</h1>
<div class="wrap">
  <div class="image" style="background-image: url(https://picsum.photos/id/192/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/209/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/331/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/334/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/345/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/349/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/356/1024/768)"></div>
  <div class="image" style="background-image: url(https://picsum.photos/id/363/1024/768)"></div>
</div>
<style>
  .wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -10%;
  z-index: 1;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 12vw;
  font-weight: bold;
  margin: 0;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.75);
  mix-blend-mode: overlay;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js"></script>
<script>
  // https://tympanus.net/codrops/2019/08/07/image-trail-effects/

const MathUtils = {
  // distance between two points
  distance: (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1) };


let mousePos = { x: 0, y: 0 };
let lastPos = { x: 0, y: 0 };

const getDistance = () => MathUtils.distance(mousePos.x, mousePos.y, lastPos.x, lastPos.y);

class ImageTrail {
  constructor() {
    this.imageList = [...document.querySelectorAll('.image')];
    this.state = {
      zIndex: 1,
      currentImage: 0,
      totalImages: this.imageList.length };


    this.onMouseMove = this.onMouseMove.bind(this);

    this.bindEvents();
  }

  bindEvents() {
    window.addEventListener('mousemove', this.onMouseMove);
  }

  onMouseMove(e) {
    mousePos = { x: e.clientX, y: e.clientY };
    this.changeImage();
  }

  changeImage() {
    const distance = getDistance();
    if (distance >= 150) {
      this.state.currentImage = this.state.currentImage < this.state.totalImages - 1 ? this.state.currentImage + 1 : 0;

      this.state.zIndex++;

      TweenMax.killTweensOf(this.imageList[0].parentEl);

      const currentEl = this.imageList[this.state.currentImage];
      TweenMax.set(currentEl, {
        zIndex: this.state.zIndex,
        x: 0 });

      TweenMax.to(currentEl, 1.5, {
        x: 50,
        ease: Expo.easeOut });


      lastPos = mousePos;
    }
  }}


new ImageTrail();
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/1/2023 at 11:44 PM, ABCDEFGHUMAN said:

HI @tuanphan the code works great but since trying to build out I'm now getting a massive bleed below the embedded content block.   Attached a pic of the white space and a link.  Thoughts? 

https://tortoise-cricket-r3r3.squarespace.com/config/pages

 

Screenshot 2023-11-01 at 16.41.09.png

/config is url for site owner, you can click arrow on top right or top left > real url will appear on browser address bar

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/3/2023 at 9:33 PM, ABCDEFGHUMAN said:

You try using Classic Editor Section instead, then add embed block again

(Click Add Blank Classic Editor Section above red arrow)

classic.png

Or if you still want to keep current section, try this code to Website > Website Tools (under Not Linked) > Custom CSS

/* embed block */
.fe-653d3116a926e015fbc9ba53 {
    grid-template-rows: repeat(2,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.