Jump to content

johncircle

Member
  • Posts

    2
  • Joined

  • Last visited

Everything posted by johncircle

  1. 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: 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>
  2. So I've added a code injection on Squarespace, for Tailwind CSS, into the section: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } } </style> </head> And this happened... https://i.stack.imgur.com/etdn0industrial coffee table.png
×
×
  • 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.