canvas {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100%;
}
#canvas {
/* make the canvas wrapper fits the window */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.plane {
/* define the size of your plane */
width: 80%;
max-width: 1400px;
height: 80vh;
position: relative;
top: 10vh;
margin: 0 auto;
}
.plane img {
/* hide the img element */
display: none;
}
#ifdef GL_ES
precision mediump float;
#endif
// those are the mandatory attributes that the lib sets
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
// those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
// our texture matrix uniform (this is the lib default name, but it could be changed)
uniform mat4 uTextureMatrix0;
// our time uniform
uniform float uTime;
// our mouse position uniform
uniform vec2 uMousePosition;
// our mouse strength
uniform float uMouseStrength;
// if you want to pass your vertex and texture coords to the fragment shader
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
void main() {
vec3 vertexPosition = aVertexPosition;
// get the distance between our vertex and the mouse position
float distanceFromMouse = distance(uMousePosition, vec2(vertexPosition.x, vertexPosition.y));
// this will define how close the ripples will be from each other. The bigger the number, the more ripples you’ll get
float rippleFactor = 6.0;
// calculate our ripple effect
float rippleEffect = cos(rippleFactor * (distanceFromMouse – (uTime / 120.0)));
// calculate our distortion effect
float distortionEffect = rippleEffect * uMouseStrength;
// apply it to our vertex position
vertexPosition += distortionEffect / 30.0;
gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);
// varyings
// thanks to the texture matrix we will be able to calculate accurate texture coords
// so that our texture will always fit our plane without being distorted
vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
vVertexPosition = vertexPosition;
}
#ifdef GL_ES
precision mediump float;
#endif
// get our varyings
varying vec3 vVertexPosition;
varying vec2 vTextureCoord;
// our texture sampler (this is the lib default name, but it could be changed)
uniform sampler2D uSampler0;
void main() {
// get our texture coords
vec2 textureCoords = vTextureCoord;
// apply our texture
vec4 finalColor = texture2D(uSampler0, textureCoords);
// fake shadows based on vertex position along Z axis
finalColor.rgb -= clamp(-vVertexPosition.z, 0.0, 1.0);
// fake lights based on vertex position along Z axis
finalColor.rgb += clamp(vVertexPosition.z, 0.0, 1.0);
// handling premultiplied alpha (useful if we were using a png with transparency)
finalColor = vec4(finalColor.rgb * finalColor.a, finalColor.a);
gl_FragColor = finalColor;
}
// we are using window onload event here but this is not mandatory
window.addEventListener(“DOMContentLoaded”, function() {
// track the mouse positions to send it to the shaders
var mousePosition = {
x: 0,
y: 0,
};
// pass the id of the div that will wrap the canvas to set up our WebGL context and append the canvas to our wrapper
var curtains = new Curtains({
container: “canvas”
});
// get our plane element
var planeElement = document.getElementsByClassName(“plane”)[0];
// set our initial parameters (basic uniforms)
var params = {
vertexShaderID: “plane-vs”, // our vertex shader ID
fragmentShaderID: “plane-fs”, // our framgent shader ID
widthSegments: 20,
heightSegments: 20, // we now have 20*20*6 = 2400 vertices !
uniforms: {
time: {
name: “uTime”, // uniform name that will be passed to our shaders
type: “1f”, // this means our uniform is a float
value: 0,
},
mousePosition: { // our mouse position
name: “uMousePosition”,
type: “2f”, // notice this is a length 2 array of floats
value: [mousePosition.x, mousePosition.y],
},
mouseStrength: { // the strength of the effect (we will attenuate it if the mouse stops moving)
name: “uMouseStrength”, // uniform name that will be passed to our shaders
type: “1f”, // this means our uniform is a float
value: 0,
},
}
}
// create our plane mesh
var plane = curtains.addPlane(planeElement, params);
// if our plane has been successfully created we could start listening to mouse/touch events and update its uniforms
plane && plane.onReady(function() {
// set a field of view of 35 to exagerate perspective
// we could have done it directly in the initial params
plane.setPerspective(35);
// listen our mouse/touch events on the whole document
// we will pass the plane as second argument of our function
// we could be handling multiple planes that way
document.body.addEventListener(“mousemove”, function(e) {
handleMovement(e, plane);
});
document.body.addEventListener(“touchmove”, function(e) {
handleMovement(e, plane);
});
}).onRender(function() {
// update our time uniform value
plane.uniforms.time.value++;
// continually decrease mouse strength
plane.uniforms.mouseStrength.value = Math.max(0, plane.uniforms.mouseStrength.value – 0.0075);
});
// handle the mouse move event
function handleMovement(e, plane) {
// touch event
if(e.targetTouches) {
mousePosition.x = e.targetTouches[0].clientX;
mousePosition.y = e.targetTouches[0].clientY;
}
// mouse event
else {
mousePosition.x = e.clientX;
mousePosition.y = e.clientY;
}
// convert our mouse/touch position to coordinates relative to the vertices of the plane
var mouseCoords = plane.mouseToPlaneCoords(mousePosition.x, mousePosition.y);
// update our mouse position uniform
plane.uniforms.mousePosition.value = [mouseCoords.x, mouseCoords.y];
// reassign mouse strength
plane.uniforms.mouseStrength.value = 1;
}
});
/* make all the elements color transition smooth */
.flo-block{
background-color:black; /* set begin background color */
transition: 2s ease-in-out; /* 2s = 2 second */
}
// background color animation
// there is no way to change the body color, we can change each backgroun seperetly at the same time.
// start change function
$(document).ready(function(){ // wait untill the page is fully loaded
$(document).scroll(function() { // checking for scroll activity
var scrollPercent = (100 * $(document).scrollTop() / $(document).height()).toFixed(0); // measure height of the full page and convert to percentage
// scrollPercent = max 75. and best to keep it in between 20 and 60. but you can change and play
if(scrollPercent 20 ) { // when to change the color to white when scrolling down
$(“.flo-block”).css(‘background-color’, ‘white’);
}
if(scrollPercent > 45) { // when to change the color to black when scrolling down & back to white when scroll up
$(“.flo-block”).css(‘background-color’, ‘black’);
}
console.log(scrollPercent)
});
});
/* css for changing the style of the text */
@font-face {
font-family:Canopee;
src: url(https://static.showit.co/file/LEVe3G4xRneD5eoK7xOwHQ/81532/canopee-regular.woff);
}
text {
font-size: 90px;
fill:yellow;
font-family:Canopee;
}
svg {
overflow: inherit;
}
put some text here
document.addEventListener(“scroll”, e => { // registering the scrolling
var view = $(window).scrollTop(); // get the viewport position in form ofa number
var move = (view * 2) ;
var screen = $(window).height();
var position = $(“#text-1”).offset();
var pos = parseInt((position.top).toFixed(0));
var start = (pos – move);
const textPath1 = document.querySelector(“#text-1”); // this part you need to duplicate for adding more text and change the “textPath1”
textPath1.setAttribute(“startOffset”, start ) // this one also duplicate and change “textPath1”
// console.log(“we are here =”,view, “the height of the screen =” ,screen, “position of the text =” ,pos, “what we animate =” ,start)
});
