how to take dark and moody wedding photos

Sven Test

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) });