Demo:實作捲動觸發CSS動畫

1 minute read

demo

第一部分:使用CSS撰寫Slide In效果

這個單元使用的技巧有:

  1. 使用transition讓屬性值改變時有動畫的效果
  2. 使用animation-fill-mode設定結束狀態
  3. 使用transform:translate移動元素

1. 使用transition讓屬性值改變時有動畫的效果

transition 可以將CSS改變的過程變成動畫。詳細玩一下CSS3 Transitions就懂了。

2. 使用animation-fill-mode設定結束狀態

animation-fill-mode 結束後的狀態

  • none:默认值。不设置对象动画之外的状态
  • forwards:结束后保持动画结束时的状态,但当animation-direction为0,则动画不执行,持续保持动画开始时的状态
  • backwards:结束后返回动画开始时的状态
  • both:结束后可遵循forwards和backwards两个规则。

3. 使用transform:translate移動元素

使用transform: translate(x,y)來移動元素。其他常用的還有:

  • rotate(-20deg) 用來旋轉元素
  • scale(x,y) 等比例放大或縮小元素

可以到W3C Scholl玩玩看 CSS3 2D Transforms

程式碼(CSS部分)

@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
.animate{
	-moz-transition: 2s ease-in-out;
	-webkit-transition: 2s ease-in-out;
	transition: 2s ease-in-out;

	-moz-animation: fadeIn ease-in 1;
	-webkit-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;

	-webkit-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}
#phone.animate {
	-webkit-transform: translate(14em,0);
	-moz-transform: translate(14em,0);
	transform: translate(14em,0);
}

#monitor.animate {
	-webkit-transform: translate(3em,0);
	-moz-transform: translate(3em,0);
	transform: translate(3em,0);
}

程式碼(JS部分)

用簡單的addClass方法即可完成。

$(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 300) {
             $('#monitor').addClass('animate');
             $('#phone').addClass('animate');
        };

			.
			.
			.

    });
});

第二部分:使用CSS讓圖片永久旋轉

keyframe:用來編寫這個動畫的過程。設定好旋轉的動作命名為rotaRadial。

 @-webkit-keyframes rotateRadial {
 	from {
 		-webkit-transform: rotate(0deg);
 	}
 	to {
 		-webkit-transform: rotate(360deg);
 	}
 }

 @keyframes rotateRadial {
 	from {
 		transform: rotate(0deg);
 	}
 	to {
 		transform: rotate(360deg);
 	}
 }

設定幾個參數來達到我們要的效果:

  1. 動畫名稱指定剛剛創造的keyframe名稱rotateRadial
  2. 完成一次動畫的時間設為10s秒。
  3. 永不停止。animation-iteration-count: infinite;
  4. 將動畫轉變的加速曲線設為線性。animation-timing-function: linear;
.always-rotate{
	-webkit-animation-name: rotateRadial;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	animation-name: rotateRadial;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

第三部分:讓圖片變大

原本圖片的大小,設成0。

.anim-img{
	position: absolute;
	left: 0;
	opacity: 0;
}

後來圖片的大小

img.grow-img{
	width: 200px;
	height: 200px;
}

.animate設定了transition,因此會有動畫效果。

$(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 300) {
            $('#monitor').addClass('animate');
            $('#phone').addClass('animate');
        };


        if(y > 400){
          $('#support').find('img').addClass('animate grow-img');
          $('#speed').find('img').addClass('animate grow-img');
          $('#smart').find('img').addClass('animate grow-img');
        };

    });
});

參考連結

大量範例展示CSS動畫可以做到的效果。

Transitions & Animations - Learn to Code Advanced HTML & CSS

MDN 的 CSS 動畫說明頁,有不少的範例可以玩。

CSS 動畫 MDN

中文版的CSS字典

CSS参考手册_web前端开发参考手册系列

Leave a Comment