123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309 |
-
- <!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>
|