hi guys,
I have setup a html overlay menu with an animation and everything works fine.
but it took some time until it opens and the animation just showing up once. do I have to do the animation differently. hier ist the code I used to create the animation:
#menu {
animation: zoom 1.5s ease-in-out forwards;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 134px;
width: 164px;
}
@keyframes zoom {
0% {transform: scale(0)}
70% {transform: scale(1.2)}
100% {transform: scale(1)}
}
it would be also nice if you could choose an animation from inside of BBT.
thanks
If you post a full example I can tell you what you need to do to make the animation show up every time.
Btw: I moved this to the questions section.
hi,
thanks for reply. do you need the html and css? or just the css?
so, I tried to upload the files but it don't let me. so hier are the codes:
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<!-- <script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
setTimeout(() => {
document.getElementById("menu-open").checked = true;
}, 0);
}
function BTTWillCloseWindow() {
// this function is called everytime you close the menu
document.getElementById("menu-open").checked = false;
}
</script>-->
</head>
<body>
<div id="menu">
<div class="nav1">
<a href="btt://trigger_named/?trigger_name=Finder&closeFloatingHTMLMenu=1" class="finder">΀</a>
</div>
<div class="nav2">
<!--__________________________adobe________________________-->
<a href="btt://trigger_named/?trigger_name=Photoshop&closeFloatingHTMLMenu=1" class="Ps">Ps</a>
<a href="btt://trigger_named/?trigger_name=Illustrator&closeFloatingHTMLMenu=1" class="Ai">Ai</a>
<a href="btt://trigger_named/?trigger_name=Indesign&closeFloatingHTMLMenu=1" class="Id">Id</a>
</div>
<div class="nav3">
<div class="youtube">
<a href="btt://trigger_named/?trigger_name=YouTube&closeFloatingHTMLMenu=1" class="utube"><i class="fab fa-youtube"></i></a>
<div class="youtube-content">
<a href="btt://trigger_named/?trigger_name=YouTube Abos&closeFloatingHTMLMenu=1" class="abo"><i class="fas fa-play-circle"></i></a>
<a href="btt://trigger_named/?trigger_name=YouTube watch later&closeFloatingHTMLMenu=1" class="watch-later"><i class="fas fa-clock"></i></a>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Deviantart&closeFloatingHTMLMenu=1" class="deviant"><i class="fab fa-deviantart"></i></a>
<a href="btt://trigger_named/?trigger_name=Behance&closeFloatingHTMLMenu=1" class="behance"><i class="fab fa-behance"></i></a>
</div>
</div>
</body>
</html>
css:
body{
padding: 0;
margin: 0;
background: clear;
color: #EEEEEE;
text-align: center;
font-family: Helvetica;
font-weight: bold;
}
a {
color: inherit;
text-decoration: none;
}
.nav1 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 48;
height: 134px;
width: 40px;
font-family: icon font;
font-size: 30px;
}
.nav2 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 48;
height: 134px;
width: 40px;
font-size: 25px;
}
.nav3 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 48;
right: 0;
height: 134px;
width: 40px;
font-size: 25px;
}
#menu {
animation: zoom 1.5s ease-in-out forwards;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 134px;
width: 164px;
}
@keyframes zoom {
0% {transform: scale(0)}
70% {transform: scale(1.2)}
100% {transform: scale(1)}
}
.deviant:hover {
color: rgb(33, 202, 79);
transition: 0.3s;
}
.deviant {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
margin-top: 7px;
margin-bottom: 7px;
display: grid;
place-content: center;
}
.behance:hover {
color: rgb(16, 86, 251);
transition: 0.3s;
}
.behance {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
display: grid;
place-content: center;
letter-spacing: -2px;
}
.finder:hover {
color: rgb(0, 168, 255);
transition: 0.3s;
}
.finder {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin-left: -47px;
display: grid;
place-content: center;
}
.finder-img {
max-width: 100%;
max-height: 100%;
}
.Ps:hover {
color: rgb(34, 201, 252);
transition: 0.3s;
}
.Ps {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
}
.Id:hover {
color: rgb(252, 68, 148);
transition: 0.3s;
}
.Id {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
}
.Ai:hover {
color: rgb(253, 124, 35);
transition: 0.3s;
}
.Ai {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
margin-top: 7px;
margin-bottom: 7px;
display: grid;
place-content: center;
}
.utube:hover, .abo:hover, .watch-later:hover {
color: rgb(252, 9, 27);
transition: 0.3s;
}
.utube {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
letter-spacing: -1px;
}
.abo {
background: rgb(42, 45, 47);
width: 30px;
height: 30px;
border-radius: 25%;
margin: 0 auto;
margin-left: 11px;
margin-left: 11px;
/* margin-bottom: 5px;*/
display: grid;
place-content: center;
}
.watch-later {
background: rgb(42, 45, 47);
width: 30px;
height: 30px;
border-radius: 25%;
margin: 0 auto;
margin-top: -30;
margin-left: 48;
display: grid;
place-content: center;
}
.youtube-content {
/* display: none;*/
display: block;
position: absolute;
margin: 0 auto;
font-size: 65%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-left: 36px;
height: 30px;
width: 80px;
}
.youtube:hover .youtube-content {
display: block;
}
Looks very nice!
Here is a example of how to get the animation to work every time:
https://share.folivora.ai/sharedPreset/91c6e010-d249-4054-adf1-0c0c1ae81a61
And here a combined HTML+CSS:
<html>
<head>
<style>
body{
padding: 0;
margin: 0;
background: clear;
color: #EEEEEE;
text-align: center;
font-family: Helvetica;
font-weight: bold;
}
a {
color: inherit;
text-decoration: none;
}
.nav1 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 48;
height: 134px;
width: 40px;
font-family: icon font;
font-size: 30px;
}
.nav2 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 48;
height: 134px;
width: 40px;
font-size: 25px;
}
.nav3 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 48;
right: 0;
height: 134px;
width: 40px;
font-size: 25px;
}
#menu {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 134px;
width: 164px;
}
.hideMenu {
display:none;
}
.zoomAnimation {
animation: zoom 1.5s ease-in-out forwards;
}
@keyframes zoom {
0% {transform: scale(0)}
70% {transform: scale(1.2)}
100% {transform: scale(1)}
}
.deviant:hover {
color: rgb(33, 202, 79);
transition: 0.3s;
}
.deviant {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
margin-top: 7px;
margin-bottom: 7px;
display: grid;
place-content: center;
}
.behance:hover {
color: rgb(16, 86, 251);
transition: 0.3s;
}
.behance {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
display: grid;
place-content: center;
letter-spacing: -2px;
}
.finder:hover {
color: rgb(0, 168, 255);
transition: 0.3s;
}
.finder {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin-left: -47px;
display: grid;
place-content: center;
}
.finder-img {
max-width: 100%;
max-height: 100%;
}
.Ps:hover {
color: rgb(34, 201, 252);
transition: 0.3s;
}
.Ps {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
}
.Id:hover {
color: rgb(252, 68, 148);
transition: 0.3s;
}
.Id {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
}
.Ai:hover {
color: rgb(253, 124, 35);
transition: 0.3s;
}
.Ai {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
margin-top: 7px;
margin-bottom: 7px;
display: grid;
place-content: center;
}
.utube:hover, .abo:hover, .watch-later:hover {
color: rgb(252, 9, 27);
transition: 0.3s;
}
.utube {
background: rgb(42, 45, 47);
width: 40px;
height: 40px;
border-radius: 25%;
margin: 0 auto;
display: grid;
place-content: center;
letter-spacing: -1px;
}
.abo {
background: rgb(42, 45, 47);
width: 30px;
height: 30px;
border-radius: 25%;
margin: 0 auto;
margin-left: 11px;
margin-left: 11px;
/* margin-bottom: 5px;*/
display: grid;
place-content: center;
}
.watch-later {
background: rgb(42, 45, 47);
width: 30px;
height: 30px;
border-radius: 25%;
margin: 0 auto;
margin-top: -30;
margin-left: 48;
display: grid;
place-content: center;
}
.youtube-content {
/* display: none;*/
display: block;
position: absolute;
margin: 0 auto;
font-size: 65%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-left: 36px;
height: 30px;
width: 80px;
}
.youtube:hover .youtube-content {
display: block;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<script>
// this function is called everyime you open the menu in BTT
function BTTInitialize() {
setTimeout(() => {
document.getElementById("menu").classList.add("zoomAnimation");
document.getElementById("menu").classList.remove("hideMenu");
}, 0);
}
function BTTWillCloseWindow() {
// this function is called everytime you close the menu
document.getElementById("menu").classList.remove("zoomAnimation");
document.getElementById("menu").classList.add("hideMenu");
}
</script>
</head>
<body>
<div id="menu">
<div class="nav1">
<a href="btt://trigger_named/?trigger_name=Finder&closeFloatingHTMLMenu=1" class="finder">΀</a>
</div>
<div class="nav2">
<!--__________________________adobe________________________-->
<a href="btt://trigger_named/?trigger_name=Photoshop&closeFloatingHTMLMenu=1" class="Ps">Ps</a>
<a href="btt://trigger_named/?trigger_name=Illustrator&closeFloatingHTMLMenu=1" class="Ai">Ai</a>
<a href="btt://trigger_named/?trigger_name=Indesign&closeFloatingHTMLMenu=1" class="Id">Id</a>
</div>
<div class="nav3">
<div class="youtube">
<a href="btt://trigger_named/?trigger_name=YouTube&closeFloatingHTMLMenu=1" class="utube"><i class="fab fa-youtube"></i></a>
<div class="youtube-content">
<a href="btt://trigger_named/?trigger_name=YouTube Abos&closeFloatingHTMLMenu=1" class="abo"><i class="fas fa-play-circle"></i></a>
<a href="btt://trigger_named/?trigger_name=YouTube watch later&closeFloatingHTMLMenu=1" class="watch-later"><i class="fas fa-clock"></i></a>
</div>
</div>
<a href="btt://trigger_named/?trigger_name=Deviantart&closeFloatingHTMLMenu=1" class="deviant"><i class="fab fa-deviantart"></i></a>
<a href="btt://trigger_named/?trigger_name=Behance&closeFloatingHTMLMenu=1" class="behance"><i class="fab fa-behance"></i></a>
</div>
</div>
</body>
</html>
hey,
thank you very much. looks like you have changed the script part. I wanted to do it by my self but I'm not using html and css since over 10 years and never had done java scripting. so I didn't know how to do the scripting part.
thanks again. 
hi,
it's me again. 
I put everything together and it works great.
now I thought maybe I put the code also in BTT, so it loads maybe faster. and for that I have to put the css code in the html code. but when I do so, the problem is, that I've created for some icons a custom font and this icons don't wanna to show up. do you know any solution for that? or to make something, so it would load faster?
thanks
How do you load the font?
I created it my self and use this in the css to show it:
@font-face {
src: url(font/iconfont-Regular.otf);
font-family: icons;
}
