Animatie Afbeeldingen en Video ‘ s met curtains.js

0
18

Tijdens het surfen op het laatste award-winnende websites, ziet u een stuk van de verbeelding vervorming van het beeld animaties of zuivere 3D-effecten. De meeste van hen zijn gemaakt met WebGL, een API zodat GPU-versnelde beeldverwerking effecten en animaties. Ze hebben ook de neiging tot gebruik van bibliotheken gebouwd op de top van WebGL, zoals three.js of pixi.js. Beide zijn zeer krachtige tools voor het maken respectievelijk 2D en 3D-scènes.

Maar, je moet in gedachten houden dat deze bibliotheken waren oorspronkelijk niet ontworpen voor het maken van diavoorstellingen of animeren DOM-elementen. Er is een bibliotheek speciaal ontworpen voor die, hoewel, en gaan we het hebben over hoe het hier in deze post.

WebGL, CSS Positionering en Reactievermogen

Zeggen dat je bezig bent met een bibliotheek als three.js of pixi.js en je wilt gebruiken voor het maken van interacties, zoals mouseover en ga gebeurtenissen op de elementen. Zou je in de problemen! Hoe u de positie van uw WebGL elementen in vergelijking met het document en andere DOM-elementen? Hoe zou behandelen responsiviteit?

Dit is precies wat ik in gedachten had bij het maken van curtains.js.

Curatins.js kunt u het maken van vliegtuigen met foto ‘s en video’ s (in WebGL wij noemen ze textures) die fungeren als gewone HTML-elementen, met de plaats en omvang bepaald door CSS-regels. Maar deze vliegtuigen kan worden uitgebreid met de eindeloze mogelijkheden van WebGL en shaders.

Wacht, shaders?

Shaders zijn kleine programma ‘ s geschreven in GLSL dat vertel uw GPU hoe te maken van uw vliegtuigen. Weten hoe shaders werken is verplicht hier, want dit is hoe we het zullen aanpakken animaties. Als u nog nooit van heeft gehoord, wilt u misschien om te leren van de basics eerste. Er zijn tal van goede websites om te beginnen met het leren van hen, zoals Het Boek van Shaders.

Nu dat je het idee, we maken onze eerste vliegtuig!

Instelling van een basis-vliegtuig

Om onze eerste vliegtuig, we moeten een beetje HTML, CSS en JavaScript te maken van het vliegtuig. Dan is onze shaders zal animeren.

HTML

De HTML wordt heel eenvoudig hier. Maken We een <div> dat houdt onze canvas, en een div die houdt ons beeld.

<body>
<!– div houden onze WebGL canvas –>
<div id=”canvas”></div>

<!– div gebruikt voor het maken van ons vliegtuig –>
<div class=”vliegtuig”>

<!– afbeelding dat gebruikt zal worden als een structuur door ons vliegtuig –>
<img src=”path/to/my-image.jpg” />

</div>

</body>
CSS

Zullen We het gebruik van CSS om ervoor te zorgen dat de <div> die loopt van de canvas groter dan ons vliegtuig, en het toepassen van de grootte van het vliegtuig div. (Onze WebGL vliegtuig hebben exact dezelfde grootte en positie van deze div.)

body {
/* maak het lichaam fit onze kijkvenster */
position: relative;
breedte: 100%;
hoogte: 100vh;
margin: 0;

/* hide scrollbars */
overflow: hidden;
}

#canvas {
/* maak de doek wrapper past het document */
position: absolute;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
}
.vlak {
/* definieer de grootte van je vliegtuig */
breedte: 80%;
max breedte: 1400px;
hoogte: 80vh;
position: relative;
top: 10vh;
margin: 0 auto;
}

.vlak img {
/* verbergen van het img-element */
display: none;
}
JavaScript

Er is een beetje meer werk in de JavaScript. We moeten het concretiseren van onze WebGL context, het maken van een vliegtuig met uniforme parameters, en gebruik het.

venster.onload = function() {
// pas de id van de div die wikkel de doek om ons WebGL context en voeg de doek om ons wrapper
var webGLCurtain = nieuwe Gordijnen(“canvas”);

// haal ons vliegtuig element
var planeElement = document.getElementsByClassName(“plane”)[0];

// onze initiële parameters (basis uniformen)
var params = {
vertexShaderID: “vliegtuig-vs”, // vertex shader ID
fragmentShaderID: “vliegtuig-fs”, // onze framgent shader ID
uniformen: {
tijd: {
naam: “uTime”, // uniform naam in die zal worden doorgegeven aan onze shaders
type: “1f”, // dit betekent dat ons uniform is een float
waarde: 0,
},
}
}

// maak ons vliegtuig mesh
var vliegtuig = webGLCurtain.addPlane(planeElement, params);

// gebruik de onRender methode van ons vliegtuig ontslagen bij elke oproep requestAnimationFrame
vlak.onRender(function() {
vlak.uniformen.tijd.waarde++; // update van onze tijd uniforme waarde
});

}
Shaders

Moeten We schrijven de vertex shader. Het zal niet veel gedaan, behalve de positie van onze vliegtuig op basis van het model bekijken en projectie matrix en doorgeven varyings om het fragment shader:

<!– vertex shader –>
<script id=”vliegtuig-vs” type=”x-shader/x-vertex”>
#ifdef GL_ES
precisie mediump float;
#endif

// wie zijn de verplichte kenmerken die de lib-sets
kenmerk vec3 aVertexPosition;
kenmerk vec2 aTextureCoord;

// wie zijn verplichte uniformen die de lib-sets en dat ons model bekijken en projectie matrix
uniforme mat4 uMVMatrix;
uniforme mat4 uPMatrix;

// als je wilt slagen voor uw vertex en textuur coords om het fragment shader
verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

void main() {
// voor de vertex positie van het attribuut
vec3 vertexPosition = aVertexPosition;
// stel de positie op basis van de projectie-en model-view-matrix
gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

// stel de varyings
vTextureCoord = aTextureCoord;
vVertexPosition = vertexPosition;
}
</script>

Nu onze fragment shader. Dit is waar wij zullen u een weinig verplaatsing effect op basis van onze tijd uniform en de texture coördinaten.

<!– fragment shader –>
<script id=”vliegtuig-fs” type=”x-shader/x-fragment”>
#ifdef GL_ES
precisie mediump float;
#endif

// onze varyings
verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

// de uniforme we gedeclareerd in onze javascript
uniforme float uTime;

// onze textuur sampler (dit is de lib standaard naam, maar kan worden gewijzigd)
uniforme sampler2D uSampler0;

void main() {
// onze textuur coords
vec2 textureCoord = vTextureCoord;

// verplaatsen ons pixels, zowel langs-as op basis van onze tijd uniforme en textuur UVs
// dit maakt een soort van water-oppervlakte-effect
// probeer om een reactie van een lijn of wijzigen van de constanten te zien hoe het verandert de werking
// let op : texturen coords zijn, variërend van 0,0 tot 1,0 op zowel as
const float PI = 3.141592;

textureCoord.x += (
sin(textureCoord.x * 10.0 + ((uTime * (PI / 3.0)) * 0.031))
+ sin(textureCoord.y * 10.0 + ((uTime * (PI / 2.489)) * 0.017))
) * 0.0075;

textureCoord.y += (
sin(textureCoord.y * 20.0 + ((uTime * (PI / 2.023)) * 0.023))
+ sin(textureCoord.x * 20.0 + ((uTime * (PI / 3.1254)) * 0.037))
) * 0.0125;

gl_FragColor = texture2D(uSampler0, textureCoord);
}
</script>

Et voilà! Bent u klaar, en als alles goed is gegaan, moet u het zien van iets als dit.

Zie de Pen curtains.js basic vliegtuig door Martin Laxenaire (@martinlaxenaire) op CodePen.

De toevoeging van 3D en interacties

Oke, dat is wel cool, maar tot nu toe zijn we gestart met dit bericht praten over 3D en interacties, dus laten we kijken hoe we kunnen toevoegen die in.

Over hoekpunten

Voor het toevoegen van een 3D-effect zouden we het vliegtuig hoekpunten positie binnen de vertex shader. Echter in ons eerste voorbeeld, hebben we niet aangeven hoeveel hoekpunten ons vliegtuig zou moeten hebben, dus het was gemaakt met een standaard geometrie met zes hoekpunten vormen twee driehoeken :

Om fatsoenlijke 3D-animaties, we zouden meer driehoeken, dus meer hoekpunten:

Dit vliegtuig heeft vijf segmenten langs de breedte en vijf segmenten langs de hoogte. Als gevolg daarvan hebben we 50 driehoeken en 150 in totaal hoekpunten.

Refactoring onze JavaScript

Gelukkig is het makkelijk te specificeren ons vliegtuig definitie als het zou kunnen ingesteld worden binnen onze initiële parameters.

We zijn ook van plan om te luisteren naar de muis positie voor het toevoegen van een beetje interactie. Om het goed te doen, we zullen moeten wachten voor het vliegtuig klaar zijn, zetten onze muis document coördinaten naar onze WebGL clip ruimte coördineert en stuurt ze naar de shaders als een uniform.

// wij zijn met behulp van het venster onload-gebeurtenis hier, maar dit is niet verplicht
venster.onload = function() {
// het bijhouden van de muis posities in te zenden naar de shaders
var mousePosition = {
x: 0,
y: 0,
};

// pas de id van de div die wikkel de doek om ons WebGL context en voeg de doek om ons wrapper
var webGLCurtain = nieuwe Gordijnen(“canvas”);

// haal ons vliegtuig element
var planeElement = document.getElementsByClassName(“plane”)[0];

// onze initiële parameters (basis uniformen)
var params = {
vertexShaderID: “vliegtuig-vs”, // vertex shader ID
fragmentShaderID: “vliegtuig-fs”, // onze framgent shader ID
widthSegments: 20,
heightSegments: 20, // we hebben nu 20*20*6 = 2400 vertices !
uniformen: {
tijd: {
naam: “uTime”, // uniform naam in die zal worden doorgegeven aan onze shaders
type: “1f”, // dit betekent dat ons uniform is een float
waarde: 0,
},
mousePosition: { // onze positie muis
naam: “uMousePosition”,
type: “2f”, // let op dit is een lengte van 2 matrix van praalwagens
waarde: [mousePosition.x, mousePosition.y],
},
mouseStrength: { // de sterkte van het effect (we zullen verminderen als de muis stilstaat)
naam: “uMouseStrength”, // uniform naam in die zal worden doorgegeven aan onze shaders
type: “1f”, // dit betekent dat ons uniform is een float
waarde: 0,
},

}
}

// maak ons vliegtuig mesh
var vliegtuig = webGLCurtain.addPlane(planeElement, params);

// nadat ons vliegtuig klaar is, kunnen we beginnen met het luisteren naar de muis/touch events en een update van de uniformen
vlak.onReady(function() {
// stel een beeldhoek van 35 tot exagerate perspectief
// we hadden het direct in de eerste params
vlak.setPerspective(35);
// beluister onze muis/touch events op het hele document
// we passeren het vliegtuig als tweede argument van de functie
// we zouden kunnen worden bij de afhandeling van meerdere vliegtuigen die manier
document.lichaam.addEventListener(“mousemove”, function(e) {
handleMovement(e, vliegtuig);
});
document.lichaam.addEventListener(“touchmove”, function(e) {
handleMovement(e, vliegtuig);
});
}).onRender(function() {
// update van onze tijd uniforme waarde
vlak.uniformen.tijd.waarde++;
// het voortdurend verlagen muis kracht
vlak.uniformen.mouseStrength.waarde = Wiskunde.max(0, vliegtuig.uniformen.mouseStrength.waarde – 0.0075);
});

// omgaan met de muis verplaatsen evenement
functie handleMovement(e, vliegtuig) {
// contact evenement
als(e.targetTouches) {
mousePosition.x = e.targetTouches[0].clientX;
mousePosition.y = e.targetTouches[0].clientY;
}
// muis evenement
anders {
mousePosition.x = e.clientX;
mousePosition.y = e.clientY;
}
// zetten onze muis/touch positie-coördinaten ten opzichte van de hoekpunten van het vliegtuig
var mouseCoords = vliegtuig.mouseToPlaneCoords(mousePosition.x, mousePosition.y);
// update van onze muis positie uniform
vlak.uniformen.mousePosition.waarde = [mouseCoords.x, mouseCoords.y];

// toewijzen muis kracht
vlak.uniformen.mouseStrength.waarde = 1;
}

}

Nu dat JavaScript is gedaan, we hebben te herschrijven onze shaders, zodat ze zullen gebruik maken van de muis positie uniform.

Refactoring de shaders

Laten we eens kijken naar onze vertex shader eerste. We hebben drie uniformen die we kunnen gebruiken voor onze werking:

  1. de tijd die wordt steeds groter
  2. de muis positie
  3. onze muis kracht, die voortdurend afneemt tot de volgende muis bewegen

We zullen gebruik maken van alle drie van hen maken een soort van 3D-rimpel effect.

<script id=”vliegtuig-vs” type=”x-shader/x-vertex”>
#ifdef GL_ES
precisie mediump float;
#endif

// wie zijn de verplichte kenmerken die de lib-sets
kenmerk vec3 aVertexPosition;
kenmerk vec2 aTextureCoord;

// wie zijn verplichte uniformen die de lib-sets en dat ons model bekijken en projectie matrix
uniforme mat4 uMVMatrix;
uniforme mat4 uPMatrix;

// onze tijd uniforme
uniforme float uTime;

// onze muis positie uniform
uniforme vec2 uMousePosition;

// onze muis kracht
uniforme float uMouseStrength;

// als je wilt slagen voor uw vertex en textuur coords om het fragment shader
verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

void main() {
vec3 vertexPosition = aVertexPosition;

// voor de afstand tussen de hoek en de positie muis
float distanceFromMouse = afstand(uMousePosition, vec2(vertexPosition.x, vertexPosition.y));

// dit zal bepalen hoe dicht de rimpels worden van elkaar. Hoe groter het getal, hoe meer rimpels krijg je
float rippleFactor = 6.0;

// bereken onze ripple effect
float rippleEffect = cos(rippleFactor * (distanceFromMouse – (uTime / 120.0)));

// bereken onze vervorming
float distortionEffect = rippleEffect * uMouseStrength;

// toepassen in ons vertex positie
vertexPosition += distortionEffect / 15.0;

gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

// varyings
vTextureCoord = aTextureCoord;
vVertexPosition = vertexPosition;
}
</script>

Als voor de fragment shader, we gaan het simpel houden. We gaan het valse licht en schaduw op basis van voor elke vertex positie:

<script id=”vliegtuig-fs” type=”x-shader/x-fragment”>
#ifdef GL_ES
precisie mediump float;
#endif

// onze varyings
verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

// onze textuur sampler (dit is de lib standaard naam, maar kan worden gewijzigd)
uniforme sampler2D uSampler0;

void main() {
// onze textuur coords
vec2 textureCoords = vTextureCoord;

// onze textuur
vec4 finalColor = texture2D(uSampler0, textureCoords);

// valse schaduwen gebaseerd op de vertex positie langs de Z-as
finalColor.rgb -= klem(-vVertexPosition.z, 0.0, 1.0);

// valse lichten gebaseerd op de vertex positie langs de Z-as
finalColor.rgb += klem(vVertexPosition.z, 0.0, 1.0);

// handling premultiplied alpha (handig als we een png-transparantie)
finalColor = vec4(finalColor.rgb * finalColor.een, finalColor.a);

gl_FragColor = finalColor;
}
</script>

En daar ga je!

Zie de Pen curtains.js rimpeleffect bijvoorbeeld door Martin Laxenaire (@martinlaxenaire) op CodePen.

Met deze twee eenvoudige voorbeelden, die we hebben gezien hoe om een vliegtuig te maken en ermee omgaan.

Video ‘ s en verplaatsing van shaders

Onze laatste voorbeeld zal maken van een basis fullscreen video slideshow met behulp van een verplaatsing van de arcering voor het verbeteren van de overgangen.

Verplaatsing shader concept

De verplaatsing shader zal maken van een mooie distortion effect. Het zal worden geschreven in ons fragment shader met een grijswaarde afbeelding en het compenseren van de pixel-coördinaten van de video ‘ s op basis van de textuur RGB-waarden. Hier is het beeld dat we zullen gebruiken:

Het effect zal worden berekend op basis van elke pixel RGB-waarde, met een zwarte pixel wordt [0, 0, 0] en een witte pixel [1, 1, 1] (GLSL-equivalent voor [255, 255, 255]). Om te vereenvoudigen, gebruiken we alleen de rode kanaal, met een afbeelding in grijswaarden rood, groen en blauw zijn altijd gelijk.

U kunt proberen om uw eigen afbeelding in grijswaarden (het werkt geweldig met geometrische vorm ) om uw unieke transitie-effect.

Meerdere texturen en video ‘ s

Een vliegtuig kan meer dan een structuur gewoon door het toevoegen van meerdere afbeeldingen tags. Dit keer, in plaats van de beelden willen we gebruik maken van video ‘ s. We moeten gewoon vervangen door de <img / > – tags met een <video />. Er zijn echter twee dingen die je moet weten als het gaat om video:

  • De video zal altijd passen de exacte grootte van het vliegtuig, wat betekent dat je vliegtuig heeft dezelfde breedte/hoogte-verhouding van uw video. Dit is niet een big deal tho, omdat het gemakkelijk te verwerken met de CSS.
  • Op mobiele apparaten, kunnen we niet automatisch afspelen van video ‘ s zonder dat een gebruiker gebaar, zoals een klik op de gebeurtenis. Het is dus veiliger voor het toevoegen van een “enter site” knop en start met onze video ‘ s.

HTML

De HTML is nog steeds vrij eenvoudig. We maken onze canvas div wrapper, ons vliegtuig div met de texturen en een knop voor het activeren van de video automatisch afspelen. Let gewoon op het gebruik van de gegevens-sampler-kenmerk op de beeld-en video-tags—het zal nuttig zijn in onze fragment shader.

<body>
<div id=”canvas”></div>
<!– deze div omgaan met de fullscreen video formaten en posities –>
<div class=”vliegtuig-wrapper”>
<div class=”vliegtuig”>
<!– merk hier maken we gebruik van de gegevens-sampler kenmerk om de naam van onze sampler uniformen –>
<img src=”path/to/displacement.jpg” data-sampler=”verplaatsing” />
<video src=”/pad / naar/video.mp4″ data-sampler=”firstTexture”></video>
<video src=”/pad / naar/video-2.mp4″ data-sampler=”secondTexture”></video>
</div>
</div>

<div id=”vul-site-wrapper”>
<span id=”vul-site”>
Klik om de site
</span>
</div>
</body>
CSS

De stylesheet zal best een paar dingen: weergave van de knop verbergen en het doek voor de gebruiker heeft ingevoerd op de site, het formaat en de positie van onze vliegtuig-wrapper div verwerken fullscreen reageren video ‘ s.

@media screen {

body {
margin: 0;
font-size: 18px;
font-family: ‘PT Sans’, Verdana, sans-serif;
achtergrond: #212121;
line-height: 1.4;
hoogte: 100vh;
breedte: 100vw;
overflow: hidden;
}

/*** tekenpapier ***/

#canvas {
position: absolute;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
z-index: 10;

/* verberg het doek totdat de gebruiker op de knop */
opacity: 0;
overgang: de opaciteit van 0,5 s gemak-in;
}

/* geef het canvas */
.video-begonnen #canvas {
dekking: 1;
}

.vliegtuig-wrapper {
position: absolute;

/* centrum ons vliegtuig wrapper */
left: 50%;
top: 50%;
transformeren: translate(-50%, -50%);
z-index: 15;
}

.vlak {
position: absolute;
top: 0;
rechts: 0;
bottom: 0;
links: 0;

/* vertel de gebruiker, kan hij op het vliegtuig */
cursor: pointer;
}

/* verbergen van de originele beelden en video ‘ s */
.vlak img, .vlak video {
display: none;
}

/* center-de-knop */
#enter-site-wrapper {
display: flex;
rechtvaardiging-inhoud: center;
lijn-items: center;
uitlijnen-inhoud: center;
position: absolute;
top: 0;
rechts: 0;
bottom: 0;
links: 0;
z-index: 30;

/* verberg de knop totdat alles klaar is */
opacity: 0;
overgang: de opaciteit van 0,5 s gemak-in;
}

/* toon de knop */
.gordijnen-klaar #enter-site-wrapper {
dekking: 1;
}

/* verberg de knop na de gebeurtenis click */
.gordijnen-klaar.video-begonnen #enter-site-wrapper {
opacity: 0;
pointer-evenementen: none;
}

#enter-site {
padding: 20px;
kleur: wit;
achtergrond: #ee6557;
max-width: 200px;
text-align: center;
cursor: pointer;
}

}

/* fullscreen video responsieve */
@media screen and (max-aspect-ratio: 1920/1080) {
.vliegtuig-wrapper {
hoogte: 100vh;
breedte: 177vh;
}
}

@media screen and (min-aspect-ratio: 1920/1080) {
.vliegtuig-wrapper {
breedte: 100vw;
hoogte: 56.25 vw;
}
}
JavaScript

Voor de JavaScript, we zullen gaan als dit:

  • Een paar variabelen om onze slideshow staat
  • Het maken van de Gordijnen object en voeg het vliegtuig naar het
  • Als het vliegtuig is klaar, luisteren naar een click-event van start met onze video ‘ s afspelen (let op het gebruik van de playVideos () – methode). Voeg nog een klik op de gebeurtenis om te schakelen tussen de twee video ‘ s.
  • Update van onze overgang timer uniform binnen de onRender() methode

venster.onload = function() {

// hier zullen wij die structuur is zichtbaar en de timer om de overgang tussen de beelden
var activeTexture = 1;
var transitionTimer = 0;

// set-up van onze WebGL context en voeg de doek om ons wrapper
var webGLCurtain = nieuwe Gordijnen(“canvas”);

// haal ons vliegtuig element
var planeElements = document.getElementsByClassName(“plane”);

// een aantal fundamentele parameters
var params = {
vertexShaderID: “vliegtuig-vs”,
fragmentShaderID: “vliegtuig-fs”,
imageCover: false, // onze verplaatsing textuur heeft om fit het vliegtuig
uniformen: {
transitionTimer: {
naam: “uTransitionTimer”,
type: “1f”,
waarde: 0,
},
},
}

var vliegtuig = webGLCurtain.addPlane(planeElements[0], params);

// maak ons vliegtuig
vlak.onReady(function() {
// weergave van de knop
document.lichaam.classList.toevoegen(“gordijnen-klaar”);

// wanneer ons vliegtuig klaar is voegen we een klik op de event-listener die zal u de actieve textuur waarde
planeElements[0].addEventListener(“click”, function() {
als(activeTexture == 1) {
activeTexture = 2;
}
anders {
activeTexture = 1;
}
});

// klik op de video ‘ s afspelen
document.getElementById(“voer-site”).addEventListener(“click”, function() {
// weergave van canvas en verbergen de knop
document.lichaam.classList.toevoegen(“video-slag”);

// onze video ‘ s
vlak.playVideos();
}, false);

}).onRender(function() {
// toename of afname van onze timer gebaseerd op de actieve textuur waarde
// op 60fps moet deze laatste een tweede
als(activeTexture == 2) {
transitionTimer = Wiskunde.min(60, transitionTimer + 1);
}
anders {
transitionTimer = Wiskunde.max(0, transitionTimer – 1);
}
// update van onze overgang timer uniform
vlak.uniformen.transitionTimer.waarde = transitionTimer;
});
}
Shaders

Dit is waar de magie zal optreden. Zoals in ons eerste voorbeeld, de vertex shader niet veel en je te richten op de fragment shader dat zal leiden tot een “dive-in” effect:

<script id=”vliegtuig-vs” type=”x-shader/x-vertex”>
#ifdef GL_ES
precisie mediump float;
#endif

// standaard verplichte variabelen
kenmerk vec3 aVertexPosition;
kenmerk vec2 aTextureCoord;

uniforme mat4 uMVMatrix;
uniforme mat4 uPMatrix;

// varyings
verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

// aangepaste uniformen
uniforme float uTransitionTimer;

void main() {

vec3 vertexPosition = aVertexPosition;

gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

// varyings
vTextureCoord = aTextureCoord;
vVertexPosition = vertexPosition;
}
</script>

<script id=”vliegtuig-fs” type=”x-shader/x-fragment”>
#ifdef GL_ES
precisie mediump float;
#endif

verschillende vec3 vVertexPosition;
verschillende vec2 vTextureCoord;

// aangepaste uniformen
uniforme float uTransitionTimer;

// onze texturen samplers
// let op hoe het overeenkomt met onze data-sampler kenmerken
uniforme sampler2D firstTexture;
uniforme sampler2D secondTexture;
uniforme sampler2D verplaatsing;

void main( void ) {
// onze textuur coords
vec2 textureCoords = vec2(vTextureCoord.x, vTextureCoord.y);

// onze verplaatsing textuur
vec4 displacementTexture = texture2D(verplaatsing, textureCoords);

// onze verplaatsing factor is een float variërend van 1 tot en met 0 op basis van de timer
float displacementFactor = 1.0 – (cos(uTransitionTimer / (60.0 / 3.141592)) + 1.0) / 2.0;

// het effect factor zal vertellen die manier willen we verdringen onze pixels
// de verder van het middelpunt van de video ‘ s, des te sterker zal worden
vec2 effectFactor = vec2((textureCoords.x – 0.5) * 0.75, (textureCoords.y – 0.5) * 0.75);

// bereken ons ontheemd coördinaten naar onze eerste video
vec2 firstDisplacementCoords = vec2(textureCoords.x – displacementFactor * (displacementTexture.r * effectFactor.x), textureCoords.y – displacementFactor * (displacementTexture.r * effectFactor.y));
// tegenover verplaatsing effect op de tweede video
vec2 secondDisplacementCoords = vec2(textureCoords.x – (1.0 – displacementFactor) * (displacementTexture.r * effectFactor.x), textureCoords.y – (1.0 – displacementFactor) * (displacementTexture.r * effectFactor.y));

// de texturen
vec4 firstDistortedColor = texture2D(firstTexture, firstDisplacementCoords);
vec4 secondDistortedColor = texture2D(secondTexture, secondDisplacementCoords);

// blend beide texturen, gebaseerd op onze verplaatsing factor
vec4 finalColor = mix(firstDistortedColor, secondDistortedColor, displacementFactor);

// handling premultiplied alpha
finalColor = vec4(finalColor.rgb * finalColor.een, finalColor.a);

// onze shader
gl_FragColor = finalColor;
}
</script>

Hier is onze kleine video slideshow met een cool effect overgang:

Zie de Pen curtains.js video slideshow door Martin Laxenaire (@martinlaxenaire) op CodePen.

Dit voorbeeld is een geweldige manier om u te tonen hoe te maken van een diavoorstelling met curtains.js: wilt u mogelijk om afbeeldingen te gebruiken in plaats van video ‘s, het wijzigen van de verplaatsing van de textuur, het wijzigen van de fragment shader of meer dia’ s…

U gaat dieper

We hebben net geschraapt het oppervlak van wat mogelijk is met curtains.js. Je zou kunnen proberen te maken van meerdere vliegtuigen met een coole muis over effect voor uw artikel duimen bijvoorbeeld. De mogelijkheden zijn bijna eindeloos.

Als je meer wilt zien van voorbeelden die alle die basis gebruik, kunt u in de bibliotheek de website of de GitHub repo.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!