html 鼠标滚动 动画效果,html5鼠标滚动植树生长动画特效

特效描述：html5鼠标滚动 植树生长动画。html5植树生长动画

代码结构

1. 引入JS

2. HTML代码

0

data-top="transform:translateY(0px)"

data--875-top="transform:translateY(300px)"

data-anchor-target="#slide-1"

>

data-top="opacity: 0;"

data--1600-top="opacity: 0; transform: scale(0.5); bottom: 71px;"

data--2000-top="opacity: 1; transform: scale(0.5); bottom: 90px;"

data--4000-top="opacity: 1; transform: scale(1); bottom: 426px;"

data-anchor-target="#slide-1"

>

data-top="opacity: 0; transform: scale(0.3); bottom: 71px;"

data--2000-top="opacity: 0; transform: scale(0.3); bottom: 71px;"

data--2212-top="opacity: 1; transform: scale(0.45); bottom: 81px;"

data--4000-top="opacity: 1; transform: scale(1); bottom: 309px;"

data-anchor-target="#slide-1"

>

data-top="opacity: 0; transform: scale(0.3);"

data--2212-top="opacity: 0; transform: scale(0.3); bottom: 71px;"

data--2700-top="opacity: 1; transform: scale(0.55); bottom: 81px;"

data--4000-top="opacity: 1; transform: scale(1); bottom: 205px;"

data-anchor-target="#slide-1"

>

data-top="opacity: 0; transform: scale(0.3);"

data--3000-top="opacity: 0; transform: scale(0.52);"

data--3300-top="opacity: 1; transform: scale(0.60);"

data--4000-top="opacity: 1; transform: scale(1);"

data-anchor-target="#slide-1"

>

data-top="opacity: 0;"

data--1600-top="opacity: 0; transform: scale(0.3, 0.6);"

data--2000-top="opacity: 1; transform: scale(0.3, 0.6);"

data--4000-top="transform: scale(1,1);"

data-anchor-target="#slide-1"

>

data-top="opacity: 0; transform: scale(0.6);"

data--3000-top="opacity: 0.2; transform: scale(0.6);"

data--4000-top="opacity: 1; transform: scale(1);"

data-anchor-target="#slide-1"

>

var s = skrollr.init({

render: function(data) {

//Log the current scroll position.

$('#info').text(data.curTop);

}

});