視差滾動網頁設計-學習筆記

發表於

視差滾動網頁設計 - 學習筆記

努力是成功之母。 - 賽凡提斯

概述 - 視差滾動

  • 當使用者滾動滑鼠滾輪（捲軸）時，將多層背景以不同速度移動，形成3D的垂直運動效果，造成視覺上的錯覺並增加趣味性。
  • 原理是在二維場景中創建一個深度錯覺，在攝影機移動過程中，讓背景圖像的移動速度比前景圖像慢。

固定背景圖-滾動改變位置CSS transform

1
2
3
4
5
.wrap {
  background-position: bottom center; /*背景圖顯示位置*/
  background-size: cover; /*圖片全畫面*/
  background-attachment: fixed; /*固定背景圖*/
}
1
2
3
// bg scroll
$('#profiles').css('background-position-y', -(scrollPos / 2) + 'px')
$('#header-ele').css('transform', 'translateY( ' + (scrollPos / 2) + 'px )')

選單滑動效果scrollTop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function(){

    $('.scrollTop').click(function(e){
        e.preventDefault(); //取消href跳動效果
        var target = $(this).attr('href'); //存取點選的href
        var targetPos = $(target).offset().top; //存取點選的位置
        //console.log(target, targetPos) console測試
        $('html, body').animate({scrollTop: targetPos}, 1000); //滾動到點選的位置
    });

    $(window).scroll(function(){
        var scrollPos = $(window).scrollTop(); //存取滾動值
        var windowHeight = $(window).height(); //存取畫面高度
        // console.log(scrollPos, windowHeight);

        $('.scrollTop').each(function(){ //each 讀取所有值
        var target = $(this).attr('href'); 
        var targetPos = $(target).offset().top;
        var targetHeight = $(target).outerHeight();
        // console.log(target, targetPos, targetHeight)
        if (targetPos - 1 <= scrollPos && (targetPos + targetHeight) > scrollPos){
            // 滾動到指定區塊
            $('.scrollTop').removeClass('active')
            $(this).addClass('active');
            } else {
            $(this).removeClass('active')
            }
        });
    });

});

動態進度條progress-bar

1
2
3
.progress-bar {
  transition: width 3s ease; /*寬度動態效果速度*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
var showSkill = false;

// progress bar
    var skillTop = $('#skills').position().top;
    // console.log('skillTop', skillTop);
    if (skillTop <= (scrollPos + windowHeight / 2) && !showSkill) {
    showSkill = true;
        $('#skills .progress-bar').each(function(){
            var thisValue = $(this).data('progress');//讀取progress data
            // console.log('thisValue', thisValue);
            $(this).css('width', thisValue + '%');//增加progress寬度
        });
    }

滾動套用 CSS 效果

1
2
3
4
5
6
7
8
9
10
// animated
.animated {
  opacity: 0; /*透明隱藏*/
  transition: all 1.5s; /*漸變顯示*/
  transform: translateY(50px); /*位移效果*/
}
.fadeIn {
opacity: 1;
transform: translateY(0);
}
1
2
3
4
5
6
7
// animated
    $('.animated').each(function(){
    var thisPos = $(this).offset().top;
    if((windowHeight + scrollPos) >= thisPos) {
        $(this).addClass('fadeIn');
        }
    });

參考資料