집

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

관련 기사

지능형 인간화 제출 양식 JS 특수 효과 코드

25 Jul 2016

지능형 인간화 제출 양식 JS 특수 효과 코드

웹페이지 일부 표시 및 숨기기 페이지 특수 효과 확장 및 축소

25 Jul 2016

웹페이지 일부 표시 및 숨기기 페이지 특수 효과 확장 및 축소

iframe 사용 PHP는 iframe을 사용하여 새로 고침 없이 파일을 업로드하는 코드를 구현합니다.

29 Jul 2016

iframe 사용법: iframe 사용법 php는 iframe을 사용하여 새로 고침 없이 파일을 업로드하는 코드를 구현합니다. 다음과 같이 코드를 복사합니다: <html> 　　head> 　<title>새로 고침 없이 파일 업로드 </title> 　　<meta Content-type="text/html " charset="utf-8" /> 　<script type="text/webpage 특수 효과"> 　function startUpload() { 　docu

PHP 배열 PHP 배열 기사에 키워드 링크 추가 기사 콘텐츠에 자동으로 링크 추가

29 Jul 2016

PHP 배열: PHP 배열 PHP 배열은 기사에 키워드를 추가하여 기사 내용에 대한 링크를 자동으로 추가합니다. 다음과 같이 코드를 복사합니다. <?php $keys =array( array('웹 페이지 특수 효과','/js_a/js. html'), 배열('seo','/seo/seo.html'), 배열('php','/phper/php.html'), 배열('jsp','/jsp/jsp.html' ), array(' asp','/asp/asp.html'), array('ps','/f

Douyin의 AI 도구는 무엇입니까?

29 Nov 2024

Douyin은 지능형 편집, 비디오 특수 효과, 자막 생성, 표지 생성 및 기타 보조 콘텐츠 생성을 포함하여 제작자가 콘텐츠를 쉽게 생성, 편집 및 홍보할 수 있도록 돕는 다양한 자체 AI 도구를 제공합니다. 지능형 추천, 콘텐츠 검토 및 제작 지원 도구는 콘텐츠 품질과 배포 효율성을 향상시킵니다. 음성 체인저 등이 콘텐츠에 흥미를 더해줍니다.

PHP jquery 폭포 흐름 LightBox 그림 상자 특수 효과

13 Mar 2017

: PHP jquery 폭포 흐름 LightBox 그림 상자 특수 효과: 요즘 웹사이트 작업을 하다보니 많은 사진을 포맷해야 해서 폭포 흐름을 생각했는데 폭포 흐름이 구현됐는데 큰 그림을 봐야 해서.. 폭포 흐름과 LightBox 사진이 잘 통합되어 있습니다. 라이트박스를 사용하여 현재 페이지의 폭포 흐름에서 축소판을 확대할 수 있습니다. 공식 웹사이트: http://www.codesc.net 데모 주소: http://www.codesc.net/other/waterwall_lightbox/index.php

애니메이션 AI 특수 효과 도구란 무엇입니까?

28 Nov 2024

애니메이션 AI 특수 효과 도구는 애니메이터에게 창의력을 강화하고 매력적인 애니메이션을 제작할 수 있는 강력한 기술을 제공하기 위해 탄생했습니다. 이러한 도구에는 다음이 포함됩니다: 1. DeepMotion(캐릭터 애니메이션), 2. AutoTrace(벡터 애니메이션 변환), 3. Adobe Character Animator(실시간 캐릭터 애니메이션), 4. TensorFlow.js(대화형 애니메이션), 실제와 같은 애니메이션) 애니메이션) 6. DeepDreamGenerator(추상 애니메이션) 7. RunwayML(사용하기 쉬운 AI 애니메이션 도구)

튜토리얼 자율 학습 편집

10 Dec 2024

편집 튜토리얼을 스스로 가르치는 것은 어렵지 않습니다. 다음 단계를 따르십시오. 올바른 편집 소프트웨어(예: Shotcut 또는 Adobe Premiere Pro) 선택 온라인 코스 또는 튜토리얼(예: YouTube, Udemy 또는 Coursera) 찾기 연습 및 연습 편집 기술 연구(예: 전환, 특수 효과 및 크로마 그레이딩) 오류를 찾고 클립을 개선하기 위한 피드백을 받습니다. 새로운 소프트웨어, 기능 및 기술에 대해 계속해서 호기심을 갖고 알아보세요.

의사 클래스 - 기본

17 Feb 2025

(Alexis Goldstein, Louis Lazaris 및 Estelle Weyl의 "실제 세계를위한 HTML5 & CSS3"에서 적응) 핵심 포인트 CSS 의사 클래스는 구조, 사용자 운영, 입력 및 부정 의사 클래스 및 기타 유형을 포함한 특수 요소 상태를 정의하는 데 사용됩니다. 문서 트리의 요소 위치, 사용자 상호 작용, 양식 요소 상태 또는 특정 선택기와 일치하지 않는 요소를 기반으로 요소를 스타일링 할 수 있습니다. 일부 의사 클래스에는 다음과 같은 보안 문제가있을 수 있습니다. 현대식 브라우저는 다음으로 제한됩니다

See all articles