News
Acerca
Proyectos
Blurry loading effect
slide show – javascript
Redes sociales
Play
HTML JS Y CSS
<!DOCTYPE html> <html lang="en"> <head> <title>Blurry Loading Effect</title> <style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style> <noscript> <style id="wpr-lazyload-bg-nostyle">.welcome__wrap1{--wpr-bg-b8077d40-987a-46ee-ab94-da013b21c8ad: url('https://josealberto.xyz/assets/img/bg/wlc-bg1.jpg');}.welcome__wrap2{--wpr-bg-5b452143-fa99-4856-8f46-2a19be14b93f: url('https://josealberto.xyz/assets/img/bg/Header.png');}.about-shape:after{--wpr-bg-e78836a9-1d7e-42a2-8af5-78f1fad4967c: url('https://josealberto.xyz/assets/img/about/about-bg-shape.png');}.about-area-primery .about-shape:after{--wpr-bg-718aca14-764d-45c7-a087-7b7452c0d66b: url('https://josealberto.xyz/assets/img/about/about-bg-shape2.png');}.about-shape:before{--wpr-bg-8b2d907d-a1c9-42ad-b6ee-359b0857b536: url('https://josealberto.xyz/assets/img/about/about-shape.svg');}.about-area-primery .about-shape:before{--wpr-bg-be17ac02-b31c-445a-9086-7b444ac163f4: url('https://josealberto.xyz/assets/img/about/about-shape2.svg');}.about-area-primery:after{--wpr-bg-34789ef2-3525-4186-98b6-bbaeb0cedf27: url('https://josealberto.xyz/assets/img/bg/about-bg.svg');}.primery-skill:after{--wpr-bg-b677fc1a-9b0b-48e7-b43f-0a70b630daee: url('https://josealberto.xyz/assets/img/bg/skill-bg1.svg');}.service-primery:after{--wpr-bg-c30ec19b-b62b-47ea-8dda-206b78a0bf79: url('https://josealberto.xyz/assets/img/bg/service-bg.svg');}.project-area{--wpr-bg-090a616c-0bd5-41a4-b4db-bf6fc1204907: url('https://josealberto.xyz/assets/img/bg/project-bg.jpg');}.project-area-primery:after{--wpr-bg-9789587b-bf85-4d59-99ac-cdefaf80471b: url('https://josealberto.xyz/assets/img/bg/portfolio-bg.svg');}.testimonials-area1{--wpr-bg-1160be0e-eb32-48ed-9a53-0958654ff39c: url('https://josealberto.xyz/assets/img/bg/testimonials-bg.png');}.about-area1{--wpr-bg-e92586cb-fd3a-46be-aaff-7dd991eb5657: url('https://josealberto.xyz/assets/css/assets/img/bg/about-bg.png');}.about-img-section1{--wpr-bg-71897990-a043-48e6-84c8-785db3128bdd: url('https://josealberto.xyz/assets/img/about/about1.png');}.pricing-area1{--wpr-bg-20cd00bc-9404-4234-b229-e3818e0ae8cb: url('https://josealberto.xyz/assets/img/bg/about-bg.png');}.cta-area1{--wpr-bg-d8452548-6ff8-4cdb-8cce-940a31ac17cf: url('https://josealberto.xyz/assets/img/bg/map.png');}.footer-area1{--wpr-bg-93e36aeb-692c-48ba-a333-459427839b20: url('https://josealberto.xyz/assets/img/bg/footer-bg.png');}.portfolio-bg-1{--wpr-bg-d21e61e6-0c8f-416c-b115-a072ab594b4c: url('https://josealberto.xyz/assets/img/project/portfolio1.jpg');}.portfolio-bg-2{--wpr-bg-f1b10fab-9f6c-48cf-8f86-89c31e6b769b: url('https://josealberto.xyz/assets/img/project/portfolio2.jpg');}.portfolio-bg-3{--wpr-bg-f3c81710-ea22-4f4a-9a4b-82db4af38448: url('https://josealberto.xyz/assets/img/project/portfolio3.jpg');}.portfolio-bg-4{--wpr-bg-35edd261-80d1-400e-b2e5-9e2c8be62c2b: url('https://josealberto.xyz/assets/img/project/portfolio4.jpg');}.portfolio-bg-5{--wpr-bg-d928ea73-385e-420a-b69a-6530e67d0f79: url('https://josealberto.xyz/assets/img/project/portfolio5.jpg');}.portfolio-bg-6{--wpr-bg-cd9b146b-5353-4aa7-bd1a-7e4e0ab06666: url('https://josealberto.xyz/assets/img/project/portfolio6.jpg');}.portfolio-bg-7{--wpr-bg-5f7e8103-aa6a-4ca9-bcd4-5043bb05373f: url('https://josealberto.xyz/assets/img/project/01.jpg');}.portfolio-bg-8{--wpr-bg-9a2a9023-89b2-49e3-9e26-d5dd3b2021f5: url('https://josealberto.xyz/assets/img/project/02.jpg');}.portfolio-bg-9{--wpr-bg-c029a2d3-7282-435d-8079-c4ed9c68cf95: url('https://josealberto.xyz/assets/img/project/03.jpg');}.bg{--wpr-bg-05f462ec-48e4-4f8e-9b09-6cb6665c3bde: url('https://josealberto.xyz/wp-content/uploads/2024/02/7.png');}</style> </noscript> <script type="application/javascript">const rocket_pairs = [{"selector":".welcome__wrap1","style":".welcome__wrap1{--wpr-bg-b8077d40-987a-46ee-ab94-da013b21c8ad: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg');}","hash":"b8077d40-987a-46ee-ab94-da013b21c8ad","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg"},{"selector":".welcome__wrap2","style":".welcome__wrap2{--wpr-bg-5b452143-fa99-4856-8f46-2a19be14b93f: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png');}","hash":"5b452143-fa99-4856-8f46-2a19be14b93f","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png"},{"selector":".about-shape","style":".about-shape:after{--wpr-bg-e78836a9-1d7e-42a2-8af5-78f1fad4967c: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape.png');}","hash":"e78836a9-1d7e-42a2-8af5-78f1fad4967c","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape.png"},{"selector":".about-area-primery .about-shape","style":".about-area-primery .about-shape:after{--wpr-bg-718aca14-764d-45c7-a087-7b7452c0d66b: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png');}","hash":"718aca14-764d-45c7-a087-7b7452c0d66b","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png"},{"selector":".about-shape","style":".about-shape:before{--wpr-bg-8b2d907d-a1c9-42ad-b6ee-359b0857b536: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape.svg');}","hash":"8b2d907d-a1c9-42ad-b6ee-359b0857b536","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape.svg"},{"selector":".about-area-primery .about-shape","style":".about-area-primery .about-shape:before{--wpr-bg-be17ac02-b31c-445a-9086-7b444ac163f4: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg');}","hash":"be17ac02-b31c-445a-9086-7b444ac163f4","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg"},{"selector":".about-area-primery","style":".about-area-primery:after{--wpr-bg-34789ef2-3525-4186-98b6-bbaeb0cedf27: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg');}","hash":"34789ef2-3525-4186-98b6-bbaeb0cedf27","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg"},{"selector":".primery-skill","style":".primery-skill:after{--wpr-bg-b677fc1a-9b0b-48e7-b43f-0a70b630daee: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg');}","hash":"b677fc1a-9b0b-48e7-b43f-0a70b630daee","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg"},{"selector":".service-primery","style":".service-primery:after{--wpr-bg-c30ec19b-b62b-47ea-8dda-206b78a0bf79: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg');}","hash":"c30ec19b-b62b-47ea-8dda-206b78a0bf79","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg"},{"selector":".project-area","style":".project-area{--wpr-bg-090a616c-0bd5-41a4-b4db-bf6fc1204907: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg');}","hash":"090a616c-0bd5-41a4-b4db-bf6fc1204907","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg"},{"selector":".project-area-primery","style":".project-area-primery:after{--wpr-bg-9789587b-bf85-4d59-99ac-cdefaf80471b: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg');}","hash":"9789587b-bf85-4d59-99ac-cdefaf80471b","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg"},{"selector":".testimonials-area1","style":".testimonials-area1{--wpr-bg-1160be0e-eb32-48ed-9a53-0958654ff39c: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png');}","hash":"1160be0e-eb32-48ed-9a53-0958654ff39c","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png"},{"selector":".about-area1","style":".about-area1{--wpr-bg-e92586cb-fd3a-46be-aaff-7dd991eb5657: url('https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png');}","hash":"e92586cb-fd3a-46be-aaff-7dd991eb5657","url":"https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png"},{"selector":".about-img-section1","style":".about-img-section1{--wpr-bg-71897990-a043-48e6-84c8-785db3128bdd: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png');}","hash":"71897990-a043-48e6-84c8-785db3128bdd","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png"},{"selector":".pricing-area1","style":".pricing-area1{--wpr-bg-20cd00bc-9404-4234-b229-e3818e0ae8cb: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png');}","hash":"20cd00bc-9404-4234-b229-e3818e0ae8cb","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png"},{"selector":".cta-area1","style":".cta-area1{--wpr-bg-d8452548-6ff8-4cdb-8cce-940a31ac17cf: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png');}","hash":"d8452548-6ff8-4cdb-8cce-940a31ac17cf","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png"},{"selector":".footer-area1","style":".footer-area1{--wpr-bg-93e36aeb-692c-48ba-a333-459427839b20: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png');}","hash":"93e36aeb-692c-48ba-a333-459427839b20","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png"},{"selector":".portfolio-bg-1","style":".portfolio-bg-1{--wpr-bg-d21e61e6-0c8f-416c-b115-a072ab594b4c: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg');}","hash":"d21e61e6-0c8f-416c-b115-a072ab594b4c","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg"},{"selector":".portfolio-bg-2","style":".portfolio-bg-2{--wpr-bg-f1b10fab-9f6c-48cf-8f86-89c31e6b769b: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg');}","hash":"f1b10fab-9f6c-48cf-8f86-89c31e6b769b","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg"},{"selector":".portfolio-bg-3","style":".portfolio-bg-3{--wpr-bg-f3c81710-ea22-4f4a-9a4b-82db4af38448: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg');}","hash":"f3c81710-ea22-4f4a-9a4b-82db4af38448","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg"},{"selector":".portfolio-bg-4","style":".portfolio-bg-4{--wpr-bg-35edd261-80d1-400e-b2e5-9e2c8be62c2b: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg');}","hash":"35edd261-80d1-400e-b2e5-9e2c8be62c2b","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg"},{"selector":".portfolio-bg-5","style":".portfolio-bg-5{--wpr-bg-d928ea73-385e-420a-b69a-6530e67d0f79: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg');}","hash":"d928ea73-385e-420a-b69a-6530e67d0f79","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg"},{"selector":".portfolio-bg-6","style":".portfolio-bg-6{--wpr-bg-cd9b146b-5353-4aa7-bd1a-7e4e0ab06666: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg');}","hash":"cd9b146b-5353-4aa7-bd1a-7e4e0ab06666","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg"},{"selector":".portfolio-bg-7","style":".portfolio-bg-7{--wpr-bg-5f7e8103-aa6a-4ca9-bcd4-5043bb05373f: url('https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg');}","hash":"5f7e8103-aa6a-4ca9-bcd4-5043bb05373f","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg"},{"selector":".portfolio-bg-8","style":".portfolio-bg-8{--wpr-bg-9a2a9023-89b2-49e3-9e26-d5dd3b2021f5: url('https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg');}","hash":"9a2a9023-89b2-49e3-9e26-d5dd3b2021f5","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg"},{"selector":".portfolio-bg-9","style":".portfolio-bg-9{--wpr-bg-c029a2d3-7282-435d-8079-c4ed9c68cf95: url('https:\/\/josealberto.xyz\/assets\/img\/project\/03.jpg');}","hash":"c029a2d3-7282-435d-8079-c4ed9c68cf95","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/03.jpg"},{"selector":".bg","style":".bg{--wpr-bg-05f462ec-48e4-4f8e-9b09-6cb6665c3bde: url('https:\/\/josealberto.xyz\/wp-content\/uploads\/2024\/02\/7.png');}","hash":"05f462ec-48e4-4f8e-9b09-6cb6665c3bde","url":"https:\/\/josealberto.xyz\/wp-content\/uploads\/2024\/02\/7.png"}]; const rocket_excluded_pairs = [];</script></head> <body> <style> *{ box-sizing:border-box; } body{ font-family: 'Ubuntu'; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin:0; } .bg{ background:var(--wpr-bg-05f462ec-48e4-4f8e-9b09-6cb6665c3bde) no-repeat center center/cover; position: absolute; top:-30px; left:-30px; width: calc(100vw + 60px); height: calc(100vh + 60px); z-index:-1; filter:blur(0px); } .loading-text{ font-size: 50px; color:#fff; } </style><section class="bg"></section><div class="loading-text">0%</div><script type="rocketlazyloadscript"> const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / ((in_max - in_min)) + out_min; } const loadText = document.querySelector('.loading-text'); const bg = document.querySelector('.bg'); let load = 0; let int = setInterval(blurring, 30); function blurring(){ load++; if(load>99){ clearInterval(int); } loadText.innerText = `${load}%`; loadText.style.opacity = scale(load,0,100,1,0); bg.style.filter = `blur(${scale(load,0,100,30,0)}px)`; } </script><script>var rocket_beacon_data = {"ajax_url":"https:\/\/josealberto.xyz\/wp-admin\/admin-ajax.php","nonce":"6257482fbc","url":"https:\/\/josealberto.xyz\/blurry-loading-effect","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://josealberto.xyz/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body></html>
RESULTADO
