随笔分类 -  (新) CSS & JS Effect

摘要:前言 这篇记入一些小的 CSS & JS Effect。 Transfer div keydown to input 一个 filterable selection list。 user 点击 input > 输入 text > 接着选择 item。 此时 input 就 blur 了。 如果此时 阅读全文
posted @ 2024-12-08 19:28 兴杰 阅读(54) 评论(0) 推荐(0) 编辑
摘要:需求 这个是 Google Ads 里的 table。 那个 horizontal scrollbar 可以 sticky bottom。 我们知道 scrollbar 是游览器原生的,我们能做的 styling 少之又少,挺多只能调 size, color 而已。要让它 sticky bottom 阅读全文
posted @ 2024-05-06 15:54 兴杰 阅读(74) 评论(0) 推荐(0) 编辑
摘要:前言 在 用 JavaScript 实现 position sticky 文章中,我提到了用 wheel 来模拟 scroll 效果。 这篇来说说具体怎么实现,挺简单的哦。 Preparation table.html <div class="container"> <table> <thead> 阅读全文
posted @ 2024-05-04 11:42 兴杰 阅读(110) 评论(0) 推荐(0) 编辑
摘要:前言 我正在写 Angular CDK Scrolling 教程,它里面有一个 Virtual Scrolling 功能。借此机会,我想顺便写一篇纯 Sass & TS 的版本作为学习。 Virtual Scroll 长这样 表面上看,它只是一个普普通通的 item list。但仔细观察,你会发现它 阅读全文
posted @ 2024-03-02 21:31 兴杰 阅读(90) 评论(0) 推荐(0) 编辑
摘要:需求 我在做一个体验 当用户 submit enquiry 后会 window.open 开启 WhatsApp。而当用户关闭 WhatsApp 回来网站后,会 show 一个 feedback message。 实现思路 关键就在如何感知到,用户从 WhatsApp 切换回到了网站。 参考: De 阅读全文
posted @ 2023-10-05 00:30 兴杰 阅读(22) 评论(0) 推荐(0) 编辑
摘要:效果 难点 难题只有一个, 那就是如何把 blue tick image 定位当 avatar 的右下角. HTML <div class="avatar-wrapper"> <img class="avatar" src="../images/avatar.jpg" width="1" heigh 阅读全文
posted @ 2023-03-04 12:32 兴杰 阅读(34) 评论(0) 推荐(0) 编辑
摘要:参考 YouTube – Custom select menu - CSS only 原装 select 的缺点 这是一个原装 select design 它最大的问题是没有 spacing. border 和 字需要有间距. 这样才能呼吸. 添加 padding 好看了一点点, 但是右边的小箭头依 阅读全文
posted @ 2023-02-13 15:45 兴杰 阅读(21) 评论(0) 推荐(0) 编辑
摘要:前言 画三角形有什么用? 可以做这样的 Design 参考 5 Ways To Create A Triangle With CSS Border Triangle 用 border 做 三角形应该是最远古的招数了. HTML <div class="box"></div> CSS .box { b 阅读全文
posted @ 2023-01-31 22:40 兴杰 阅读(73) 评论(0) 推荐(0) 编辑
摘要:介绍 Section Waves 长这样 左边是没有 waves, 右边是加了 waves. 它的作用就是点缀. 让画面有一点 "Design" 的感觉. 参考 YouTube – CSS Wavy Background Tutorial | Section Dividers | FREE 原理 它 阅读全文
posted @ 2023-01-31 12:10 兴杰 阅读(57) 评论(2) 推荐(0) 编辑
摘要:介绍 Tooltip 长这样 它用 popup 的方式来详细描述一个主体. 比如某个 icon 代表着什么. 参考 YouTube – How To Make Tooltips With Only CSS 思路和难点 1. hover 的时候出现 我的例子中它 hidden 使用 scale 0 来 阅读全文
posted @ 2022-12-26 12:56 兴杰 阅读(85) 评论(0) 推荐(0) 编辑
摘要:前言 这是一个很普遍的体验, 而且实现起来也很简单哦 参考 YouTube – How to Auto Resize Textarea using HTML CSS & JavaScript 效果 我故意加了 border 和 padding 来解释. Step by Step 实现 HTML <t 阅读全文
posted @ 2022-11-05 14:10 兴杰 阅读(100) 评论(0) 推荐(0) 编辑
摘要:介绍 Breadcrumb 长这样 主要就是让用户清楚自己在哪个 page, 然后可以轻松返回上一页. Step by Step HTML <div class="container"> <ol> <li><a href="/">Home</a></li> <li><a href="/tourist 阅读全文
posted @ 2022-06-25 14:06 兴杰 阅读(103) 评论(0) 推荐(0) 编辑
摘要:原生 Radio 的 Limitation <input type="radio" style="width: 25px; height: 25px; cursor: pointer" /> 效果 原生的 radio 其实长的不丑, 但它不能调颜色, radio 无法配合网站的 primary, s 阅读全文
posted @ 2022-06-21 01:00 兴杰 阅读(53) 评论(0) 推荐(0) 编辑
摘要:效果 当 scroll 到那些号码的时候, 号码从 0 开始跳动, 一直到最终的值. 实现思路 1. 一开始把号码 set to 0 2. 使用 IntersectionObserver 监听号码出现 3. 出现后开始累加, 一直到最终的 value. (注意, 虽然每个号码是不同的, 但是会在同一 阅读全文
posted @ 2022-06-11 17:43 兴杰 阅读(52) 评论(0) 推荐(0) 编辑
摘要:效果 原理 一眼看上去, background 有渐变颜色 linear-gradient. 当 hover in 的时候有一束白光, 从右边移动到左边. hover out 则是反过来. 它其实是通过 background-size, background-position 来实现的. 如果不熟悉 阅读全文
posted @ 2022-05-29 07:04 兴杰 阅读(56) 评论(0) 推荐(0) 编辑
摘要:效果 参考 Youtube – Create a pulsing animation with CSS 重点 在背后做一个一样大的 div border 然后 animation scale up. HTML <button> <i class="fa-solid fa-play"></i> </b 阅读全文
posted @ 2022-04-17 22:28 兴杰 阅读(209) 评论(0) 推荐(0) 编辑
摘要:效果 参考: Youtube – Create a Simple Popup Modal Youtube – Create a Modal (Popup) with HTML/CSS and JavaScript HTML – Native Dialog Modal Boostrap Modal A 阅读全文
posted @ 2022-04-17 19:33 兴杰 阅读(58) 评论(0) 推荐(0) 编辑
摘要:效果 重点 1. 一张图片, 一个 content 定位居中作为一个 slide 2. slider 用了 JavaScript Library – Swiper 3. 当 slide active 的时候做一个 animation 把 content 划出来. Swiper & Layout HT 阅读全文
posted @ 2022-04-17 13:56 兴杰 阅读(103) 评论(0) 推荐(0) 编辑
摘要:效果 show more 是很常被使用的效果, 因为空间总是不够的丫. 比起 scroll, show more 的体验通常会好一些, 尤其在手机, 它有更好的引导. 实现思路 1. 卡片需要一个 max-height 限制内容, 同时 overflow: hidden 2. 做一个 overlay 阅读全文
posted @ 2022-04-15 17:47 兴杰 阅读(159) 评论(0) 推荐(0) 编辑
摘要:效果 一个按钮, 点击以后中间出现 loading, 然后旋转. 思路 1. 监听点击, hide text, show loading 2. loading 定位中心 3. loading 是通过 border + radius 做出来的, 然后 animation 让它无限 rotate 难点 阅读全文
posted @ 2022-04-05 19:47 兴杰 阅读(166) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示