滾動視差 background-attachment

時間 2019-11-25

標籤滾動視差 background attachment 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
section {
    height: 100vh;
}

.g-img {
    background-image: url(./back.jpeg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
</style>

<body>
    <section class="g-word">Header</section>
    <section class="g-img">IMG1</section>
    <section class="g-word">Content1</section>
    <section class="g-img">IMG2</section>
    <section class="g-word">Content2</section>
    <section class="g-img">IMG3</section>
    <section class="g-word">Footer</section>
</body>

</html>

1. 視差滾動
2. 滾動視差-3D
3. 視差滾動demo （pc）
4. 視差滾動-background-attachement
5. HTML5 Canvas 視差滾動動畫
6. CoordinatorLayout與CollapsingToolbarLayout實現視差滾動動畫和Toolbar滾動
7. 視差滾動(Parallax Scrolling)插件補充
8. 滾動視差？CSS 不在話下
9. 用 Stellar.js 製做視差滾動效果
10. 2015.8.12隨筆之視差滾動對比
更多相關文章...
• ionic 滾動條 - ionic 教程
• XML DOM 瀏覽器差異 - XML DOM 教程
• Git可視化極簡易教程 — Git GUI使用方法
• 算法總結-滑動窗口

相關標籤/搜索