Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Animated background options

Featured Replies

Hi all,

I’m working on a website and would like an animated background at the top of the home page, I've only ever worked on static sites so I don't know where to begin. I want to try and do it myself as I know HTML & CSS and I'm a very quick learner - all self taught. Although I'm thinking I may need to get a professional in for this.

I'm very interested in hearing everyones advice and opinions on where I can go with this next...

I've seen the particles.js which is awesome, I would like it to work similar but with this kind of design: http://prntscr.com/iyvqht (Please ignore the colours and design as its a very quick draft, just to show the layered shapes)

The animation would start on page load; the objects/shapes slowly moving randomly around the screen in the background. An added feature would be, on mouse rollover the squares moving slightly; following or bouncing away from the cursor.

I'm wondering if this could be done in CSS3 or would need to be Javascript? Or could I achieve some of this using CSS3 but need Javascript for following the mouse, for example?

I would really appreciate any guidance on this, I look forward to hearing your advice

Thanks
J

 

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.