gsap实现图片幻灯片效果
代码语言:html
所属分类:幻灯片
代码描述:gsap实现图片幻灯片效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap"); :root { --bg: #171717; } * { box-sizing: border-box; margin: 0; padding: 0; } body { position: relative; width: 100%; height: 100vh; cursor: none; overflow: hidden; } button { background: none; outline: none; border: none; cursor: none; } button::-moz-focus-inner { border: none; } #app { min-width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: center; background: var(--bg); } .slider--container { position: relative; width: 1000px; height: 500px; overflow: hidden; } .slider--container::after { content: ""; position: absolute; top: 0; left: 0%; width: 100%; height: 100%; background: linear-gradient(90deg, var(--bg) 0%, transparent 10%, transparent 90%, var(--bg) 100%); pointer-events: none; } .slider__wrapper { min-width: 100%; min-height: 90%; display: grid; grid-template-columns: 150px minmax(500px, 1fr) 150px; place-items: center; } .slider__btn--container { --size: 60px; position: relative; width: var(--size); height: var(--size); display: flex; justify-content: center; align-items: center; } .slider__btn--container button { font-family: "Montserrat"; width: 100%; height: 100%; color: #fff; opacity: 0; } .slider { min-width: 100%; min-height: 100%; position: relative; overflow: hidden; } .slider .slides__wrapper .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .slider .slides__wrapper .slide__img { width: 100%; height: 100%; } .slider .slides__wrapper .slide__img img { width: 100%; height: 100%; object-fit: cover; } .slider .slides__wrapper .slide.active { display: block; } .slider .slides__wrapper .slide:not(.active) { display: none; } .slider .transition-slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; transform: scaleX(0); } .marquee__wrapper { position: absolute; left: 0%; top: 45%; transform: translate(-20%, -50%); color: #fff; mix-blend-mode: difference; pointer-events: none; user-select: none; overflow: hidden; } .marquee__wrapper .marquees .marquee { display: flex; white-space: nowrap; } .marquee__wrapper .marquees .marquee .item { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: "Playfair Display"; font-size: 800%; text-transform: uppercase; letter-spacing: 10px; white-space: nowrap; overflow: hidden; text-align: center; font-weight: 900; animation: line-crawing-animation 6s linear infinite; } .marquee__wrapper .marquees .marquee .item .number { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 38px 0; margin: 0 40px 0 25px; } .marquee__wrapper .marquees .marquee .item .number p:nth-child(1) { font-size: 3.75rem; } .marquee__wrapper .marquees .marquee .item .number p:nth-child(2) { font-size: 2.5rem; margin-top: 13px; } .marquee__wrapper .marquees .marquee .item .letter { transform: translateY(100%); opacity: 0; } .marquee__wrapper .marquees .marquee.active { display: block; } .marquee__wrapper .marquees .marquee:not(.active) { display: none; } .slider__progress--container { width: 35%; height: 60px; margin: 0px auto; display: flex; justify-content: space-around; align-items: center; opacity: 0; } .slider__progress--container .slide-num { color: #fff; font-weight: bold; font-size: 0.8rem; font-family: "Montserrat"; } .slider__progress--container .progress { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.25); margin: 0 1.2rem; } .slider__progress--container .progress span { position: absolute; lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0