Wobble Notification

Developer
Alex Pate
Size
2,618 Kb
Views
14,168
  1. Wobble Notification Previews
  2. Wobble Notification HTML Codes
  3. Wobble Notification CSS Codes
  4. Wobble Notification JS Codes

How do I make an wobble notification?

What is a wobble notification? How do you make a wobble notification? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.

Wobble Notification Previews
IQ Test

Wobble Notification - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wobble Notification</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="toggle">Toggle Notification</button>
<div class="notification"> <span class="notification__copy">Welcome Back!</span>
</div> <script src="js/index.js"></script>
</body>
</html>

Wobble Notification - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #111; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
.toggle { position: absolute; top: 10px; right: 10px;
}
.notification { width: 70px; height: 70px; border-radius: 70px; background: #3498db; -webkit-transition: all 0.28s cubic-bezier(0.3, 0.3, 0.4, 1.7); transition: all 0.28s cubic-bezier(0.3, 0.3, 0.4, 1.7);
}
.notification--show { width: 200px;
}
.notification__copy { font-size: 15px; font-weight: 600; color: #fff; text-align: center; opacity: 0; display: block; padding-top: 25px; -webkit-transition: none; transition: none;
}
.notification--show .notification__copy { opacity: 1; -webkit-transition: all 0.28s cubic-bezier(0.3, 0.3, 0.4, 1.7) 0.3s; transition: all 0.28s cubic-bezier(0.3, 0.3, 0.4, 1.7) 0.3s;
}

Wobble Notification - Script Codes JS Codes

document.getElementsByClassName('toggle')[0].onclick = function() { toggle = document.getElementsByClassName('notification')[0]; var className = '' + toggle.className + ''; toggle.className = ~className.indexOf('notification--show') ? className.replace('notification--show', '') : toggle.className + ' notification--show';
}
Wobble Notification - Script Codes
Wobble Notification - Script Codes
Home Page Home
Developer Alex Pate
Username alexpate
Uploaded November 24, 2022
Rating 3
Size 2,618 Kb
Views 14,168
Do you need developer help for Wobble Notification?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Pate (alexpate) Script Codes
Name
CSS Colors
Subtle Draw Nav Animation
Whatthehack Pusher
SVG Progress Circle JS
Labs Bubbling Animation
Random HEX Color Generator
Notifier Pulse
Pulse Animation
Stats Animation
Pulse Animation - With Notifications
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!