drag slider durchsichtig

judoe007

Guten Tag,

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

Sempervivum

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

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

https://tympanus.net/codrops/2014/0…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

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

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

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

Vielen Dank vorab

Sempervivum

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

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

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

Dann brauchst Du diese nur im Selektor wegzulassen:

Code

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

judoe007

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

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

judoe007

Selber hinzugefügt. Er nimmt unten keine Bilder an

Sempervivum

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

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:

html-seminar.de/woltlab/attachment/1812/

judoe007

klappt. danke

judoe007

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

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

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>

drag slider durchsichtig

Jetzt mitmachen!

Tags