remove experimental tileflip transition, reduce max size of media content to 95% to account for slide padding
This commit is contained in:
parent
6b0fff3512
commit
8a2f146267
|
@ -181,8 +181,8 @@ body {
|
||||||
.reveal img,
|
.reveal img,
|
||||||
.reveal video,
|
.reveal video,
|
||||||
.reveal iframe {
|
.reveal iframe {
|
||||||
max-width: 100%;
|
max-width: 95%;
|
||||||
max-height: 100%;
|
max-height: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Prevents layering issues in certain browser/transition combinations */
|
/** Prevents layering issues in certain browser/transition combinations */
|
||||||
|
@ -994,55 +994,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* TILE-FLIP TRANSITION (CSS shader)
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.reveal.tileflip .slides section.present {
|
|
||||||
-webkit-transform: none;
|
|
||||||
-webkit-transition-duration: 800ms;
|
|
||||||
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.tileflip .slides section.past {
|
|
||||||
-webkit-transform: none;
|
|
||||||
-webkit-transition-duration: 800ms;
|
|
||||||
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.tileflip .slides section.future {
|
|
||||||
-webkit-transform: none;
|
|
||||||
-webkit-transition-duration: 800ms;
|
|
||||||
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.tileflip .slides>section>section.present {
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.tileflip .slides>section>section.past {
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.tileflip .slides>section>section.future {
|
|
||||||
-webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg),
|
|
||||||
amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* FADE TRANSITION
|
* FADE TRANSITION
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -1074,6 +1025,7 @@ body {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* NO TRANSITION
|
* NO TRANSITION
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1,64 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
|
|
||||||
* Copyright (c) 2012 Branislav Ulicny
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
precision mediump float;
|
|
||||||
|
|
||||||
// Uniform values from CSS
|
|
||||||
|
|
||||||
uniform float amount;
|
|
||||||
uniform float tileOutline;
|
|
||||||
|
|
||||||
// Built-in uniforms
|
|
||||||
|
|
||||||
uniform vec2 u_meshSize;
|
|
||||||
uniform vec2 u_textureSize;
|
|
||||||
|
|
||||||
// Varyings passed in from vertex shader
|
|
||||||
|
|
||||||
varying float v_depth;
|
|
||||||
varying vec2 v_uv;
|
|
||||||
|
|
||||||
// Main
|
|
||||||
|
|
||||||
void main()
|
|
||||||
{
|
|
||||||
// FIXME: Must swap x and y as a workaround for:
|
|
||||||
// https://bugs.webkit.org/show_bug.cgi?id=96285
|
|
||||||
vec2 u_meshSize = u_meshSize.yx;
|
|
||||||
|
|
||||||
vec4 c = vec4(1.0);
|
|
||||||
|
|
||||||
// Fade out.
|
|
||||||
c.a = 1.0 - v_depth;
|
|
||||||
|
|
||||||
// Show grid outline.
|
|
||||||
if (tileOutline >= 0.5) {
|
|
||||||
float cell_width = u_textureSize.x / u_meshSize.y;
|
|
||||||
float cell_height = u_textureSize.y / u_meshSize.x;
|
|
||||||
float dd = 1.0;
|
|
||||||
|
|
||||||
if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0
|
|
||||||
|| mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) {
|
|
||||||
if (amount > 0.0)
|
|
||||||
c.rgb = vec3(1.0 - sqrt(amount));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0,
|
|
||||||
0.0, c.g, 0.0, 0.0,
|
|
||||||
0.0, 0.0, c.b, 0.0,
|
|
||||||
0.0, 0.0, 0.0, c.a);
|
|
||||||
}
|
|
|
@ -1,141 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright (c)2012 Adobe Systems Incorporated. All rights reserved.
|
|
||||||
* Copyright (c)2012 Branislav Ulicny
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
precision mediump float;
|
|
||||||
|
|
||||||
// Built-in attributes
|
|
||||||
|
|
||||||
attribute vec4 a_position;
|
|
||||||
attribute vec2 a_texCoord;
|
|
||||||
attribute vec3 a_triangleCoord;
|
|
||||||
|
|
||||||
// Built-in uniforms
|
|
||||||
|
|
||||||
uniform mat4 u_projectionMatrix;
|
|
||||||
uniform vec2 u_meshSize;
|
|
||||||
uniform vec2 u_textureSize;
|
|
||||||
|
|
||||||
// Uniform passed in from CSS
|
|
||||||
|
|
||||||
uniform mat4 transform;
|
|
||||||
uniform float amount;
|
|
||||||
uniform float randomness;
|
|
||||||
uniform vec3 flipAxis;
|
|
||||||
|
|
||||||
// Varyings
|
|
||||||
|
|
||||||
varying float v_depth;
|
|
||||||
varying vec2 v_uv;
|
|
||||||
|
|
||||||
// Constants
|
|
||||||
|
|
||||||
const float PI2 = 1.5707963267948966;
|
|
||||||
|
|
||||||
// Create perspective matrix
|
|
||||||
|
|
||||||
mat4 perspectiveMatrix(float p)
|
|
||||||
{
|
|
||||||
float perspective = - 1.0 / p;
|
|
||||||
return mat4(
|
|
||||||
1.0, 0.0, 0.0, 0.0,
|
|
||||||
0.0, 1.0, 0.0, 0.0,
|
|
||||||
0.0, 0.0, 1.0, perspective,
|
|
||||||
0.0, 0.0, 0.0, 1.0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rotate vector
|
|
||||||
|
|
||||||
vec3 rotateVectorByQuaternion(vec3 v, vec4 q)
|
|
||||||
{
|
|
||||||
vec3 dest = vec3(0.0);
|
|
||||||
|
|
||||||
float x = v.x, y = v.y, z = v.z;
|
|
||||||
float qx = q.x, qy = q.y, qz = q.z, qw = q.w;
|
|
||||||
|
|
||||||
// Calculate quaternion * vector.
|
|
||||||
|
|
||||||
float ix = qw * x + qy * z - qz * y,
|
|
||||||
iy = qw * y + qz * x - qx * z,
|
|
||||||
iz = qw * z + qx * y - qy * x,
|
|
||||||
iw = -qx * x - qy * y - qz * z;
|
|
||||||
|
|
||||||
// Calculate result * inverse quaternion.
|
|
||||||
|
|
||||||
dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;
|
|
||||||
dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;
|
|
||||||
dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;
|
|
||||||
|
|
||||||
return dest;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert rotation.
|
|
||||||
|
|
||||||
vec4 axisAngleToQuaternion(vec3 axis, float angle)
|
|
||||||
{
|
|
||||||
vec4 dest = vec4(0.0);
|
|
||||||
|
|
||||||
float halfAngle = angle / 2.0;
|
|
||||||
float s = sin(halfAngle);
|
|
||||||
|
|
||||||
dest.x = axis.x * s;
|
|
||||||
dest.y = axis.y * s;
|
|
||||||
dest.z = axis.z * s;
|
|
||||||
dest.w = cos(halfAngle);
|
|
||||||
|
|
||||||
return dest;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Random function based on the tile coordinate.
|
|
||||||
// This will return the same value for all the vertices in the same tile (i.e. two triangles).
|
|
||||||
|
|
||||||
float random(vec2 scale)
|
|
||||||
{
|
|
||||||
// Use the fragment position as a different seed per-pixel.
|
|
||||||
return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main
|
|
||||||
|
|
||||||
void main()
|
|
||||||
{
|
|
||||||
// FIXME: We must swap x and y as a workaround for:
|
|
||||||
// https://bugs.webkit.org/show_bug.cgi?id=96285
|
|
||||||
vec2 u_meshSize = u_meshSize.yx;
|
|
||||||
|
|
||||||
vec4 pos = a_position;
|
|
||||||
float aspect = u_textureSize.x / u_textureSize.y;
|
|
||||||
|
|
||||||
float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y;
|
|
||||||
float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x;
|
|
||||||
|
|
||||||
vec3 centroid = vec3(cx, cy, 0.0);
|
|
||||||
float r = random(vec2(10.0, 80.0));
|
|
||||||
float rr = mix(0.0, PI2, amount * (1.0 + randomness * r));
|
|
||||||
|
|
||||||
vec4 rotation = vec4(flipAxis, rr);
|
|
||||||
vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w);
|
|
||||||
|
|
||||||
vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid;
|
|
||||||
pos.xyz = newPosition;
|
|
||||||
|
|
||||||
gl_Position = u_projectionMatrix * transform * pos;
|
|
||||||
|
|
||||||
// Pass varyings to the fragment shader.
|
|
||||||
v_depth = abs(rr)/ PI2;
|
|
||||||
v_uv = a_texCoord;
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user