視差捲動
Parallax scrolling
畫面上的物件在捲動時各以不同速度移動
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
code:pug
.bgimg-1
.caption
span.border SCROLL DOWN
div(style='color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;')
h3(style='text-align:center;') Parallax Demo
p
| Parallax scrolling (https://www.w3schools.com/howto/howto_css_parallax.asp) is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.
.bgimg-2
.caption
span.border(style='background-color:transparent;font-size:25px;color: #f7f7f7;') LESS HEIGHT
div(style='position:relative;')
div(style='color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;')
p Scroll up and down to really get the feeling of how Parallax Scrolling works.
.bgimg-3
.caption
span.border(style='background-color:transparent;font-size:25px;color: #f7f7f7;') SCROLL UP
div(style='position:relative;')
div(style='color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;')
p Scroll up and down to really get the feeling of how Parallax Scrolling works.
.bgimg-1
.caption
span.border COOL!
code:sass
body, html
height: 100%
margin: 0
font: 400 15px/1.8 "Lato", sans-serif
color: #777
.bgimg-1, .bgimg-2, .bgimg-3
position: relative
opacity: 0.65
background-attachment: fixed
background-position: center
background-repeat: no-repeat
background-size: cover
.bgimg-1
background-image: url("https://picsum.photos/1920/1080?random=1")
min-height: 100%
.bgimg-2
background-image: url("https://picsum.photos/1920/1080?random=2")
min-height: 400px
.bgimg-3
background-image: url("https://picsum.photos/1920/1080?random=3")
min-height: 400px
.caption
position: absolute
left: 0
top: 50%
width: 100%
text-align: center
color: #000
span.border
background-color: #111
color: #fff
padding: 18px
font-size: 25px
letter-spacing: 10px
h3
letter-spacing: 5px
text-transform: uppercase
font: 20px "Lato", sans-serif
color: #111
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px)
.bgimg-1, .bgimg-2, .bgimg-3
background-attachment: scroll
CSS snippet