Jump to content

Squarespace codeblock animation moves to bottom of page

Recommended Posts

I'm trying to insert an animation to a specific codeblock on my Squarespace website (the codeblock is at the top of my page, I want it to be the hero)

I'm using an animation from Codepen: https://codepen.io/MAKIO135/pen/BbqLgRbackyard-smoking

However when I try to insert it into a specific codeblock (at the top of my website) it just ends up on the bottom of my website instead of instead the block. Seen here, the animation goes below the footer:enter image description here

 

Question:

How would I restrict it to the block? Example: #block-yui_3_17_2_1_1653608474127_6581

My code is below

<script id="vertexShader" type="x-shader/x-vertex">
    #ifdef GL_ES
    precision mediump float;
    #endif

    attribute vec3 aPosition;
    
    void main() { 
        gl_Position = vec4(aPosition, 1.0); 
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    #define BLACK vec3(0.,0.,0.)
    #define WHITE vec3(1.,1.,1.)

    uniform vec2 u_resolution;
    uniform vec2 u_mouse;
    uniform float u_time;

    const float patternSize = 60.;
    const float noiseScale1 = 85.5;
    const float noiseScale2 = 20.3;
    
    void main() {
        vec2 nbRepetitions = floor(u_resolution / patternSize);
        vec2 tileOrigin = (gl_FragCoord.xy - (u_resolution - patternSize * nbRepetitions) / 2.0) / patternSize;
        vec2 pos = fract(tileOrigin);
        
        float color = 0.0;
        const float threshold = 1.0;
        const float minthreshold = threshold + 0.1;
        
        color += fill(rectSDF(
            rotate(pos, snoise(vec3(u_time / noiseScale1, floor(tileOrigin) / noiseScale1)) * 4.0 * PI - 2.0),
            vec2(minthreshold + threshold * snoise(vec3(u_time / 4.0, floor(tileOrigin) / noiseScale2)) , 5.0)
        ), 0.5);
        
        // logo
        pos = gl_FragCoord.xy - vec2(u_resolution - 60.);
        float dist = dot(pos, pos);
        float radius = 100.;
        
        
        color = clamp( color, 0.0, 1.0 );
        gl_FragColor = vec4(mix(BLACK, WHITE, color), 1.);
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script>
  console.clear()

const lib = `
/*
 
*/

precision highp float;
#ifdef GL_ES
precision mediump float;
#endif

// Maths
#define QTR_PI 0.78539816339
#define HALF_PI 1.5707963267948966192313216916398
#define PI 3.1415926535897932384626433832795
#define TWO_PI 6.2831853071795864769252867665590
#define TAU 6.2831853071795864769252867665590
#define PHI 1.618033988749894848204586834
#define EPSILON 0.0000001

float round(float f) {
    return f < 0.5 ? 0.0 : 1.0;
}
float random(float x) {
    return fract(sin(x) * 1e4);
}
float random(vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

// Simplex noise 3D
// https://github.com/ashima/webgl-noise/wiki
vec3 mod289(vec3 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
    return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r){
    return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v){
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
    // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;
    // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );
    //   x0 = x0 - 0.0 + 0.0 * C.xxx;
    //   x1 = x0 - i1  + 1.0 * C.xxx;
    //   x2 = x0 - i2  + 2.0 * C.xxx;
    //   x3 = x0 - 1.0 + 3.0 * C.xxx;
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
    // Permutations
    i = mod289(i);
    vec4 p = permute( permute( permute(
            i.z + vec4(0.0, i1.z, i2.z, 1.0 ) )
            + i.y + vec4(0.0, i1.y, i2.y, 1.0 ) )
            + i.x + vec4(0.0, i1.x, i2.x, 1.0 ) );
    // Gradients: 7x7 points over a square, mapped onto an octahedron.
    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
    float n_ = 0.142857142857; // 1.0/7.0
    vec3  ns = n_ * D.wyz - D.xzx;
    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)
    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);
    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );
    //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
    //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));
    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);
    //Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;
    // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

// Style
/*float aastep(float threshold, float value) {
    float afwidth = 0.7 * length(vec2(dFdx(value), dFdy(value)));
    return smoothstep(threshold-afwidth, threshold+afwidth, value);
}*/
float aastep(float threshold, float value) {
    return smoothstep(threshold - 0.04, threshold + 0.04, value);
}

float smoothaastep(float threshold, float value, float smooth) {
    return smoothstep(threshold - smooth, threshold + smooth, value);
}

float fill(float x, float size) {
    return 1.-aastep(size, x);
}

float smoothfill(float x, float size, float smooth) {
    return 1.-smoothaastep(size, x, smooth);
}

float stroke(float x, float size, float w) {
    float d = aastep(size, x+w*.5) - aastep(size, x-w*.5);
    return clamp(d, 0., 1.);
}

float smoothstroke(float x, float size, float w, float smooth) {
    float d = smoothaastep(size, x+w*.5, smooth) - smoothaastep(size, x-w*.5, smooth);
    return clamp(d, 0., 1.);
}

vec3 bridge(vec3 c,float d,float s,float w) {
    c *= 1.-stroke(d,s,w*2.);
    return c + stroke(d,s,w);
}
 
float flip(float v, float pct) {
    return mix(v, 1.-v, pct);
}

// Transforms
vec2 rotate(vec2 st, float a) {
    st = mat2(cos(a),-sin(a),
              sin(a),cos(a))*(st-.5);
    return st+.5;
}
 
vec2 scale(vec2 st, vec2 s) {
    return (st-.5)*s+.5;
}

// SDF 
float circleSDF(vec2 st) {
    return length(st-.5)*2.;
}
 
float rectSDF(vec2 st, vec2 s) {
    st = st*2.-1.;
    return max( abs(st.x/s.x),
                abs(st.y/s.y) );
}

float crossSDF(vec2 st, float s) {
    vec2 size = vec2(.25, s);
    return min( rectSDF(st.xy,size.xy),
                rectSDF(st.xy,size.yx));
}
 
float flowerSDF(vec2 st, int N) {
    st = st*2.-1.;
    float r = length(st)*2.;
    float a = atan(st.y,st.x);
    float v = float(N)*.5;
    return 1.-(abs(cos(a*v))*.5+.5)/r;
}
 
float heartSDF(vec2 st) {
    st -= vec2(.5,.8);
    float r = length(st)*5.;
    st = normalize(st);
    return r - 
         ((st.y*pow(abs(st.x),0.67))/ 
         (st.y+1.5)-(2.)*st.y+1.26);
}
 
float hexSDF(vec2 st) {
    st = abs(st*2.-1.);
    return max(abs(st.y), st.x * 0.866025 + st.y * 0.5);
}

float polySDF(vec2 st, int V) {
    st = st*2.-1.;
    float a = atan(st.x,st.y)+PI;
    float r = length(st);
    float v = TAU/float(V);
    return cos(floor(.5+a/v)*v-a)*r;
}
 
float raysSDF(vec2 st, int N) {
    st -= .5;
    return fract(atan(st.y,st.x)/TAU*float(N));
}

float spiralSDF(vec2 st, float t) {
    st -= .5;
    float r = dot(st,st);
    float a = atan(st.y,st.x);
    return abs(sin(fract(log(r)*t+a*0.159)));
}

float starSDF(vec2 st, int V, float s) {
    st = st*4.-2.;
    float a = atan(st.y, st.x)/TAU;
    float seg = a * float(V);
    a = ((floor(seg) + 0.5)/float(V) + 
        mix(s,-s,step(.5,fract(seg)))) 
        * TAU;
    return abs(dot(vec2(cos(a),sin(a)),
                   st));
}

float triSDF(vec2 st) {
    st = (st*2.-1.)*2.;
    return max(abs(st.x) * 0.866025 + st.y * 0.5, -st.y * 0.5);
}

float rhombSDF(vec2 st) {
    return max(triSDF(st),
               triSDF(vec2(st.x,1.-st.y)));
}

float vesicaSDF(vec2 st, float w) {
    vec2 offset = vec2(w*.5,0.);
    return max( circleSDF(st-offset),
                circleSDF(st+offset));
}

`;

const vertexShader = document.getElementById('vertexShader').innerText;
const fragmentShader = lib + document.getElementById('fragmentShader').innerText;
let myShader;

function setup() {
    pixelDensity(1);
    createCanvas(windowWidth, windowHeight*.6, WEBGL);
    noStroke();

    // create and initialize the shader
    myShader = createShader(vertexShader, fragmentShader);
    shader(myShader);
    myShader.setUniform('u_resolution', [width, height]);
}

function draw() {
    myShader.setUniform('u_mouse', [mouseX, mouseY]);
    myShader.setUniform('u_time', millis()/1000.);
    quad(-1,-1, -1,1, 1,1, 1,-1);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight*.6);
    myShader.setUniform('u_resolution', [width, height]);
}
</script>

<style>
#block-yui_3_17_2_1_1653608474127_6581 {
  overflow: hidden;
  padding: 0px 0px 17px;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  max-height: 60vh;
}
</style>
 
Link to comment
  • Replies 1
  • Views 263
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.