글씨 위치랑
그래프 좀 수정해야 하지만
우선 테스트는 여기까지
<!DOCTYPE html>
<html>
<head>
<title>[aos.css]메인 그래픽 12</title>
<!--
스크롤이 해당 위치에 왔을 때
그래프 생성
-->
<style>
#m_bnr3 {position:relative; width:100%;background: linear-gradient(180deg, #FFFFFF, #ffd1c4);}
#m_bnr3 > div {position:relative; max-width:1300px; margin:0px auto;}
#m_bnr3 .backgroundimg img{width:100%; height:auto;}
#m_bnr3 .mobile_only{display:none;}
#m_bnr3:after{ content:""; display:block; clear:both;}
#m_bnr3 .con_box { width:50%; /*height:260px;*/position:relative; top:50%; left:50%; text-align:center; }
#m_bnr3 .con_box:after{ content:""; display:block; clear:both;}
#m_bnr3 .con_box li { float:left; position:relative; text-align:center; width:45%; height:100%; margin:2.5% 2.5%; overflow:hidden;}
#m_bnr3 .con_box li img{width:100%;}
#m_bnr3 .pc_only .slide-text {width:47%; /*height:200px;*/ position:absolute; top:0%; left:5%; text-align:center; z-index:2;}
#m_bnr3 .slide-text h1.tviewa{text-align:left; font-size:2.4em; color:#E66132; line-height:1.4em; font-weight:700; padding-bottom:30px;}
#m_bnr3 .slide-text h1.sviewa{text-align:left; font-size:1.1em; color:#7f7f7f; line-height:3.3em; padding-bottom:10px;}
#m_bnr3 .mobile_only .slide-text {width:90%; height:200px; position:absolute; top:15%; left:5%; text-align:center; z-index:2;}
#m_bnr3 .slide-text h1.motviewa{text-align:center; font-size:2.2em; color:#ff6600; line-height:1.3em; font-weight:700; padding-bottom:10px;}
#m_bnr3 .slide-text h1.molviewa{text-align:center; font-size:3.4em; color:#000; line-height:1.3em; font-weight:700; padding-bottom:10px;}
#m_bnr3 .slide-text h1.mosviewa{text-align:center; font-size:3.4em; color:#000; line-height:1.3em; padding-bottom:10px;}
#m_bnr3 .pc_only .sviewa .con_box { width:100%; /*height:260px;*/position:relative; top:20%; left:0%; text-align:left; }
#m_bnr3 .pc_only .sviewa .con_box:after{ content:""; display:block; clear:both;}
#m_bnr3 .pc_only .sviewa .con_box li { float:left; position:relative; text-align:left; width:45%; height:100%; margin:2.5% 0; color:#fff; overflow:hidden;}
#m_bnr3 .pc_only .sviewa .con_box li .tit{ font-size:1.5em;line-height:3.0em;color:#666666;}
#m_bnr3 .pc_only .sviewa .con_box li .con{ font-size:2.7em;color:#E66132;font-weight:700;}
#m_bnr3 .pc_only .sviewa .con_box li .btm{ font-size:1.0em;color:#5D5D5D;}
</style>
</head>
<body>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><!-- Chart.js v4.4.6 -->
<script>
AOS.init();
</script>
<section style="height:1800px" id="scroll1">
스크롤 영역1
</section>
<section id="m_bnr3">
<div style="padding:360px 0;">
<div class="backgroundimg">
<div class="pc_only">
<!-- ★★★★★상승 그래프 영역 ★★★★★ -->
<!--
<canvas id="myChart3"></canvas>
-->
<div class="chart-container">
<canvas id="myChart3" ></canvas>
</div>
<!--<img src="https://www.brain-study.co.kr/wm/theme/renew/html/image/cnt_03_graph.png">-->
<!-- aos start -->
<!--
data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration : 애니메이션의 재생 시간 설정(기본:400 / 0~3000까지 설정가능하고 50단위로 설정 변경)
data-aos-anchor-placement : 애니메이션이 어느 위치에서부터 적용될지 설정 (기본 : top-bottom)
data-aos-once : 스크롤 할 때마다 애니메이션이 재생될지를 설정 (기본 : false)
-->
<div class="slide-text">
<div class="sviewa wow" >
<ul class="con_box">
<li class="wow">
<div data-aos="fade-up" data-aos-offset="400" data-aos-duration="400" data-aos-anchor-placement="top-bottom" data-aos-once="false" class="aos-init aos-animate">
<span class="tit">글씨1</span><br>
<span class="con">123456</span>
</div>
<!--임시br--><br>
</li>
<li class="wow">
<div data-aos="fade-up" data-aos-offset="400" data-aos-duration="400" data-aos-anchor-placement="top-bottom" data-aos-once="false" class="aos-init aos-animate">
<span class="tit">글씨2</span><br>
<span class="con">123456</span>
</div>
<!--임시br--><br>
</li>
<li class="wow">
<div data-aos="fade-up" data-aos-offset="400" data-aos-duration="400" data-aos-anchor-placement="top-bottom" data-aos-once="false" class="aos-init aos-animate">
<span class="tit">글자3<br>글자3-1</span><br>
<span class="con">123456</span>
</div>
</li>
</ul>
</div>
<div data-aos="fade-up" data-aos-offset="400" data-aos-duration="400" data-aos-anchor-placement="top-bottom" data-aos-once="false" class="aos-init aos-animate">
<h1 class="tviewa wow">가나다라마바사</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="height:1800px" id="scroll2">
스크롤 영역2
</section>
<script>
/*
const data = [
{ x: 0, y: 0 },
{ x: 1, y: 0.9 },
{ x: 2, y: 1.8 },
{ x: 2.4, y: 2.2},
{ x: 3.2, y: 0.8 },
{ x: 4.8, y: 2 },
{ x: 6, y: 2.5 },
{ x: 8, y: 3.2 },
{ x: 9.2, y: 8.1 },
{ x:11.9, y: 5.9 },
{ x: 13.8, y: 9.6 },
{ x: 17, y: 10.9 },
{ x: 20, y: 15.4 },
];
*/
//가로 비율 유지되면서 영역 잡히면 하나만 있어도 되고
// 아니면 pc/mo버전 나눠서 data 작성
const data = [
{ x: 0, y: 0 },
{ x: 1, y: 3.6 },
{ x: 2, y: 7.2 },
{ x: 2.4, y: 8.8},
{ x: 3.2, y: 3.2 },
{ x: 4.8, y: 8 },
{ x: 6, y: 10 },
{ x: 8, y: 12.8 },
{ x: 9.2, y: 32.4 },
{ x:10.9, y: 23.6 },
{ x: 12.8, y: 58.4 },
{ x: 17, y: 73.6 },
{ x: 20, y: 130.6 },
];
// Data-----
// Animation-----
// const totalDuration = 10000;
const totalDuration = 1000;
const delayBetweenPoints = totalDuration / data.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
const animation = {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return ctx.index * delayBetweenPoints;
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return ctx.index * delayBetweenPoints;
}
}
};
// Animation-----
// Config-----
const config = {
type: 'line',
data: {
datasets: [{
borderColor: "#E66132",
borderWidth: 3,
radius: 0,
data: data,
}]
},
options: {
//가로 사이즈 변경 시 새로 만들기 위해 추가 시작
//캔버스 영역 chart-container으로 감싸야 한다.
responsive: true,
maintainAspectRatio: false,////차트 그래프 사이즈 고정
// maintainAspectRatio : true 이면 가로 넓이가 변경되어도 처음 생성된 크기로 고정
// maintainAspectRatio: false 이면 가로 넓이에 따라 그래프 수정
//가로 사이즈 변경 시 새로 만들기 위해 추가 종료
animation,
interaction: {
intersect: false
},
events: [''],//마우스오버 이벤트 없앰
plugins: {
legend: {display : false}
},
scales: {
x: {
type: 'linear',
grid:{//그리드 안보이게
display : false
},
border: {
display: false,
},
ticks: {
//color: 'blue',
display: false,
}
},//x
y: {
type: 'linear',
grid:{//그리드 안보이게
display : false
},
border: {
display: false,
},
ticks: {
//color: 'blue',
display: false,
}
} //y
}//scales
}
};
// Config-----
/*
var myChart = new Chart(
document.getElementById('myChart3'),
null
);
*/
//해당 위치에서 새로고침되는 경우가 있어서 null에서 config로 수정
var myChart = new Chart(
document.getElementById('myChart3'),
config
);
function onScroll(){
var div_m_bnr3_Top = document.querySelector("#m_bnr3").offsetTop;
var div_m_bnr3_Bottom = document.querySelector("#scroll2").offsetTop; //다음 영역 시작 위치
if(div_m_bnr3_Top <= window.scrollY+700 && div_m_bnr3_Bottom >= window.scrollY) {
const chartStatus = Chart.getChart("myChart3");
if(chartStatus == undefined){ //그래프가 없으면 생성
myChart = new Chart(
document.getElementById('myChart3'),
config
);
}
}else{
myChart.destroy(); //그래프 초기화
}
}
window.addEventListener('scroll',onScroll);
</script>
</body>
</html>
반응형
'차근차근 > JAVA Script' 카테고리의 다른 글
| 한글 최신 파일에서 자동으로 추가되는 스크립트 삭제하기 (0) | 2024.11.11 |
|---|---|
| 알럿창 메시지에 볼드넣기 (1) | 2024.01.09 |
| 유튜브 아이프레임 일시정지 (1) | 2023.12.29 |
| 메뉴 상단 고정, 탭이동 js (0) | 2023.12.29 |
| ajax뒤로가기 시 이전 데이터 유지 (0) | 2023.09.05 |