@aziimovusa00

Как создать подобный эффект перехода и анимацию?

Очень интересно, как реализованы подобные эффекты (переходы и размытие текста)
taotajima.jp - сайт прилагаю
На чём можно реализовать такое же?
  • Вопрос задан
  • 196 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега HTML
Немного THREE.js, немного glsl и немного gsap.

И собрать это вот так: https://www.youtube.com/watch?v=I9A4xTT2rh0

Но можешь расслабиться, разобраться в этом деле тебе пока не светит, в ближайшее время, раз ты задал такой вопрос, вместо того чтоб сразу полезть в devtools и разбираться что да как там. Все это дело сильно завязано на математике, тригонометрия, синусы, косинусы и тд., и умении ими манипулировать.

precision highp float;
float mirrored(float v) {
 float m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}

vec2 mirrored(vec2 v) {
 vec2 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
vec3 mirrored(vec3 v) {
 vec3 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
vec4 mirrored(vec4 v) {
 vec4 m = mod(v, 2.0);
 return mix(m, 2.0 - m, step(1.0, m));
}
float tri(float v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec2 tri(vec2 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec3 tri(vec3 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec4 tri(vec4 v) {
 return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
#define PI_2 6.283185307179586
#define PI_H 1.5707963267948966
varying vec2 vUv;
varying vec2 vUv1;
varying vec2 vUv2;
uniform vec4 time;
uniform float progress;
uniform vec3 mask;
uniform float rotation;
uniform vec4 translateDelay;
uniform vec2 accel;
uniform vec4 waveAmpFreq;
uniform vec4 waveSpeedBlend;
uniform vec4 pixels;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main(void) {
 vec2 uv = gl_FragCoord.xy / pixels.xy;
 float p = fract(progress + mask.z);

 float delayValue = p * (1.0 + translateDelay.z + translateDelay.w) - uv.y * translateDelay.w - (1.0 - uv.x) * translateDelay.z;
 delayValue = clamp(delayValue, 0.0, 1.0);

 vec2 translateValue = p + delayValue * accel;
 vec2 translateValue1 = translateDelay.xy * translateValue;
 vec2 translateValue2 = translateDelay.xy * (translateValue - 1.0 - accel);
 vec2 w = sin(time.y * waveSpeedBlend.xy + vUv.yx * waveAmpFreq.zw) * waveAmpFreq.xy;
 vec2 xy = (tri(p) * waveSpeedBlend.z + tri(delayValue) * waveSpeedBlend.w) * w;
 vec2 uv1 = vUv1 + translateValue1 + xy;
 vec2 uv2 = vUv2 + translateValue2 + xy;
 vec4 rgba1 = texture2D(texture1, mirrored(uv1));
 vec4 rgba2 = texture2D(texture2, mirrored(uv2));
 vec4 rgba = mix(rgba1, rgba2, delayValue);
 rgba = mix(vec4(0.0, 0.0, 0.0, 1.0), rgba, mask.y);
 rgba = mix(vec4(0.0), rgba, float(abs(uv.y * 2.0 - 1.0) <= mask.x));
 rgba.rgb *= 0.7;
 gl_FragColor = rgba;

}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы