{"id":161,"date":"2021-07-05T21:59:34","date_gmt":"2021-07-05T19:59:34","guid":{"rendered":"https:\/\/alessandromasciadri.com\/?p=161"},"modified":"2022-02-08T22:57:54","modified_gmt":"2022-02-08T21:57:54","slug":"come-aggiungere-uno-sfondo-casuale-con-javascript","status":"publish","type":"post","link":"https:\/\/alessandromasciadri.com\/come-aggiungere-uno-sfondo-casuale-con-javascript\/","title":{"rendered":"Come aggiungere uno sfondo casuale con JavaScript"},"content":{"rendered":"\t\t<div data-akihiro-type=\"ama-post\" data-akihiro-id=\"161\" class=\"akihiro akihiro-161\" data-akihiro-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"akihiro-section akihiro-top-section akihiro-element akihiro-element-6f2f0854 akihiro-section-boxed akihiro-section-height-default akihiro-section-height-default\" data-id=\"6f2f0854\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"akihiro-container akihiro-column-gap-default\">\n\t\t\t\t\t<div class=\"akihiro-column akihiro-col-100 akihiro-top-column akihiro-element akihiro-element-53de6182\" data-id=\"53de6182\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"akihiro-widget-wrap akihiro-element-populated\">\n\t\t\t\t\t\t<div class=\"akihiro-element akihiro-element-8f2b1f7 akihiro-widget akihiro-widget-text-editor\" data-id=\"8f2b1f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In una pagina HTML vogliamo far variare l&#8217;immagine di sfondo in modo casuale pescando da un insieme di immagini.<\/p>\n<p>Lo script qui sotto l&#8217;ho creato ed utilizzato in un sito sviluppato con WordPress in combinazione con il Visual Builder Elementor.<\/p>\n<p>Per poterlo utilizzare pu\u00f2 essere copiato ed incollato, ma \u00e8 necessario aggiungere id=&#8221;random-section&#8221; alla sezione in cui si vuole rendere lo sfondo casuale.<\/p>\n<p>Nel mio caso lo script l&#8217;ho utilizzato per far aggiungere uno sfondo casuale ad una pagina 404.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-3404c4d akihiro-widget akihiro-widget-code-highlight\" data-id=\"3404c4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><script>\r\n    \/* Funzione per estrarre casualmente l'url dell'immagine dall'array backgrounds *\/\r\n    function getRandomImage(max) {\r\n        let random = Math.floor(Math.random() * max);\r\n        return backgrounds[random];\r\n    }\r\n    \r\n    \/* Questo array va popolato con tutti gli url delle nostre immagini di sfondo *\/\r\n    let backgrounds = [\r\n        'http:\/\/tuo-sito.com\/wp-content\/uploads\/2021\/07\/immagine-1.png',\r\n        'http:\/\/tuo-sito.com\/wp-content\/uploads\/2021\/07\/immagine-2.png',\r\n        'http:\/\/tuo-sito.com\/wp-content\/uploads\/2021\/07\/immagine-3.png'];\r\n    \r\n    var section = document.querySelector(\"#random-section\");\r\n    \r\n    let imgUrl = getRandomImage(backgrounds.length);\r\n    \r\n    section.style = `background-image: url(`+imgUrl+`);\r\n    background-position: 5% 0%;\r\n    background-repeat: no-repeat;\r\n    background-size: contain;`;\r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In una pagina HTML vogliamo far variare l&#8217;immagine di sfondo in modo casuale pescando da un insieme di immagini. Lo script qui sotto l&#8217;ho creato ed utilizzato in un sito sviluppato con WordPress in combinazione con il Visual Builder Elementor. Per poterlo utilizzare pu\u00f2 essere copiato ed incollato, ma \u00e8 necessario aggiungere id=&#8221;random-section&#8221; alla sezione [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[14],"class_list":["post-161","post","type-post","status-publish","format-standard","hentry","category-programmazione","tag-javascript"],"_links":{"self":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":12,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/161\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/161\/revisions\/591"}],"wp:attachment":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/media?parent=161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/categories?post=161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/tags?post=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}