현재 위치: 집 > 다운로드 > JS 효과 > HTML5 특수 효과 > HTML5 마그마 애니메이션 배경 효과
HTML5 마그마 애니메이션 배경 효과
나누다: JS 효과 / HTML5 특수 효과 | 출시 시간: 2017-12-23 | 방문: 1589 |
다운로드: 55 |
최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 Pelican-Quickstart에서 \"ValueError: Unknown Locale: UTF-8\" 오류를 해결하는 방법은 무엇입니까?
- 2 효율적인 코드 관리를 위한 React 도구 세트
- 3 콜백
- 4 TypeScript의 함수형 프로그래밍
- 5 Pelican 3.3에서 \"ValueError: Unknown Locale: UTF-8\" 오류를 해결하는 방법은 무엇입니까?
- 6 몇 줄의 코드로 나만의 nodemon 구축
- 7 Pelican-Quickstart 명령의 \"ValueError: 알 수 없는 로캘: UTF-8\" 오류를 해결하는 방법은 무엇입니까?
- 8 jQuery.ajax#get에서 \"예기치 않은 토큰 콜론 JSON\" 오류를 수정하는 방법은 무엇입니까?
- 9 \"jQuery.ajax#get\" 오류 이후에 예기치 않은 토큰 콜론 JSON을 해결하는 방법은 무엇입니까?
- 10 jQuery.ajax#get을 사용하여 JSONP 요청에서 \"예기치 않은 토큰 콜론\" 오류를 해결하는 방법은 무엇입니까?
- 11 왜 컬_exec()가 때때로 False를 반환합니까?
- 12 jQuery.ajax를 사용하여 Node.js에서 JSON을 가져올 때 \"예기치 않은 토큰:\" 오류를 해결하는 방법은 무엇입니까?
- 13 \"jQuery.ajax#get\" 이후 예기치 않은 토큰 콜론 JSON" 오류를 해결하는 방법은 무엇입니까?
- 14 5 Best ICOs to Invest In For High Returns
- 15 PHP에서 stdClass 객체의 속성을 정확하게 계산하는 방법은 무엇입니까?
최신 튜토리얼
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1579 2024-04-24
-
- Go 언어 실습 GraphQL
- 1850 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3270 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2800 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1714 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2522 2024-03-29
<!doctype html>
<html>
<머리>
<meta charset="utf-8">
<title>可设置动画属性的HTML5岩浆动画背景特效</title>
<스타일>
@charset "UTF-8";
*, *:이전, *:이후 {
상자 크기 조정: 테두리 상자;
}
몸 {
패딩: 0;
마진: 0;
오버플로: 숨김;
글꼴 계열: '로보토', 산세리프;
}
캔버스 {
너비: 100vw;
높이: 100vh;
}
h1 {
위치: 절대;
Z-색인: 1;
너비: 100%;
왼쪽: 0;
최고: 50%;
-webkit-transform: 번역Y(-50%);
변환: 번역Y(-50%);
혼합 혼합 모드: 오버레이;
색상: rgba(0, 0, 0, 0.3);
줄 높이: 0;
글꼴 크기: 16px;
문자 간격: 4px;
텍스트 정렬: 중앙;
텍스트 변환: 대문자;
변환: 번역Y(-50%);
커서: 포인터;
-webkit-transition: 컬러 .2s easy-in-out;
전환: 컬러 .2s easy-in-out;
-webkit-user-select: 없음;
-moz-user-select: 없음;
-ms-사용자 선택: 없음;
사용자 선택: 없음;
}
h1:호버 {
색상: rgba(0, 0, 0, 0.8);
}
</스타일>
</머리>
<몸>
<script src="js/chroma.min.js"></script>
<script src="js/dat.gui.min.js"></script>
<canvas id="canvas"></canvas>
<h1>바닥은 용암입니다</h1>
<스크립트>
'엄격한 사용';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("클래스를 함수로 호출할 수 없습니다."); } }
변수 설정 = {
진폭X: 150,
진폭Y: 20,
줄: 30,
시작 색상: '#500c44',
endColor: '#b4d455'
};
var c = document.getElementById("캔버스");
var ctx = c.getContext("2d");
var winW = window.innerWidth;
var winH = window.innerHeight;
var 경로 = [];
var 색상 = [];
var 마우스Y = 0;
var mouseDown = false;
변수 시간 = 0;
var 곡선 = 정의되지 않음;
var 속도 = 정의되지 않음;
var 경로 = 함수 () {
함수 경로(y, 색상) {
_classCallCheck(this, Path);
this.y = y;
this.color = 색상;
this.root = [];
this.create();
this.draw();
}
Path.prototype.create = 함수 생성() {
var rootX = 0;
var rootY = this.y;
this.root = [{ x: rootX, y: rootY }];
while (rootX < winW) {
var 캐주얼 = Math.random() > 0.5? 1 : -1;
var x = parsInt(settings.amplitudeX / 2 + Math.random() * settings.amplitudeX / 2);
var y = parsInt(rootY + 캐주얼 * (settings.amplitudeY / 2 + Math.random() * settings.amplitudeY / 2));
루트X += x;
var 지연 = Math.random() * 100;
this.root.push({ x: rootX, y: y, 높이: rootY, 캐주얼: 캐주얼, 지연: 지연 });
}
};
Path.prototype.draw = 함수 draw() {
ctx.beginPath();
ctx.moveTo(0, winH);
ctx.lineTo(this.root[0].x, this.root[0].y);
for (var i = 1; i < this.root.length - 1; i++) {
var x = this.root[i].x;
var y = this.root[i].y;
var nextX = this.root[i + 1].x;
var nextY = this.root[i + 1].y;
var xMid = (x + nextX) / 2;
var yMid = (y + nextY) / 2;
var cpX1 = (xMid + x) / 2;
var cpY1 = (yMid + y) / 2;
var cpX2 = (xMid + nextX) / 2;
var cpY2 = (yMid + nextY) / 2;
ctx.quadraticCurveTo(cpX1, y, xMid, yMid);
ctx.quadraticCurveTo(cpX2, nextY, nextX, nextY);
}
var lastPoint = this.root.reverse()[0];
this.root.reverse();
ctx.lineTo(lastPoint.x, lastPoint.y);
ctx.lineTo(winW, winH);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
};
반환 경로;
}();
/* 초기화 */
var 경로 = 정의되지 않음;
함수 초기화() {
c.너비 = winW;
c.높이 = winH;
경로 = [];
color =chroma.scale([settings.startColor, settings.endColor]).mode('lch').colors(settings.lines);
document.body.style = '배경:' + settings.startColor;
for (var i = 0; i < settings.lines; i++) {
Paths.push(new Path(winH / settings.lines * i, color[i]));
settings.startY = winH / settings.lines * i;
}
}
/* 크기 조정 승리 */
window.addEventListener('resize', function () {
winW = window.innerWidth;
winH = window.innerHeight;
c.폭 = winW;
c.높이 = winH;
초기화();
});
window.dispatchEvent(new Event("resize"));
/* 렌더링 */
함수 렌더링() {
c.폭 = winW;
c.높이 = winH;
곡선 = mouseDown ? 2 : 4;
속도 = mouseDown ? 6 : 0.8;
시간 += mouseDown ? 0.1 : 0.05;
Paths.forEach(함수 (경로, i) {
path.root.forEach(함수 (r, j) {
if (j % 곡선 == 1) {
var move = Math.sin(time + r.delay) * 속도 * r.casual;
r.y -= 이동 / 2 - 이동;
}
if (j + 1% 곡선 == 0) {
var move = Math.sin(time + r.delay) * 속도 * r.casual;
r.x += 이동 / 2 - 이동 / 10;
}
});
path.draw();
});
requestAnimationFrame(렌더링);
}
렌더링();
/* 마우스다운 */
'mousedown touchstart'.split(' ').forEach(함수 (e) {
document.addEventListener(e, function () {
mouseDown = true;
});
});
/* MOUSEUP */
'mouseup mouseleave touchend'.split(' ').forEach(function (e) {
document.addEventListener(e, function () {
mouseDown = 거짓;
});
});
/* MOUSEMOVE */
'mousemove touchmove'.split(' ').forEach(함수 (e) {
document.addEventListener(e, 함수 (e) {
mouseY = e.clientY || e.touches[0].clientY;
});
});
/* 데이터 GUI */
var gui = 함수 datgui() {
var gui = 새로운 dat.GUI();
// dat.GUI.toggleHide();
gui.closed = true;
gui.add(설정, "amplitudeX", 40, 200).step(20).onChange(함수 (newValue) {
초기화();
});
gui.add(설정, "amplitudeY", 0, 100).step(1).onChange(function (newValue) {
초기화();
});
gui.add(설정, "라인", 5, 50).step(1).onChange(함수 (newValue) {
초기화();
});
gui.addColor(설정, "startColor").onChange(함수 (newValue) {
초기화();
document.querySelector('h1').innerHTML = '또는 원하는 것';
});
gui.addColor(설정, "endColor").onChange(함수 (newValue) {
초기화();
document.querySelector('h1').innerHTML = '또는 원하는 것';
});
GUI 반납;
}();
</본문>
</html>
애니메이션 속성을 설정할 수 있는 좋은 HTML5 마그마 애니메이션 배경 효과입니다. 웹 페이지 오른쪽 상단의 메뉴를 확장하여 애니메이션 진폭, 색상 및 기타 속성을 설정할 수 있습니다.