STEP. 1
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
STEP. 2
$('body').mousewheel(function(e,delta){
var scrollTop = $(window).scrollTop()
if(delta==-1){
var aboutme_intro = $('#section3_intro')
if(isScrolledIntoView(aboutme_intro)){
aboutme_intro.css({"animation-play-state":"running"})
}
}
})
STEP. 3
/*animation*/
@keyframes fadeInDown{
0%{
opacity:0;
-webkit-transform:translate3d(0,-30%,0);
transform:translate3d(0,-30%,0);}
100%{
opacity:1;
-webkit-transform:none;
transform:none;}}
.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown;
}
- 각종 애니메이션 셋팅 -
/*animation*/
@keyframes fadeInDown{
0%{
opacity:0;
-webkit-transform:translate3d(0,-30%,0);
transform:translate3d(0,-30%,0);}
100%{
opacity:1;
-webkit-transform:none;
transform:none;}}
.fadeInDown{
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown;
}
@keyframes fadeInUp{
0%{
opacity:0;
-webkit-transform:translateY(100px);
transform:translateY(100px);}
100%{
opacity:1;
-webkit-transform:none;
transform:none;}}
.fadeInUp{
-webkit-animation-name:fadeInUp;
animation-name:fadeInUp;
}
@keyframes fadeInLeft{
0%{
opacity:0;
-webkit-transform:translate3d(-30%,0,0);
transform:translate3d(-30%,0,0);}
100%{
opacity:1;
-webkit-transform:none;
transform:none;}}
.fadeInLeft{
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft;
}
@keyframes fadeInRight{
0%{
opacity:0;
-webkit-transform:translate3d(30%,0,0);
transform:translate3d(30%,0,0);}
100%{
opacity:1;
-webkit-transform:none;
transform:none;}}
.fadeInRight{
-webkit-animation-name:fadeInRight;
animation-name:fadeInRight;
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
transform: translateX(20px);
}
80% {
transform: translateX(-5px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.bounceInLeft{
-webkit-animation-name:bounceInLeft;
animation-name:bounceInLeft;
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
transform: translateX(-20px);
}
80% {
transform: translateX(55px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.bounceInLeft{
-webkit-animation-name:bounceInRight;
animation-name:bounceInRight;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.bounceIn{
-webkit-animation-name:bounceIn;
animation-name:bounceIn;
}
@keyframes moveUp {
0% {
opacity: 0;
transform: translateY(200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.moveUp{
-webkit-animation-name:moveUp;
animation-name:moveUp;
}
제이쿼리와 CSS, 애니메이션을 셋팅하고 작동하는지 확인.
* 해당 엘리먼트에 클래스 붙여주지 않아도 됌.
'퍼블리싱 > TIP' 카테고리의 다른 글
| 안드로이드 어플 다운로드 할 수 있는 페이지 링크걸기 (0) | 2016.01.27 |
|---|---|
| 크롬에서 닫은 탭 다시열기 (0) | 2016.01.18 |
| 이미지 슬라이드 (0) | 2016.01.14 |
| isScrolledView moveUp 차례대로 효과주기 (0) | 2016.01.14 |
| 마우스 휠 이벤트 - 원페이지 (mousewheel event - onepage) (12) | 2016.01.12 |
