平滑滚动显示-GSAP

下载代码

html

css

分享到微信朋友圈

html

<main class="viewport">
    <div class="scroll-container">
        <div class="section over-hide full-height">
            <div class="section-center">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <h1 class="mb-0">scroll</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section over-hide">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 py-5">
                        <div class="section over-hide img-wrap">
                            <img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt="about">
                            <div class="img-loader"></div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-end">
                    <div class="col-lg-7 py-5">
                        <div class="section over-hide img-wrap">
                            <img src="https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" alt="about">
                            <div class="img-loader"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-7 py-5">
                        <div class="section over-hide img-wrap">
                            <img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt="about">
                            <div class="img-loader"></div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-end pb-5">
                    <div class="col-lg-7 py-5">
                        <div class="section over-hide img-wrap">
                            <img src="https://i.picsum.photos/id/1019/5472/3648.jpg?hmac=2mFzeV1mPbDvR0WmuOWSiW61mf9DDEVPDL0RVvg1HPs" alt="about">
                            <div class="img-loader"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');
@import url('https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css');

:root {
	font-size: 20px;
	--dark-blue: #102770;
	--white-gr: #c4c3ca;
	--yellow: #ffeba7;
}
body{
	color: var(--white-gr);
	background-color: var(--dark-blue);
	overflow-x: hidden;
}
h1{
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	color: var(--yellow);
	font-size: 12vw;
}
.section {
    position: relative;
	width: 100%;
	display: block;
	z-index: 2;
}
.over-hide {
    overflow: hidden;
}
.full-height {
	height: 100vh;
}
.z-bigger {
    z-index: 10 !important;
}
.section-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 10;
	transform: translateY(-50%);
}
main {
    position: relative;
	width: 100%;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.viewport {
  	overflow: hidden;
  	position: fixed;
  	height: 100%;
  	width: 100%;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
}
.scroll-container {  
  	position: absolute;  
  	width: 100%;
  	top: 0;
  	left: 0;
  	z-index: 10;
	overflow: hidden;
 	transform-style: preserve-3d;
}
.img-loader {
  	position: absolute;
  	bottom: -25%;
  	left: -25%;
  	width: 150%;
  	height: 150%;
  	background-color: var(--dark-blue);
}
.img-wrap img{
    width: 100%;
    height: auto;
    display: block;
  border-radius: 6px;
}
.logo {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: block;
	z-index: 200000;
	transition: all 250ms linear;
}
.logo img {
	height: 40px;
	width: auto;
	display: block;
	mix-blend-mode: difference;
}

JavaScript

var html = document.documentElement;
	var body = document.body;

var scroller = {
	  target: document.querySelector(".scroll-container"),
	  ease: 0.09, // <= scroll speed
	  endY: 0,
	  y: 0,
	  resizeRequest: 1,
	  scrollRequest: 0,
	};

var requestId = null;

TweenLite.set(scroller.target, {
	  rotation: 0.01,
	  force3D: true
	});

window.addEventListener("load", onLoad);

function onLoad() {    
	  updateScroller();  
	  window.focus();
	  window.addEventListener("resize", onResize);
	  document.addEventListener("scroll", onScroll); 
	}

function updateScroller() {
	  
	  var resized = scroller.resizeRequest > 0;
	    
	  if (resized) {    
	    var height = scroller.target.clientHeight;
	    body.style.height = height + "px";
	    scroller.resizeRequest = 0;
	  }
	      
	  var scrollY = window.pageYOffset || html.scrollTop || body.scrollTop || 0;

scroller.endY = scrollY;
	  scroller.y += (scrollY - scroller.y) * scroller.ease;

if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
	    scroller.y = scrollY;
	    scroller.scrollRequest = 0;
	  }
	  
	  TweenLite.set(scroller.target, { 
	    y: -scroller.y 
	  });
	  
	  requestId = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
	}

function onScroll() {
	  scroller.scrollRequest++;
	  if (!requestId) {
	    requestId = requestAnimationFrame(updateScroller);
	  }
	}

function onResize() {
	  scroller.resizeRequest++;
	  if (!requestId) {
	    requestId = requestAnimationFrame(updateScroller);
	  }
	}

const controller = new ScrollMagic.Controller();

var forEach = function(array, callback, scope) {
		for (var i = 0; i < array.length; i++) {
			callback.call(scope, i, array[i]);
		}
	};

var myNodeList = document.querySelectorAll(".img-loader");

forEach(myNodeList, function(index, value) {
		const tween = TweenMax.to(value, 2, { borderTopLeftRadius:"100%", borderTopRightRadius:"100%", delay:0.3, height: 0, ease: Power2.easeOut });
		
		const itemScene = new ScrollMagic.Scene({
			triggerElement: value,
			triggerHook: 0.6,
			reverse: false
		})
		.setTween(tween)
		.addTo(controller);
	});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg