Codepen.io integrieren
Guten Tag,
Möchte gerne einen "PEN" von Codepen.io auf meiner Webseite integrieren. (LINK zum "Pen" https://codepen.io/Unna/pen/WQoVWr) der "PEN" ist ein animierter Hintergrund und besteht aus HTML, CSS sowie JAVA. Für meine Webseite habe ich bereits eine Ordnerstruktur erstellt und somit HTML, CSS und JAVA getrennt. In einem Post hier habe ich schon gelesen dass man hierfür die Settings im oberen rechten Rand nutzen sollte. Wenn Ihr mir es bitte noch einmal ausführlich erklären könntet wäre ich euch sehr dankbar. Gerne auch mit Video. Vielen Dank im voraus.
Der hier verwendete Code
<html>
<head>
<style>
body{
overflow:auto;
height:1000px;
display:flex;
flex-direction:column;
}
article{
flex:1;
height:50vh;
width:80vw;
margin:30px auto;
border:2px solid red;
text-align:center;
}
h1,h2,h4{
color:white;
text-align:center;
}
h2 a{
color:green;
}
h2 a:hover{
color:red;
}
textarea{
width:80%;
margin:0 auto;
min-height:100px;
}
</style>
</head>
<body>
<h1> Wie man Codepen einbinden kann</h1>
<article>
<h1>Möglichkeit 1 </h1>
<div>
<p class="codepen" data-theme-id="dark" data-default-tab="js,result" data-user="Unna" data-slug-hash="WQoVWr" style="height: 345px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic points - base">
<span>See the Pen <a href="https://codepen.io/Unna/pen/WQoVWr">
Dynamic points - base</a> by Gauthier Ressel (<a href="https://codepen.io/Unna">@Unna</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<br>
<h4>Code zum einbinden</h4>
<textarea><p class="codepen" data-theme-id="dark" data-default-tab="js,result" data-user="Unna" data-slug-hash="WQoVWr" style="height: 345px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic points - base">
<span>See the Pen <a href="https://codepen.io/Unna/pen/WQoVWr">
Dynamic points - base</a> by Gauthier Ressel (<a href="https://codepen.io/Unna">@Unna</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script></textarea>
</div>
</article>
<article>
<h1>Möglichkeit 2 /( Link ) </h1>
<h2><a href="https://codepen.io/Unna/pen/WQoVWr">Particle bei Codepen</a></h2>
<h4>Code zum einbinden</h4>
<textarea><a href="https://codepen.io/Unna/pen/WQoVWr">Particle bei Codepen</a></textarea>
</article>
<article>
<h1>Möglichkeit 3 ( auf Homepage als hintergrund ) </h1>
<canvas id="canvas"></canvas>
<h4>Code zum einbinden</h4>
<textarea> <!doctype html>
<html lang="de">
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
background: #000;
}
canvas {
position: relative;
top: 0;
left: 0;
height:50vh;
width:80vw;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
(function($) {
var width, height, strokecolor, canvas, ctx, points, target;
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: width/2, y: height/2};
canvas = document.getElementById('canvas');
strokecolor="255,255,255";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create points
points = [];
for(var x = 0; x < width; x = x + width/20) {
for(var y = 0; y < height; y = y + height/20) {
var px = x + Math.random()*width/20;
var py = y + Math.random()*height/20;
var p = {x: px, originX: px, y: py, originY: py };
points.push(p);
}
}
// for each point find the 5 closest points
for(var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for(var j = 0; j < points.length; j++) {
var p2 = points[j]
if(!(p1 == p2)) {
var placed = false;
for(var k = 0; k < 5; k++) {
if(!placed) {
if(closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for(var k = 0; k < 5; k++) {
if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
// assign a circle to each point
for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c;
}
}
// Event handling
function addListeners() {
window.addEventListener('mousemove', mouseMove);
window.addEventListener('resize', resize);
}
function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
// animation
function initAnimation() {
animate();
for(var i in points) {
shiftPoint(points[i]);
}
}
function animate() {
ctx.clearRect(0,0,width,height);
for(var i in points) {
// detect points in range
if(Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.4;
points[i].circle.active = 0.5;
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.3;
points[i].circle.active = 0.4;
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.2;
points[i].circle.active = 0.3;
} else {
points[i].active = 0.1;
points[i].circle.active = 0.2;
}
drawLines(points[i]);
points[i].circle.draw();
}
requestAnimationFrame(animate);
}
function shiftPoint(p) {
TweenLite.to(p, 1+1*Math.random(), {
x:p.originX-10+Math.random()*20,
y:p.originY-10+Math.random()*20,
ease:Sine.easeInOut,
onComplete: function() {
shiftPoint(p);
}});
}
// Canvas manipulation
function drawLines(p) {
if(!p.active) return;
for(var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba('+strokecolor+','+ p.active+')';
ctx.stroke();
}
}
function Circle(pos,rad,color) {
var _this = this;
// constructor
(function() {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function() {
if(!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba('+strokecolor+','+ _this.active+')';
ctx.fill();
};
}
// Util
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
})(jQuery);
</script>
</body>
</html></textarea>
</article>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
background: #000;
}
canvas {
position: relative;
top: 0;
left: 0;
height:50vh;
width:80vw;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script>
(function($) {
var width, height, strokecolor, canvas, ctx, points, target;
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: width/2, y: height/2};
canvas = document.getElementById('canvas');
strokecolor="255,255,255";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create points
points = [];
for(var x = 0; x < width; x = x + width/20) {
for(var y = 0; y < height; y = y + height/20) {
var px = x + Math.random()*width/20;
var py = y + Math.random()*height/20;
var p = {x: px, originX: px, y: py, originY: py };
points.push(p);
}
}
// for each point find the 5 closest points
for(var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for(var j = 0; j < points.length; j++) {
var p2 = points[j]
if(!(p1 == p2)) {
var placed = false;
for(var k = 0; k < 5; k++) {
if(!placed) {
if(closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for(var k = 0; k < 5; k++) {
if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
// assign a circle to each point
for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c;
}
}
// Event handling
function addListeners() {
window.addEventListener('mousemove', mouseMove);
window.addEventListener('resize', resize);
}
function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
// animation
function initAnimation() {
animate();
for(var i in points) {
shiftPoint(points[i]);
}
}
function animate() {
ctx.clearRect(0,0,width,height);
for(var i in points) {
// detect points in range
if(Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.4;
points[i].circle.active = 0.5;
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.3;
points[i].circle.active = 0.4;
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.2;
points[i].circle.active = 0.3;
} else {
points[i].active = 0.1;
points[i].circle.active = 0.2;
}
drawLines(points[i]);
points[i].circle.draw();
}
requestAnimationFrame(animate);
}
function shiftPoint(p) {
TweenLite.to(p, 1+1*Math.random(), {
x:p.originX-10+Math.random()*20,
y:p.originY-10+Math.random()*20,
ease:Sine.easeInOut,
onComplete: function() {
shiftPoint(p);
}});
}
// Canvas manipulation
function drawLines(p) {
if(!p.active) return;
for(var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba('+strokecolor+','+ p.active+')';
ctx.stroke();
}
}
function Circle(pos,rad,color) {
var _this = this;
// constructor
(function() {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function() {
if(!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba('+strokecolor+','+ _this.active+')';
ctx.fill();
};
}
// Util
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
})(jQuery);
</script>
</body>
</html>