집

JS 특수 효과

HTML5 특수 효과

HTML5 마그마 애니메이션 배경 효과

지금 다운로드 시사

<!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 마그마 애니메이션 배경 효과입니다. 웹 페이지 오른쪽 상단의 메뉴를 확장하여 애니메이션 진폭, 색상 및 기타 속성을 설정할 수 있습니다.

부인 성명

이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn

관련 기사

2014 HTML5/CSS3 인기 애니메이션 효과 TOP10_jquery

16 May 2016

이 글은 올해 이 사이트에서 인기를 끌었던 HTML5/css3 애니메이션 특수 효과 10가지를 요약하고, 필요한 친구들이 비교하고 사용할 수 있도록 데모 주소와 다운로드 주소를 첨부합니다.

HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드 [권장]_html5 튜토리얼 기술

16 May 2016

아래 편집기는 HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드[권장]를 공유합니다. 모두에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.

입자 효과 텍스트 애니메이션 특수 효과를 얻기 위해 HTML5+css3을 사용하는 방법(전체 코드 첨부)

25 Sep 2018

웹 페이지를 탐색해 보면 오늘날의 웹 페이지가 점점 더 아름다워지고 있으며, 많은 애니메이션 특수 효과가 점점 더 멋있어지고 있다는 것을 알 수 있습니다. 이는 HTML5 및 CSS3의 심층적인 개발과 불가분의 관계입니다. 오늘은 HTML5와 CSS3 기반의 텍스트 효과인 파티클 효과 텍스트 애니메이션 효과를 공유해보겠습니다. 이 기사의 내용은 HTML5+css3을 사용하여 입자 효과 텍스트 애니메이션 특수 효과를 얻는 방법에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요할 수 있습니다.

멋진 HTML5 SVG 텍스트 변형 애니메이션 효과

18 Jan 2017

이것은 매우 멋진 HTML5 SVG 텍스트 변형 애니메이션 효과입니다. 이 특수 효과는 SVG와 anime.js를 사용하여 SVG 스트로크 애니메이션을 통해 다양하고 아름다운 문자 애니메이션 특수 효과를 완성합니다.

HTML5 Canvas 기반의 텍스트 애니메이션 특수 효과

02 Apr 2018

이 글은 HTML5 Canvas를 기반으로 한 텍스트 애니메이션 특수 효과를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

HTML5 Canvas 및 Rebound 애니메이션을 기반으로 한 애니메이션 특수 효과 로드

19 Jan 2017

HTML5 Canvas 및 Rebound 애니메이션을 기반으로 한 로딩 애니메이션 특수 효과입니다. 로딩 애니메이션은 캔버스를 사용하여 전체 페이지를 덮고 다각형 로딩 로더를 표시하여 로딩 진행 상황을 나타냅니다.

HTML5 3D 옷 스윙 애니메이션 특수 효과 구현 방법에 대한 자세한 소개

24 Mar 2017

이것은 HTML5 Canvas를 기반으로 한 또 다른 3D 애니메이션 걸작입니다. 바람에 펄럭이는 3D 옷 스윙 애니메이션 특수 효과로 매우 사실적입니다. 옷 위에 마우스를 올리면 옷이 흔들리는 애니메이션이 나타납니다. 마우스를 클릭하면 옷이 더욱 심하게 흔들리게 됩니다. 온라인 데모 소스 코드 다운로드 HTML 코드 <div style='width:500px;margin:10px auto'> <canvas id='cv' width='480' height='300'></ca..

HTML5 게임 엔진 LTweenLite(데모 소스 코드 다운로드 포함)_javascript 기술로 구현된 매우 멋진 애니메이션 효과

16 May 2016

이 기사에서는 주로 HTML5 게임 엔진 LTweenLite가 달성한 매우 멋진 애니메이션 효과를 소개합니다. LTweenLite의 다운로드와 애니메이션 효과 구현 단계를 자세히 분석합니다. 또한 독자들이 다운로드할 수 있는 완전한 데모 예제 소스 코드도 함께 제공됩니다. 필요한 사람은 참조할 수 있습니다.