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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!