@aziimovusa00

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

Очень интересно, как реализованы подобные эффекты (переходы и размытие текста)
taotajima.jp - сайт прилагаю
На чём можно реализовать такое же?
  • Вопрос задан
  • 199 просмотров
Решения вопроса 1
profesor08
@profesor08
Немного 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;

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

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

Войти через центр авторизации
Похожие вопросы
Sarex Москва
от 140 000 до 210 000 руб.
от 85 000 до 100 000 руб.
Sveak Барнаул
от 50 000 руб.