drag slider durchsichtig

judoe007 · 12. März 2019

Guten Tag,

wie kann ich folgendes Fenster durchsichtig machen, so dass man bspw. ein Bild als Hintergrund nehmen kann?

https://codepen.io/ichko/pen/OWdNoZ

Sempervivum · 12. März 2019

Coole Sache! Du kannst einen transparenten Hintergrund erzeugen, indem Du den Renderer so änderst:

Code

class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}

Alles anzeigen

judoe007 · 13. März 2019

Danke. Nein, leider klappt das nicht. Es soll in folgendes Beispiel integriert werden:

https://tympanus.net/codrops/2…able-dual-view-slideshow/

Daran habe ich mich bereits gestern verbissen.

Wenn es in der Header kommt ist alles rot.

Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!

Falls es nicht machbar ist, dieses durchsichtig zu machen:

wie kann ich dieses Herz auf allen Oberseiten anzeigen lassen? Es klappt immer nur auf einer. Unter:

Zitat

let canvas = document.getElementById('Hannibal');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

let ctx = canvas.getContext('2d');

Zwar kann ich das Canvas beliebig benennen. Aber insgesamt geht nur ein einziges Canvas auf den Seiten der id=slideshow

Sempervivum · 13. März 2019

Zitat

Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!

Versuche, das Canvas mit position: fixed; zu fixieren. Dann wird es natürlich nicht mit sliden. Wenn Du das möchtest, musst Du wohl in jeder Unterseite bzw. div.slide ein Canvas einrichten.

judoe007 · 13. März 2019

Es muss sliden,

Mit jedem canvas habe ich schon versucht.

Ich versuchte mehrfach auf jeder Unterseite ein Canvas einzubauen, doch schaffte ich nur eines. WIe kann ich pro Unterseite ein Canvas einrichten? Ich versuchte es mit let canvas = document.getElementById('Hannibal'); let canvas = document.getElementById('Hannibal2');let canvas = document.getElementById('Hannibal3');

sowie sämtlichen Möglichkeiten im html scipt

Sempervivum · 13. März 2019

Da wird man wohl das Skript ein wenig erweitern müssen, so dass es für mehrere Canvas funktioniert. Wenn ich Zeit habe, werde ich es versuchen.

judoe007 · 13. März 2019

Vielen Dank vorab

Sempervivum · 13. März 2019

Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:

Code

function initHeart(canvas) {
let range = n => Array.from(Array(n).keys())
class Vector {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
reflect() {
return new Vector(-this.x, -this.y);
}
add(vector) {
return new Vector(this.x + vector.x, this.y + vector.y);
}
subtract(vector) {
return new Vector(this.x - vector.x, this.y - vector.y);
}
scale(scalar = 1) {
return new Vector(this.x * scalar, this.y * scalar);
}
length() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
distance(vector) {
let dx = this.x - vector.x;
let dy = this.y - vector.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
class IO {
constructor() {
this.mouse = new Vector();
this.bindMouse();
}
bindMouse() {
window.addEventListener('mousemove', ({ x, y }) => {
this.mouse.x = x;
this.mouse.y = y;
});
}
}
class Point {
constructor({ position = new Vector(), color = '#f00', size = 3 }) {
this.position = position;
this.color = color;
this.size = size;
}
render(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
}
class SpringPoint extends Point {
constructor({ target = new Vector(), elasticity = 1e-1, color = 'rgba(255, 0, 0, .6)', size = 3, damping = 1e-1 }) {
super({ position: target, color, size });
this.velocity = new Vector();
this.target = target;
this.elasticity = elasticity;
this.damping = damping;
}
updateVelocity() {
let damping = this.velocity.scale(this.damping);
let force = this.target
.subtract(this.position)
.scale(this.elasticity)
.subtract(damping);
this.velocity = this.velocity.add(force);
}
updatePosition() {
this.position = this.position.add(this.velocity);
}
update() {
this.updatePosition();
this.updateVelocity();
}
}
class SpringTrail extends SpringPoint {
constructor(config) {
super(config);
this.trail = range(config.trailSize || 10).map(index => {
config.target = this.position;
config.elasticity = 1 / (index * 8);
config.damping = 8 / (index * 10 + 5);
return new SpringPoint(config);
});
}
update() {
super.update();
this.trail.forEach(point => point.update());
}
render(ctx) {
super.render(ctx);
this.trail.forEach(point => point.render(ctx));
}
}
class Physics {
update(objects) {
objects.forEach(object => object.update());
}
}
class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}
class Engine {
constructor(physics, renderer, objects = []) {
this.physics = physics;
this.renderer = renderer;
this.objects = objects;
}
add(...objects) {
this.objects = this.objects.concat(objects);
}
tick() {
this.physics.update(this.objects);
}
render() {
this.renderer.render(this.objects);
}
clear() {
this.renderer.clear();
}
}
// let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
let io = new IO();
let engine = new Engine(
new Physics(),
new Renderer(ctx, { width: canvas.width, height: canvas.height })
);
let origin = new Vector(canvas.width / 2, canvas.height / 2);
// This is what generates the shape
let polar = (rad, time) => {
rad += Math.sin(time / 100);
let x = 16 * Math.sin(rad) ** 3;
let y = 13 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad);
let scale = (Math.sin(time / 10) + 3) * 4;
return new Vector(x * scale, -y * scale)
.add(origin.add(io.mouse.subtract(origin).scale(0.5)));
};
let random = (min = 0, max = 1) => Math.random() * (max - min) + min;
let targetsSize = 60;
// Creating the points for the shape
let targets = [];
for (let i = 0; i < targetsSize; i++) {
let target = new Vector(random(0, canvas.width), random(0, canvas.height));
engine.add(new SpringTrail({ target: target, size: 1.3, trailSize: 10, color: "rgba(230, 10, 40, 0.8)" }));
targets.push(target);
}
let time = 0;
(function animate() {
time++;
engine.clear();
engine.tick();
engine.render();
updateTargets();
window.requestAnimationFrame(animate);
})();
// Applying the shape to the target points
function updateTargets() {
for (let i = 0; i < targetsSize; i++) {
let lerp = i / (targetsSize - 1) * Math.PI * 2 + random() / 10;
let result = polar(lerp, time);
targets[i].x = result.x;
targets[i].y = result.y;
// Randomly swap two points
if (random() < 0.004) {
let rnd1 = Math.floor(random(0, targets.length));
let rnd2 = Math.floor(random(0, targets.length));
[targets[rnd1], targets[rnd2]] = [targets[rnd2], targets[rnd1]];
}
}
}
}
let containers = document.querySelectorAll('div.slide');
for (let i = 0; i < containers.length; i++) {
let canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
initHeart(canvas);
}

Alles anzeigen

Und dieses CSS:

Code

div.slide {
position: relative;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
pointer-events: none;
}

Alles anzeigen

Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.

Sempervivum · 13. März 2019

Zitat

Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist

Erledigt, so sind auch die unteren Teilseiten einbezogen:

Code

function initHeart(canvas, container) {
let range = n => Array.from(Array(n).keys())
class Vector {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
reflect() {
return new Vector(-this.x, -this.y);
}
add(vector) {
return new Vector(this.x + vector.x, this.y + vector.y);
}
subtract(vector) {
return new Vector(this.x - vector.x, this.y - vector.y);
}
scale(scalar = 1) {
return new Vector(this.x * scalar, this.y * scalar);
}
length() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
distance(vector) {
let dx = this.x - vector.x;
let dy = this.y - vector.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
class IO {
constructor() {
this.mouse = new Vector();
this.bindMouse();
}
bindMouse() {
window.addEventListener('mousemove', ({ x, y }) => {
this.mouse.x = x;
this.mouse.y = y;
});
}
}
class Point {
constructor({ position = new Vector(), color = '#f00', size = 3 }) {
this.position = position;
this.color = color;
this.size = size;
}
render(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
}
class SpringPoint extends Point {
constructor({ target = new Vector(), elasticity = 1e-1, color = 'rgba(255, 0, 0, .6)', size = 3, damping = 1e-1 }) {
super({ position: target, color, size });
this.velocity = new Vector();
this.target = target;
this.elasticity = elasticity;
this.damping = damping;
}
updateVelocity() {
let damping = this.velocity.scale(this.damping);
let force = this.target
.subtract(this.position)
.scale(this.elasticity)
.subtract(damping);
this.velocity = this.velocity.add(force);
}
updatePosition() {
this.position = this.position.add(this.velocity);
}
update() {
this.updatePosition();
this.updateVelocity();
}
}
class SpringTrail extends SpringPoint {
constructor(config) {
super(config);
this.trail = range(config.trailSize || 10).map(index => {
config.target = this.position;
config.elasticity = 1 / (index * 8);
config.damping = 8 / (index * 10 + 5);
return new SpringPoint(config);
});
}
update() {
super.update();
this.trail.forEach(point => point.update());
}
render(ctx) {
super.render(ctx);
this.trail.forEach(point => point.render(ctx));
}
}
class Physics {
update(objects) {
objects.forEach(object => object.update());
}
}
class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}
class Engine {
constructor(physics, renderer, objects = []) {
this.physics = physics;
this.renderer = renderer;
this.objects = objects;
}
add(...objects) {
this.objects = this.objects.concat(objects);
}
tick() {
this.physics.update(this.objects);
}
render() {
this.renderer.render(this.objects);
}
clear() {
this.renderer.clear();
}
}
// let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
let io = new IO();
let engine = new Engine(
new Physics(),
new Renderer(ctx, { width: canvas.width, height: canvas.height })
);
let origin = new Vector(canvas.width / 2, canvas.height / 2);
// This is what generates the shape
let polar = (rad, time) => {
rad += Math.sin(time / 100);
let x = 16 * Math.sin(rad) ** 3;
let y = 13 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad);
let scale = (Math.sin(time / 10) + 3) * 4;
return new Vector(x * scale, -y * scale)
.add(origin.add(io.mouse.subtract(origin).scale(0.5)));
};
let random = (min = 0, max = 1) => Math.random() * (max - min) + min;
let targetsSize = 60;
// Creating the points for the shape
let targets = [];
for (let i = 0; i < targetsSize; i++) {
let target = new Vector(random(0, canvas.width), random(0, canvas.height));
engine.add(new SpringTrail({ target: target, size: 1.3, trailSize: 10, color: "rgba(230, 10, 40, 0.8)" }));
targets.push(target);
}
let time = 0;
(function animate() {
if (container.classList.contains('current') || container.classList.contains('show')) {
time++;
engine.clear();
engine.tick();
engine.render();
updateTargets();
}
window.requestAnimationFrame(animate);
})();
// Applying the shape to the target points
function updateTargets() {
for (let i = 0; i < targetsSize; i++) {
let lerp = i / (targetsSize - 1) * Math.PI * 2 + random() / 10;
let result = polar(lerp, time);
targets[i].x = result.x;
targets[i].y = result.y;
// Randomly swap two points
if (random() < 0.004) {
let rnd1 = Math.floor(random(0, targets.length));
let rnd2 = Math.floor(random(0, targets.length));
[targets[rnd1], targets[rnd2]] = [targets[rnd2], targets[rnd1]];
}
}
}
}
let containers = document.querySelectorAll('div.slide, div.content');
for (let i = 0; i < containers.length; i++) {
let canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
initHeart(canvas, containers[i]);
}

Alles anzeigen

judoe007 · 13. März 2019

PERFEKT. VIELEN VIELEN DANK

Nur eine Frage noch:

Wenn ich in die Seiten darunter sehe, ist auch das Herz zu sehen. Mal oben, mal unten, ganz anders als die Maus.

Es darf nur auf den Hauptseiten zu sehen sein/den oberen Abschnitten(slide)

Sempervivum · 13. März 2019

Dann brauchst Du diese nur im Selektor wegzulassen:

Code

let containers = document.querySelectorAll('div.slide');

judoe007 · 13. März 2019

Ok. Nur klappt leider jetzt der Befehl:

<h2>Round Table <span>King Arthur's creative team techniques</span></h2>

<p>Passing......</p>

</div>

nicht mehr, bzw. es wird nur "img24"angezeigt,

Sempervivum · 13. März 2019

Das kann ich leider nicht finden. Ist das im originalen HTML oder hast Du es hinzu gefügt?

judoe007 · 13. März 2019

Selber hinzugefügt. Er nimmt unten keine Bilder an

Sempervivum · 13. März 2019

Kann ich nicht reproduzieren. Wenn ich ein Bild einfüge, wird es auch angezeigt, etwa so:

Code

<div class="slide" data-content="content-2">
<div class="img-wrap"><img src="img/2.jpg" alt="img2" /></div>
<h2>Round Table <span><img src="img/buttonpause.png">King Arthur's creative team
techniques</span></h2>
<button class="content-switch">Read more</button>
</div>

Sempervivum · 13. März 2019

Doch, das mit King Arthur's Team gibt es zwei Mal, oben und unten. Aber auch unten funktioniert es, wenn ich ein Bild einfüge:

king-arthur-img.png

judoe007 · 13. März 2019

klappt. danke

judoe007 · 13. März 2019

Soweit nur noch eine Frage:

wie kann ich das Bild der Bildschirmgröße anpassen, wie es bei den slidern ist? Bei <div class="img-wrap> zeigt er es sehr sehr klein an beziehungsweise ändert die Größe nicht mit.

Sempervivum · 13. März 2019

Wenn es direkt in dem Container div.content liegt, so wie Du es in #12 gepostet hast, kannst Du es anpassen, indem Du die Größe in Prozent angibst:

Code

div[data-content="content-2"]>img {
width: 30%;
height: auto;
}

Liegt es in irgend welchen Untercontainern, kannst Du statt dessen Viewport-Units verwenden, z. B.:

width: 30vw;d. h. 30% der Breite des Browserfenstern.

judoe007 · 13. März 2019

folgendes klappt nicht:

<h2>Round Table <span>King Arthur's creative team techniques</span></h2>

<div[data-content="content-2"]>

width: 50%;

height: auto;

}

</div>

Tags