Verstehe nicht ganz: Weder im oberen noch im unteren Bereich sehe ich Pfeile nach links und rechts, sondern oben navigiert man durch horizontales Wischen? Oder meinst Du das Weiterschalten mit den Pfeiltasten?
Beiträge von Sempervivum
-
-
Dieses CSS:
Code.uk-margin-top uk-button uk-button-large uk-button-danger { display: none; }wird nicht funktionieren, denn es würde bedeuten:
Das Element mit dem Namen "uk-button-danger" (also nicht der Klasse) ist ein Nachfahre des Elementes mit dem Namen "uk-button-large" und dieses ist ein Nachfahre des Elementes mit dem Namen "uk-button" und dieses ..., siehe hier:https://wiki.selfhtml.org/wiki…ator/Nachfahrenkombinator
Richtig wäre dieses:
Code.uk-margin-top.uk-button.uk-button-large.uk-button-danger { display: none; }Allerdings ist es auf jedenfalls empfehlenswert, einen Selektor zu verwenden, der spezifischer ist als diese Klassen, wie von Justus vorgeschlagen.
-
Das geht relativ leicht auch mit CSS aber mit Einschränkungen bzgl. der Anordnung:
- Das zweite Element muss ein Geschwisterelement oder ein Kind eines Geschwisterelementes des ersten Elementes sein.
- Das zweite Element muss nach dem ersten notiert werden.
Es gibt aber auch einen Vorteil: Mit CSS-Transition oder -Animation können viele Eigenschaften einfach animiert werden.
Code
Alles anzeigen<style> #obj_1:hover~#obj_2 { opacity: 0; } #obj_2 { transition: opacity 0.5s; } </style> <!-- Dein Objekt in HTML. Als Beispiel ein Button --> <input type="button" id="obj_1" /> <!-- Dein zweites Objekt --> <div id="obj_2"> <input type="button" /> </div> -
Dieses CSS in eine Datei custom.css im Verzeichnis css schreiben:
Codeimg.customimg { width: 10%; height: auto; }Diese Datei in der HTML-Datei einbinden:
Code<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/dragdealer.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <link rel="stylesheet" type="text/css" href="css/custom.css" /> <!-- dieses einfuegen --> <script src="js/modernizr.custom.js"></script> </head>Das HTML für das Einbinden des Bildes, wie Du siehst, habe ich dem Bild die Klasse "customimg" gegeben, damit man es zweifelsfrei identifizieren kann.
Code
Alles anzeigen<div class="content" data-content="content-2"> <h2>Round Table <span>King Arthur's creative team techniques</span></h2> <img class="customimg" src="img/buttonpause.png"> <p>Passing by the rugged Socotra, we soon sighted the mountainous southern coast of Arabia, and by midday on January 20 we were focussing our binoculars on the picturesque gate of the Indian Ocean, Aden. Curious it is how Britain has secured all the great strategical points of the world—Gibraltar, Suez, Aden, Singapore, Thursday Island, the Cape of Good Hope, and the rest. And one has only to see Aden, with its rocky peaks piercing the skyline, to realize how strong it is, and how futile would be any effort to capture it. For all the defences of Aden seem to be hewn out of solid granite.</p> -
Und damit es unabhängig von Groß- und Kleinschreibung ist, kannst Du beide Strings zuvor in Kleinschreibung umwandeln:
-
Dann ist es ganz einfach: Informiere dich über indexOf(), damit kannst Du prüfen, ob ein Teilstring in einem anderen String enthalten ist:
-
Ja, das HTML bleibt unverändert.
-
Der Name des Bildes ist im CSS nicht notwendig, denn das ist eine allgemeine Formulierung. Verbal etwa: Nimm alle divs, die ein Attribut data-content mit dem Wert "content-2" haben. Darin suche jeweils ein img-Element und wende darauf die CSS-Anweisungen in den geschweiften Klammern an.
Und das CSS gehört dann in den Head.
-
Doch, das hat schon seine Richtigkeit, denn das ist CSS, kein HTML. Wenn Du es in deine HTML-Seite einbetten willst, muss es so aussehen und dann sind auch die spitzen Klammern da:
Code<style> div[data-content="content-2"]>img { width: 30%; height: auto; } </style> -
Wenn Du die Einträge aus einer Datenbank ausliest, kannst Du Wildcards verwenden, siehe z. B. hier:
https://www.guru99.com/wildcards.html
Sogar Regexes sind möglich:
-
Nein, so kann es nicht funktionieren, denn das, was ich zuletzt gepostet habe, ist CSS und kein HTML. Informiere dich, wie Du CSS einbinden kannst:
-
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:
Codediv[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.
-
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:
-
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> -
Das kann ich leider nicht finden. Ist das im originalen HTML oder hast Du es hinzu gefügt?
-
Dann brauchst Du diese nur im Selektor wegzulassen:
Codelet containers = document.querySelectorAll('div.slide'); -
ZitatWahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist
Erledigt, so sind auch die unteren Teilseiten einbezogen:
Code
Alles anzeigenfunction 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]); } -
Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:
Code
Alles anzeigenfunction 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); }Und dieses CSS:
Code
Alles anzeigendiv.slide { position: relative; } canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999; pointer-events: none; }Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.
-
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.
-
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.