layout keywords title description grid_navigation homepage Foam Developing tools for thought. title excerpt cta url Getting started It's easy to start writing with Foam. Let's do it https://foambubble.github.io/foam <style> #bubble-wrap { bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 0; pointer-events: none; } /* KEYFRAMES */ @-webkit-keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @-moz-keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @-webkit-keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } @-moz-keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } @keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } /* ANIMATIONS */ .x1 { -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; left: -5%; top: 5%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } .x2 { -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 5%; top: 80%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x3 { -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 10%; top: 40%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } .x4 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 20%; top: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x5 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 30%; top: 50%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } .x6 { -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 50%; top: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } .x7 { -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 65%; top: 70%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x8 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 80%; top: 10%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x9 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 90%; top: 50%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } .x10 { -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 80%; top: 80%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } /* OBJECTS */ .bubble { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); height: 200px; position: absolute; width: 200px; } .bubble:after { background: rgba(255, 255, 255, 0.7); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); content: ""; height: 180px; left: 10px; position: absolute; width: 180px; } </style>