js+css实现shader自适应全屏幻灯片效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：js+css实现shader自适应全屏幻灯片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: black;
}

body {
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.slider {
  --x-off: 0px;
}

.slide {
  width: 200px;
  height: 300px;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255, 255, 255, 0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1),
  &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
  }

  &:nth-child(2) {
    opacity: 1;
  }

  &:nth-child(3) {
    left: calc(var(--x-off) + 50%);
  }

  &:nth-child(4) {
    left: calc(var(--x-off) + 50% + 220px);
  }

  &:nth-child(5) {
    left: calc(var(--x-off) + 50% + 440px);
  }

  &:nth-child(6) {
    left: calc(var(--x-off) + 50% + 660px);
    opacity: 0;
  }
}

.visual canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.content {
  width: min(30vw, 400px);
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  font: 400 0.85rem helvetica, sans-serif, system-ui;
  color: white;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  hyphens: auto;
  opacity: 0;
  display: none;

  & .title {
    font-family: "arial-black", system-ui;
    text-transform: uppercase;
  }

  & .description {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 0.8rem;
  }

  & button {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.slide:nth-of-type(2) .content {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.nav {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;
  display: flex;

  & .btn {
    background-color: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.6);
    margin: 0 0.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
}

.icon {
  width: 1em;
  height: 1em;
}

.icon,
.icon * {
  pointer-events: none;
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ripple {
  --clr-ripple: #ccc6;
  --clr-ripple-effect: transparent;
  background-position: center;
  transition: background 0.6s;
}

.ripple:hover {
  background: var(--clr-ripple)
    radial-gradient(circle, transparent 1%, var(--clr-ripple) 1%) center/15000%;
}

.ripple:active {
  background-color: var(--clr-ripple-effect);
  background-size: 100%;
  transition: background 0s;
}

@media (width > 650px) and (width < 900px) {
  .content {
    & .title {
      font-size: 1rem;
    }

    & .description {
      font-size: 0.7rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .slide {
    width: 160px;
    height: 270px;

    &:nth-child(3) {
      left: calc(var(--x-off) + 50%);
    }

    &:nth-child(4) {
      left: calc(var(--x-off) + 50% + 170px);
    }

    &:nth-child(5) {
      left: calc(var(--x-off) + 50% + 340px);
    }

    &:nth-child(6) {
      left: calc(var(--x-off) + 50% + 510px);
      opacity: 0;
    }
  }
}

@media (width < 650px) {
  .content {
    & .title {
      font-size: 0.9rem;
    }

    & .description {
      font-size: 0.65rem;
    }

    & button {
      font-size: 0.7rem;
    }
  }

  .slide {
    width: 130px;
    height: 220px;

    &:nth-child(3) {
      left: calc(var(--x-off) + 50%);
    }

    &:nth-child(4) {
      left: calc(var(--x-off) + 50% + 140px);
    }

    &:nth-child(5) {
      left: calc(var(--x-off) + 50% + 280px);
    }

    &:nth-child(6) {
      left: calc(var(--x-off) + 50% + 420px);
      opacity: 0;
    }
  }
}
</style>


  
  
</head>

<body >
  <svg style="display: none;">
  <path id="play" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z" />
  <path id="pause" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 96h16v320h-16zM320 96h16v320h-16z" />
</svg>
<main>
  <ul class="slider">
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">Sophie</h2>
        <p class="description">Frequency: 2π seconds. An enigmatic creature that creates fascinating patterns, honoring Sophie Germain's elegant mathematics. Her movements tell an eternal story.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">René</h2>
        <p class="description">Frequency: 2π seconds. A smoky creature moving swiftly along the path laid down by the pioneering work of René Descartes embodies the guiding principle of the stage, where equations take on a timeless beauty.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">Ada</h2>
        <p class="description">Frequency: 4π seconds. A vibrant organism, weaves intricate patterns celebrating the analytical dance of Ada Lovelace's mind. Her movements reflect the elegance and precision found in the world of algorithms.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">Doug</h2>
        <p class="description">Frequency: π seconds. A dynamic creature, navigates its realm with the agility reminiscent of Douglas Engelbart's inventive spirit. His swift movements echo the groundbreaking innovations in computer interface design.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">Iannis</h2>
        <p class="description">Frequency: 2π seconds. A visionary creator, conjures abstract patterns reflecting on the mathematical and artistic brilliance of Iannis Xenakis. His dance weaves a tapestry that transcends the boundaries between mathematics and art.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
    <li class="slide">
      <div class="visual"></div>
      <div class="content">
        <h2 class="title">Umar</h2>
        <p class="description">Frequency: 4π seconds. A luminous figure, commemorating the profound insights of the Persian polymath Umar Khayyam. His graceful movements hint at the mesmerising beauty of what the human mind can create.</p>
        <button class="more ripple">
          <div class="icon" role="button"><svg viewBox="0 0 512 512">
              <use xlink:href="#play"></use>
            </svg></div>
        </button>
    </li>
  </ul>
  <nav class='nav'>
    <div class="btn ripple prev">
      <div class="icon" role="button"><svg viewBox="0 0 512 512">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M244 400L100 256l144-144M120 256h292">
          </path>
        </svg></div>
    </div>
    <div class='btn ripple next'>
      <div class="icon" role="button"><svg viewBox="0 0 512 512">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100">
          </path>
        </svg></div>
    </div>
  </nav>
</main>
<script type="x-shader/x-fragment" data-title="Sophie">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 O;
uniform vec2 resolution;
uniform float time;
#define R resolution
#define T mod(time,6.2831)
#define S smoothstep
#define rot(a) mat2(cos(a+vec4(0,11,33,0)))
#define hue(a) (.24+.6*cos(2.3*(a)+vec3(0,83,21)))
void main(void) {
	vec2 uv = (gl_FragCoord.xy-.5*R)/min(R.x,R.y),
	p=uv;
	vec3 col = vec3(0);

	uv *= 18.;

	uv += vec2(
		sin(2.*T+uv.y),
		cos(2.*T+uv.x)
	)*.42;

	for (float i=.0; i<3.; i++) {
		col[int(i)]=vec3(
				2.5/(i+1.)*cos(T+i+5.*atan(uv.x,uv.y))
			)[int(i)]*pow(S(1.,.0,length(p)),6.);
	}

	col = pow(col,vec3(.4545));

	col = sqrt(col);
	col = S(1.,.0,.55/col);
	col = vec3(length(col));
	col *= vec3(1,.95,.9);
	col = hue(hue(1.1*sqrt(col)));


	O = vec4(col,1);
}
</script>
<script type="x-shader/x-fragment" data-title="René">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 O;
uniform float time;
uniform vec2 resolution;
#define R resolution
#define T mod(time,6.2831)
#define S smoothstep
#define hue(a) (.24+.6*cos(2.3*(a)+vec3(0,83,21)))
void main(void) {
	vec2 uv = (gl_FragCoord.xy-.5*R)/min(R.x,R.y),
	p = uv*8.;
	vec3 col = vec3(0);

	for (float i=1.; i<4.; i++) {
		p.x += sin(i*p.y+T);
		p.y += sin(i*p.x+T);
		col[int(i-1.)] += length(p)-abs(uv.x);
	}

	col = pow(col,vec3(.4545));
	col = sqrt(col);
	col = S(1.,.0,.5/col);
	col = vec3(length(col));
	col *= vec3(1,.95,.9);
	col = hue(hue(1.5*sqrt(col)));
	col.r=.0;
	col *= 1.4;

	O = vec4(col,1);
}
</script>
<.........完整代码请登录后点击上方下载按钮下载查看