스크롤하여 요소가 표시되면 애니메이션 시작
8799 단어 CSSjQueryanimate.css
애니메이션이 움직이는 방법은 다양한 사이트에서 볼 수 있다고 생각합니다!
나도 처음 검색했을 때에는 참고하고 싶은 사이트가 많은 분, 많은 정보를 보게 되어,
결과 어떤 방법을 사용하면 좋은지 모르게 되어 버렸습니다.
jQuery에서는 애니메이션을위한 플러그인도 많이 존재하며,
각각 복잡한 움직임을 붙일 수 있지만,
간단한 구현을 하는 경우에는 jQuery만으로도 충분히 할 수 있다는 것을 깨달았습니다!
그 때문에, 이번은 플러그인을 일절 이용하지 않고,
스크롤 중에 지정한 요소가 나타나면 처리를 실행하는 방법을 소개하고 싶습니다
내용은 매우 초학자용이 되고 있습니다, 누군가의 도움이 되면 기쁩니다.
또, 보다 좋은 방법이 있으면, 코멘트 기다리고 있습니다.
이번에 실시하는 구현
처음에는 hello라는 단어가 보이지만,
스크롤하면 zoomin이라는 단어가 나옵니다.
zoomin이 화면의 절반에 도달했을 때
부드럽게 떠오르는 줌 인 애니메이션을 구현하고 있습니다.
사용하는 것
Animate.css
jQuery
Animate.css란 div등에 미리 준비된 클래스를 설정하는 것만으로
애니메이션을 적용시킬 수 있는 스타일 시트입니다.
jQuery란 JavaScript로 할 수 있는 것을,
보다 간단한 기법으로 실현할 수 있게 된 JavaScript 라이브러리의 일종입니다.
각각, 링크처에 공식 사이트를 붙였으므로 참고로 해 주세요.
구현 방법
먼저 Animate.css를 읽으면 요소의 클래스 이름에 두 개의 이름을 붙여서
좋아하는 애니메이션을 할 수 있다면 있습니다!
이번에는 확대 기능을 구현하고 싶으므로,
"animate_animated""animate_zoomIn"이라는 두 가지가 클래스 이름에 필요하다는 것이 되네요.
그것을 근거로, 아래의 코드로 구현했으므로 봐주세요.
HTML
test.html<!DOCTYPE html>
<html>
<head>
<!-- 下記でjQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="test.js" type="text/javascript"></script>
<!-- 下記でAnimate.cssを読み込む -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="test.css" type="text/css"></script>
</head>
<body>
<div class="text">hello</div>
<!-- クラス命名に注意 -->
<div class="animate__animated">zoomin</div>
</body>
</html>
※이번은 CDN으로 Animate.css, jQuery의 2개 모두 읽었습니다만, 자신에게 있던 방법으로 가 주세요.
zoomin에는 본래, 「animate_animated」 「animate_zoomIn」이라고 하는 2개의 클래스명이 필요합니다만
2개 붙여 버리면, 페이지가 로드된 시점에서 처리해 버립니다.
(스크롤하기 전에 확대해 버린다)
스크롤 할 때 처리하고 싶기 때문에 여기에서는 하나만 붙입니다.
CSS
test.css.text {
font-size: 200px;
margin: 500px;
}
.animate__animated {
font-size: 200px;
margin: 500px;
/* 下記がアニメーションに必要なコード */
visibility: hidden;
opacity: 0;
transition: 1s;
}
/* jQueryによって追加されるコード */
.animate__zoomIn {
visibility: visible;
opacity: 1;
}
스크롤의 애니메이션이 목적이기 때문에, 폰트 사이즈 등은 매우 적당합니다,,, 죄송합니다 (웃음)
자신의 css에 필요한 코드만 복사 등 하십시오.
페이지가 로드되면 zoomin의 문자가 보이지 않도록 설정하고,
스크롤하면 문자가 나타나도록 animate_zoomin으로 설정합니다.
jQuery
test.js$(window).on('scroll', function (){
var animate = $('.animate__animated');
var zoomIn = 'animate__zoomIn';
animate.each(function () {
var animateOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
// 画面の半分に表示されたら、クラスを追加する
if(scrollPos > animateOffset - wh + (wh / 2) ){
$(this).addClass(zoomIn);
}
});
});
여기서 zoomin의 문자가 화면의 절반에 표시되면,
animate__zoomIn 클래스 이름을 추가하는 구현을 수행합니다.
이렇게하면 나중에 클래스 이름이 추가되고,
스크롤하여 요소가 표시되면 애니메이션을 시작하도록 구현할 수 있습니다.
jQuery의 자세한 쓰는 방법 등은 검색하면 많이 나오므로 그쪽을 참고하십시오.
마지막으로
앞으로도 학습을 계속하고, 플러그인의 소개 등도 가능하다고 생각하고 있습니다.
봐 주셔서 감사합니다.
참고
animate.css
Animate.css에서 놀아 보았습니다.
Reference
이 문제에 관하여(스크롤하여 요소가 표시되면 애니메이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/qp___04/items/4f54523e524163b57ecc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Animate.css
jQuery
Animate.css란 div등에 미리 준비된 클래스를 설정하는 것만으로
애니메이션을 적용시킬 수 있는 스타일 시트입니다.
jQuery란 JavaScript로 할 수 있는 것을,
보다 간단한 기법으로 실현할 수 있게 된 JavaScript 라이브러리의 일종입니다.
각각, 링크처에 공식 사이트를 붙였으므로 참고로 해 주세요.
구현 방법
먼저 Animate.css를 읽으면 요소의 클래스 이름에 두 개의 이름을 붙여서
좋아하는 애니메이션을 할 수 있다면 있습니다!
이번에는 확대 기능을 구현하고 싶으므로,
"animate_animated""animate_zoomIn"이라는 두 가지가 클래스 이름에 필요하다는 것이 되네요.
그것을 근거로, 아래의 코드로 구현했으므로 봐주세요.
HTML
test.html<!DOCTYPE html>
<html>
<head>
<!-- 下記でjQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="test.js" type="text/javascript"></script>
<!-- 下記でAnimate.cssを読み込む -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="test.css" type="text/css"></script>
</head>
<body>
<div class="text">hello</div>
<!-- クラス命名に注意 -->
<div class="animate__animated">zoomin</div>
</body>
</html>
※이번은 CDN으로 Animate.css, jQuery의 2개 모두 읽었습니다만, 자신에게 있던 방법으로 가 주세요.
zoomin에는 본래, 「animate_animated」 「animate_zoomIn」이라고 하는 2개의 클래스명이 필요합니다만
2개 붙여 버리면, 페이지가 로드된 시점에서 처리해 버립니다.
(스크롤하기 전에 확대해 버린다)
스크롤 할 때 처리하고 싶기 때문에 여기에서는 하나만 붙입니다.
CSS
test.css.text {
font-size: 200px;
margin: 500px;
}
.animate__animated {
font-size: 200px;
margin: 500px;
/* 下記がアニメーションに必要なコード */
visibility: hidden;
opacity: 0;
transition: 1s;
}
/* jQueryによって追加されるコード */
.animate__zoomIn {
visibility: visible;
opacity: 1;
}
스크롤의 애니메이션이 목적이기 때문에, 폰트 사이즈 등은 매우 적당합니다,,, 죄송합니다 (웃음)
자신의 css에 필요한 코드만 복사 등 하십시오.
페이지가 로드되면 zoomin의 문자가 보이지 않도록 설정하고,
스크롤하면 문자가 나타나도록 animate_zoomin으로 설정합니다.
jQuery
test.js$(window).on('scroll', function (){
var animate = $('.animate__animated');
var zoomIn = 'animate__zoomIn';
animate.each(function () {
var animateOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
// 画面の半分に表示されたら、クラスを追加する
if(scrollPos > animateOffset - wh + (wh / 2) ){
$(this).addClass(zoomIn);
}
});
});
여기서 zoomin의 문자가 화면의 절반에 표시되면,
animate__zoomIn 클래스 이름을 추가하는 구현을 수행합니다.
이렇게하면 나중에 클래스 이름이 추가되고,
스크롤하여 요소가 표시되면 애니메이션을 시작하도록 구현할 수 있습니다.
jQuery의 자세한 쓰는 방법 등은 검색하면 많이 나오므로 그쪽을 참고하십시오.
마지막으로
앞으로도 학습을 계속하고, 플러그인의 소개 등도 가능하다고 생각하고 있습니다.
봐 주셔서 감사합니다.
참고
animate.css
Animate.css에서 놀아 보았습니다.
Reference
이 문제에 관하여(스크롤하여 요소가 표시되면 애니메이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/qp___04/items/4f54523e524163b57ecc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<!-- 下記でjQueryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="test.js" type="text/javascript"></script>
<!-- 下記でAnimate.cssを読み込む -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="test.css" type="text/css"></script>
</head>
<body>
<div class="text">hello</div>
<!-- クラス命名に注意 -->
<div class="animate__animated">zoomin</div>
</body>
</html>
.text {
font-size: 200px;
margin: 500px;
}
.animate__animated {
font-size: 200px;
margin: 500px;
/* 下記がアニメーションに必要なコード */
visibility: hidden;
opacity: 0;
transition: 1s;
}
/* jQueryによって追加されるコード */
.animate__zoomIn {
visibility: visible;
opacity: 1;
}
$(window).on('scroll', function (){
var animate = $('.animate__animated');
var zoomIn = 'animate__zoomIn';
animate.each(function () {
var animateOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
// 画面の半分に表示されたら、クラスを追加する
if(scrollPos > animateOffset - wh + (wh / 2) ){
$(this).addClass(zoomIn);
}
});
});
앞으로도 학습을 계속하고, 플러그인의 소개 등도 가능하다고 생각하고 있습니다.
봐 주셔서 감사합니다.
참고
animate.css
Animate.css에서 놀아 보았습니다.
Reference
이 문제에 관하여(스크롤하여 요소가 표시되면 애니메이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/qp___04/items/4f54523e524163b57ecc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(스크롤하여 요소가 표시되면 애니메이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/qp___04/items/4f54523e524163b57ecc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
