Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin:0; font-size:18px; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; font-style:normal; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; margin:0; letter-spacing:0.05em;background-color: #1F1F1F } * { position:relative; box-sizing:border-box; } .box { width:400px; height:200px; color:white; margin:0 auto; margin-bottom:24px; } .box > div { display:flex; position:absolute; top:0; width:400px; height:200px; background:linear-gradient(220deg,#3d45b1,#844efc); justify-content:space-between; flex-direction:column; padding:16px; border-radius:16px; box-shadow:0px 10px 20px rgba(0,0,0,0.2); transform-origin:top center; will-change:transform; overflow:hidden; } .content { display:flex; justify-content:space-between; } .label { font-weight:bold; font-size:12px; margin-bottom:6px; } .value-right { text-align:right; } svg { position:absolute; bottom:0; left:0; width:100%; height:100%; }
JavaScript
document.body.innerHTML += `
`; for (let i = 0; i < 10; i += 1) { document.body.innerHTML += `
Bank
Card Holder name
Colin van Eenige
Expiry Date
05/25
`; } requestAnimationFrame(() => { const boxes = document.querySelectorAll(".box"); function getIntersectionRatio(i) { const a = [window.scrollY, window.scrollY + window.innerHeight]; const b = [boxes[i].offsetTop, boxes[i].offsetTop + boxes[i].clientHeight]; const max = Math.max(a[0], b[0]); const min = Math.min(a[1], b[1]); return Math.max(0, (min - max) / (b[1] - b[0])); } function onScroll() { const boxes = document.querySelectorAll(".box"); for (let i = 0; i < boxes.length; i += 1) { const intersection = getIntersectionRatio(i); const top = boxes[i].offsetTop - window.pageYOffset < 0; boxes[i].firstChild.style.cssText = ` transform-origin: ${top ? "center center" : "top center"}; position: ${top ? "fixed" : "absolute"}; transform: scale(${intersection}); opacity: ${intersection}; `; } requestAnimationFrame(onScroll); } onScroll(); }); // Option with less CPU usage, but also less FPS / smooth // window.addEventListener('scroll', onScroll);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>流畅的卡片滚动互动-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号