Ich habe diese Idee, in der Sie nur Schwärze auf der Website sehen können, aber wenn Sie mit der Maus darüber schweben zeigt es einen weißen Kreis mit radialem Verlauf zeigt die darunter liegenden Menüpunkte wie "Kontakt", "Info" und "Produkte" an. Und wenn Sie auf "Produkte" klicken, werden alle Elemente auf der Seite angezeigt, aber sie sind immer noch unter der Schwärze verborgen und werden nur angezeigt, wenn Sie darüber schweben. Wenn Sie auf eines der Produkte klicken, können Sie über den Link "a tag" zur Produktseite wechseln.Hide divs unter Schwärze und zeige Elemente unten mit einem Farbverlauf beim Hover
So bekomme ich die beiden Teile - 1) zeigen Dinge mit Farbverlaufskreis, und 2) Produkte nach dem Klicken auf "Produkte" - zu arbeiten, aber die Leinwand Teil mit dem Farbverlauf nur stecken, wenn die Produkte erscheinen. Das ist wahrscheinlich, weil ich es in einer Hacky Art und Weise zu tun versucht, durch diese beiden Wechselwirkungen zu trennen, wie folgt:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/normalize.css">
<link rel="stylesheet" type="text/css" href="./assets/stylesheet/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<div class="menu-item" id="products"><a>Products</a></div>
<div class="menu-item" id="contact"><a href="./contact.html">News</a></div>
</div>
<script>
// create a full screen canvas
var canvas = document.createElement("canvas");
canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.zIndex = 10;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
// var to hold context
var ctx;
// load an image
var image = new Image();
image.src = "./assets/images/white.jpg";
// add resize event
var resize = function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d");
}
// add mouse event. Because it is full screen no need to bother with offsets
var mouse = function(event){
posX = event.clientX;
posY = event.clientY;
}
// incase the canvas size is changed
window.addEventListener("resize",resize);
// listen to the mouse move
canvas.addEventListener("mousemove",mouse);
// Call resize as that gets our context
resize();
// define the gradient
var cirRadius = 300;
var posX = 100; // this will be set by the mouse
var posY = 100;
var RGB = [11,11,11] ; // black any values from 0 to 255
// var alphas = [0,0,0.2,0.5,0.9,0.95,1]; // zero is transparent one is not
var alphas = [0,0,0.1,0.5,1];
// the update function
var update = function(){
if(ctx){ // make sure all is in order..
if(image.complete){ // draw the image when it is ready
ctx.drawImage(image,0,0,canvas.width,canvas.height)
}else{ // while waiting for image clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
}
// create gradient
var grad = ctx.createRadialGradient(posX,posY,0,posX,posY,cirRadius);
// add colour stops
var len = alphas.length-1;
alphas.forEach((a,i) => {
grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
});
// set fill style to gradient
ctx.fillStyle = grad;
// render that gradient
ctx.fillRect(0,0,canvas.width,canvas.height);
}
requestAnimationFrame(update); // keep doing it till cows come home.
}
// start it all happening;
requestAnimationFrame(update);
</script>
<script>
$("#products").click(function(){
$("#products").remove();
var diagram = document.createElement("div");
diagram.style.position = "absolute";
diagram.style.left = "0px";
diagram.style.top = "0px"
diagram.style.zIndex = 100;
diagram.style.width = window.innerWidth + "px";
diagram.style.height = window.innerHeight + "px";
document.body.appendChild(diagram);
var products = [{
titleShort: "Black",
mainImage: "N/A",
link: "./black.html"
}, {
titleShort: "White",
mainImage: "N/A",
link: "./white.html"
}, {
titleShort: "Red",
mainImage: "N/A",
link: "./red.html"
}, {
titleShort: "Blue",
mainImage: "N/A",
link: "./blue.html"
}]
for (var i = 0; i < products.length; i++) {
var product = document.createElement("div");
diagram.appendChild(product);
productstyle.position = "absolute";
product.style.width = "120px";
product.style.height = "50px";
product.style.top = i * 100 + "px";
product.style.left = i * 100 + "px";
product.style.textAlign = "center";
var circle = document.createElement("a");
circle.style.width = "15px";
circle.style.height = "15px";
circle.style.borderRadius = "50%";
circle.style.backgroundColor = "black";
circle.style.marginLeft = "auto";
circle.style.marginRight = "auto";
circle.href = products[i].link;
product.appendChild(circle);
}
});
</script>
</body>
</html>
Hinweis: alle Produkte werden nur durch die Punkte/Kreise aus Gründen der Bequemlichkeit vertreten.
Es ist wahrscheinlich am besten, wenn ich zwei Teile zu einer Leinwand zusammenführe. Zum Beispiel haben wir gerade dieses weiße Bild als Hintergrund für die Leinwand, wenn wir in gewisser Weise das Bild mit den Produkten aktualisieren können? Aber ich bin sehr neu auf Leinwand und bin mir daher nicht sicher, wie ich das machen soll. Andere Vorschläge sind ebenfalls willkommen.
Warum Leinwand für diese überhaupt verwenden? Ich würde den 'border-radius' von CSS verwenden und einfach die Darstellung ändern, wie' .someClassName {display: none;} 'und' .someClassName: hover {display: block;} '. – PHPglue
@PHPglue danke für deine Eingabe, aber ich bin mir nicht sicher, ob du verstehst, was ich versuche ... Ich möchte, dass alle Gegenstände erscheinen, obwohl sie unter der Dunkelheit verborgen sind. Wenn Sie schweben, "sehen" Sie durch die Schwärze, um die Gegenstände zu sehen. Wie würde der Farbkreis in Ihrer Methode die Schwärze sichtbar machen? – practicemakesperfect
@markE Bitte entfernen Sie die doppelte Markierung; Dies ist kein Duplikat derselben Frage. In der anderen Frage, die Sie angeben, interagiert ein Benutzer nicht mit dem Bild im Hintergrund und das Bild bleibt immer gleich; In meiner Frage kann der Benutzer tatsächlich auf einen anderen Teil des Hintergrundbilds klicken, um zu verschiedenen Seiten zu gelangen. – practicemakesperfect