Apple Watch Bubble-like UI

Developer
AaronChuo (小狂)
Size
3,765 Kb
Views
28,336
  1. Apple Watch Bubble-like UI Previews
  2. Apple Watch Bubble-like UI HTML Codes
  3. Apple Watch Bubble-like UI CSS Codes
  4. Apple Watch Bubble-like UI JS Codes

How do I make an apple watch bubble-like ui?

Just like Apple Watch's UI, I think its named bubble-like UI.. What is a apple watch bubble-like ui? How do you make a apple watch bubble-like ui? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.

Apple Watch Bubble-like UI Previews
IQ Test

Apple Watch Bubble-like UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple Watch Bubble-like UI</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--隨意捲動畫面看看-->
<div id="container"> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Apple Watch Bubble-like UI - Script Codes CSS Codes

#container { overflow: hidden; width: 2000px; height: 2000px; background: #000;
}
#container ul li { display: inline-block; width: 150px; height: 150px; margin: 10px;
}
#container ul li span { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); border-radius: 50%; overflow: hidden; display: block; width: 100%; height: 100%; background: #999;
}
#container ul li span.smaller { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; margin: 25% 25%; width: 50%; height: 50%;
}
#container ul li span.medium { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; margin: 15% 15%; width: 70%; height: 70%;
}

Apple Watch Bubble-like UI - Script Codes JS Codes

(function(w, d) { //TODO: 效能需要再調整 //抓取所有泡泡 var nodeList = d.querySelectorAll('#container li'); //設定魚眼邊界 var bound = { top: nodeList[0].offsetHeight/2, left: nodeList[0].offsetWidth/2, bottom: w.innerHeight - nodeList[0].offsetHeight/2, right: w.innerWidth - nodeList[0].offsetWidth/2 }; fishEyeEffect(); //監聽頁面捲動 d.addEventListener('scroll', fishEyeEffect); d.addEventListener('touchmove', fishEyeEffect); //模擬魚眼效果 function fishEyeEffect() { for(var i=0; i<nodeList.length; i++) { var node = nodeList[i]; var nodeRect = getRect(node); var thisNode = node.getElementsByTagName('span')[0]; thisNode.className = ''; thisNode.className = getScaleType(nodeRect); } } //判斷邊界回傳對應的CSS類別 function getScaleType(objRect) { var rect = objRect; var w = rect.width, //泡泡寬度 h = rect.height, //泡泡高度 rt = rect.top, //泡泡至魚眼上邊界的距離 rb = rect.bottom, //泡泡至魚眼下邊界的距離 rl = rect.left, //泡泡至魚眼左邊界的距離 rr = rect.right, //泡泡至魚眼右邊界的距離 bt = bound.top, //魚眼上邊界 bb = bound.bottom, //魚眼下邊界 bl = bound.left, //魚眼左邊界 br = bound.right; //魚眼右邊界 //各個大小的判斷式 var condition = [ {className: 'smaller', judge: (rt < bt || rl < bl || rb > bb || rr > br)}, {className: 'medium', judge: (rt < (bt+h) && (rl < (bl+w) || rr > (br-w)) || rb > (bb-h) && (rl < (bl+w) || rr > (br-w)))} ]; for(var i=0; i<condition.length; i++) { if(condition[i].judge) { return condition[i].className; } } } //取得元素與視窗邊界的相對距離 function getRect(element) { var el = element; return el.getBoundingClientRect(); }
})(window, document);
//從iTune API撈資料測試
/*var icons = [];
var terms = ['yahoo', 'facebook', 'google', 'line', 'twitter'];
for(var i=0; i<terms.length; i++) { var uri = 'https://itunes.apple.com/search?term='+terms[i]+'&country=tw&entity=software&attribute=softwareDeveloper&sort=popular&limit=100'; getAppIcons(uri);
}
var uri = 'https://itunes.apple.com/search?term='+terms[0]+'&country=tw&entity=software&attribute=softwareDeveloper&sort=popular&limit=100';
getAppIcons(uri);
function getAppIcons(apiUrl) { $.ajax({ type: 'GET', dataType: 'JSONP', url: apiUrl, success: function(data) { var res = data.results; for(var i=0; i<res.length; i++) { d.getElementsByTagName('span')[i].style.background = 'url('+res[i].artworkUrl100+') center no-repeat'; d.getElementsByTagName('span')[i].style.backgroundSize = '100% 100%'; } } });
}*/
Apple Watch Bubble-like UI - Script Codes
Apple Watch Bubble-like UI - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 3
Size 3,765 Kb
Views 28,336
Do you need developer help for Apple Watch Bubble-like UI?

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!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
Gradient Color Spin
Scifi-style Radio-based Tab
Animated Donut Chart
Random Displacement of Data Node
The Rocket
The Heart
Ramen by pure CSS
I drink and I know things
Brown by pure CSS, no image, no javascript
Fly to Future
Create amazing SEO content 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!