<!DOCTYPE html> <html lang="he" dir="rtl"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>כל שם כוכב</title> <!-- Google fonts--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Alef:wght@700&display=swap" rel="stylesheet"> <style> body { font-family: Alef; font-size: 3rem; color: white; background-color: black; background-image: url('starfield.png'); background-size: cover; } .name { position: fixed; } </style> </head> <body> <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> <script> var CYCLE_MILLIS = 50; var P_TWINKLE = 0.23; var DECAY_FACTOR = 0.023; var CUTOFF_LEVEL = 0.1; function cycle() { if (Math.random()<P_TWINKLE) { $($(".name")[Math.floor(Math.random()*N)]).css("opacity", 1); } $(".name").each(function(index) { var op = Number($(this).css("opacity"))*(1.0-DECAY_FACTOR); $(this).css("opacity", op>CUTOFF_LEVEL? op: 0); }); } var names = [ "Anucha", "Gong", "Komkrit", "Manee", "Natthaporn", "Owat", "Pattanayuth", "אביב", "אביב", "אביבה", "אביגיל", "אבינתן", "אביתר", "אברהם", "אגם", "אגם", "אהד", "אוהד", "אוהד", "אופיר", "אופיר", "אופליה", "אור", "אור", "אורי", "אוריאל", "אוריה", "אוריון", "אורן", "איוון", "אילן", "אילנה", "אירנה", "איתי", "איתי", "איתי", "איתן", "איתן", "איתן", "איתן", "אלה", "אלון", "אלון", "אלי", "אליה", "אליה", "אליהו", "אליקים", "אלכס", "אלכסנדר", "אלמה", "אלמוג", "אלמוג", "אלעד", "אלקנה", "אמה", "אמילי", "אמיליה", "אנדריי", "אפרת", "ארבל", "ארז", "אריאל", "אריאל", "אריה", "בלאל", "בר", "גבריאלה", "גד", "גד", "ג'ודי", "ג'ושוע", "ג'ושי", "גיא", "גיא", "ג'ימי", "גל", "גלי", "דוד", "דוד", "דולב", "דורון", "דורון", "דיצה", "דניאל", "דניאל", "דניאל", "דפנה", "דפנה", "דרור", "דרור", "הגר", "הילה", "הירש", // "ויויאן", "זיו", "חיים", "חמזה", "חן", "חנה", "חנה", "חנן", "טל", "טל", "טל", "טל", "יאיר", "יאיר", "יגב", "יגיל", "יהודית", "יהל", "יובל", "יובל", "יולי", "יונתן", "יוסוף", "יוסף", "יוסף", "יורם", "יותם", "ילנה", "יפה", "יצחק", "יצחק", "ירדן", "ירדן", "כפיר", "כרמל", "לואיס", "ליאור", "ליאם", "ליאת", "לירי", "מורן", "מיה", "מיה", "מייה", "מייה", "מיקה", "מירב", "מישל", "מקסים", "מרגלית", "מתן", "מתן", "נדב", "נוגה", "נווה", // "נועה", "נועה", "נועם", "נורלין", "נילי", "ניק", "נמרוד", "נעם", "נעמה", "סאמר", "סהר", "סהר", "סוג'יט", "ספיר", "סשה", "עאישה", "עדה", "עדי", "עדינה", "עדן", "עדן", "עודד", "עומר", "עומר", "עומר", "עומרי", "עופר", "עידן", "עידן", "עלמה", "עמירם", "עמית", "עמית", "עמית", "ענבר", "עפרה", "עפרי", "פאצ'קו", "פרננדו", "צחי", "קאיד", "קיריל", "קית", "קלמנס", "קלרה", "קרינה", "קרינה", "קרן", "רביד", "רום", "רומי", "רון", "רון", "רון", // "רוני", "רונן", "רותי", "רז", "רז", "רימון", "רן", "רעיה", "שגב", "שגיא", "שושן", "שירי", "שירי", "שלומי", "שלמה", "שני", "שני", "שקד", "שרון", "שרון", "תומר", "תמיר", "תמיר", "תמר" ]; var N = names.length; $(() => { for (i=0; i<N; i++) { var div = $("<div/>").addClass("name").text(names[i]).css("opacity",0); var yoffset = 50-Math.round(Math.random()*50.0*0.98); var xoffset = Math.round(50.0-(Math.random()*50.0*0.7*Math.sin(Math.PI*0.5*(yoffset/50.0)))); // *(9.0/16.0) if (Math.random()<0.5) { div.css("left", xoffset.toString()+"vw"); } else { div.css("right", xoffset.toString()+"vw"); } if (Math.random()<0.5) { div.css("top", yoffset.toString()+"vh"); } else { div.css("bottom", yoffset.toString()+"vh"); } $("body").append(div); } window.addEventListener('keydown', (event) => { console.log(event.key); if (event.key==="ArrowDown") { $('.name').css("rotate", "180deg"); } else if (event.key==="ArrowUp") { $('.name').css("rotate", "0deg"); } else if (event.key==="ArrowLeft") { $('body').css("background-image", "none"); } else if (event.key==="ArrowRight") { $('body').css("background-image", "url('starfield.png')").css("background-size", "cover"); } }); setInterval(cycle, CYCLE_MILLIS); }); </script> </body>