Skip to content
Snippets Groups Projects
Commit 8a2f1462 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

remove experimental tileflip transition, reduce max size of media content to... 

remove experimental tileflip transition, reduce max size of media content to 95% to account for slide padding
parent 6b0fff35
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
css/reveal.css
+ 3
− 51
View file @ 8a2f1462
......@@ -181,8 +181,8 @@ body {
.reveal img,
.reveal video,
.reveal iframe {
max-width: 100%;
max-height: 100%;
max-width: 95%;
max-height: 95%;
}
/** 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
*********************************************/
......@@ -1074,6 +1025,7 @@ body {
transition: none;
}
/*********************************************
* NO TRANSITION
*********************************************/
......
css/reveal.min.css
+ 1
− 1
View file @ 8a2f1462
This diff is collapsed.
css/shaders/tile-flip.fs deleted 100644 → 0
+ 0
− 64
View file @ 6b0fff35
/*
* 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);
}
css/shaders/tile-flip.vs deleted 100644 → 0
+ 0
− 141
View file @ 6b0fff35
/*
* 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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment