this weekend I have transformed my project "web desktop environment" (which you can read more about here) into a to a PWA (progressive web app) and in the process of doing so, I learn a really cool trick that made my PWA fill much more alive, the trick was making the background of the PWA app window relative to his position.
live in action 🎞🎞
create one yourself
import React, { useState, useEffect } from "react";
// import our css styles
import "./styles.css";
export default function App() {
const [top, setTop] = useState(0); // track to position of the window relative to the top
const [left, setLeft] = useState(0); // track to position of the window relative to the left
useEffect(() => {
const loop = setInterval(() => {
if (window.screen.availWidth - window.innerWidth === 0) { // check if we are in window maximize mode
// if we are in window maximize mode reset the background position
setTop(0);
setLeft(0);
} else { // else set the top and left states to the window location
setTop(window.screenY)
setLeft(window.screenX)
}
}, 500); // check only 2 times a second to avoid performance lost
return () => clearInterval(loop); // stop loop when component unmount
}, [])
return (
<div className="App">
<div
className="Background"
style={{
width: window.screen.width, //set the image full resolution base on screen resolution
height: window.screen.height,
transform: `translate(
-${left && left % window.screen.availWidth /* in case we are running on a secondry ( left will be equal to primary screen + it's position on the relatve screen) screen we want to only get the position relative to the screen we are running on */}px,
-${top && top - 40 /* remove 40px to account for top tabs and navigation bar */}px
)`,}}
/>
</div>
);
}
/* fullscreen */
.App {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.Background {
background: url("https://picsum.photos/1920/1080"); /* random image api */
position: absolute;
transition: transform 400ms; /* animation for background position change */
}
demo
check out web desktop environment
shmuelhizmi / web-desktop-environment
a web-based cross-platform desktop environment
A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.
What is a Web Desktop Environment
just like any other desktop environment WDE was design to abstract the use of your computer is a visual way but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.
Why?
WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortable…
Top comments (2)
nice! if you try to apply on the element:
would it create the same effect?
yep, if you put it in front of the image component it should work and get it to be blurry.