GSAP ScrollSmoother怎么获取滚动的像素和判断滚动的方向

由于ScrollSmoother可能会对滚动事件进行代理或修改，因此直接使用javascript原生的滚动事件监听可能不可靠，但是ScrollSmoother插件本身也没有提供直接获取滚动方向的方法，所以需要自行编写获取代码。通常判断滚动方向的方法是通过比较当前滚动位置和上一次的位置，如果当前值大于上一次则是向下滚动，反之则是向上。但ScrollSmoother可能会对原生的滚动行为进行封装，所以使用ScrollSmoother或Scr...
Web前端开发 / / 312次阅读

GSAP ScrollTrigger对多个相同class类名的元素独立应用滚动触发的动画效果

页面存在多个相同的模块，需要在滚动到各个模块的位置时独立触发该模块的动画效果，实现思路是使用 document.querySelectorAll 获取所有元素获取并通过 forEach 循环遍历元素，然后为每个元素单独创建动画和滚动触发器。示例：为所有 .box .name 元素添加「滚动到元素时淡入」的效果 Html 代码：<div class="box"> <div&nb...
Web前端开发 / / 236次阅读

CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，类似于photoshop中的混合模式。应用场景有：图像叠加效果（如multiply正片叠底，融合.jpg图片背景颜色）、文字与背景融合（如 difference 实现高对比文字）、动态视觉设计（如 overlay 创建光效）。 样式语法： mix-blend-mod:  <blend-mode...
Web前端开发 / / 276次阅读
CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode

支持html网页多语言全自动翻译转换的js插件

translate.js是一款通过AI实现i18n（国际化Internationalization），使用极其简单的网页语言自动翻译切换插件，支持中文简繁体转换、其它语言自动翻译，无需改动页面、无语言配置文件、无API Key，插件直接扫描HTML DOM并自动识别翻译显示，采用MIT开源协议，拿来即可永久免费使用。 插件扩展极其灵活、翻译能力快速、全球网络节点、源站翻译及域名分发、微调指令丰富、支持VUE项目。...
Web前端开发 / / 1027次阅读
支持html网页多语言全自动翻译转换的js插件

网页常用侧边栏悬浮客服小工具代码

随着网页滚动始终固定在侧边的客服小工具，用于显示在线咨询、联系电话、微信公众号、返回顶部等信息。HTML+CSS结合jQuery代码，可以实现鼠标悬浮或点击显示电话号码、二维码图片等。 代码效果： HTML代码： <div id="widget"> <ul> <li> <a class="p...
Web前端开发 / / 339次阅读
网页常用侧边栏悬浮客服小工具代码

实现响应式web网页ctrl+鼠标滚轮等比缩放的js代码

使用非固定像素单位开发的响应式网页，如rem、vw等，使用ctrl+鼠标滚轮缩放时网页不会缩小，因为rem、vw大多会浏览器窗口宽度分辨率绑定，而ctrl+鼠标滚轮缩小，分辨率反应变化，所以网页不会等比缩小。但可以通过js+缩放比率来实现ctrl+鼠标滚轮等比缩小的效果，适用于使用了vw单位或者rem单位。 代码： (function (doc, win) { var docEl = doc.docum...
Web前端开发 / / 565次阅读

GSAP动画库实现无缝无限滚动跑马灯效果

网页图片跑马灯滚动效果的需求：均速无限滚动，无缝衔接滚动，鼠标悬浮暂停滚动，鼠标移动恢复滚动，可以向左或向右滚动。实现原理，利用gsap参数x和repeat。效果如下：HTML代码：<div class="gallery"> <ul id="marquee"> <li> <a href=""...
Web前端开发 / / 623次阅读
GSAP动画库实现无缝无限滚动跑马灯效果

GSAP参数的箭头函数的运用方法和示例

(参数) => { 函数体 }是ES6中引入的特性，叫箭头函数，一种简洁的函数定义方式，在GSAP中利用箭头函数，可以实现更多变化的动画。 箭头函数有两种基本语法，分别是 (参数) => { 函数体 } (参数) => 表达式 示例： //一般函数 function add(a, b){ return a + b; } //箭头函数 const add = (a,...
Web前端开发 / / 380次阅读

通过execCommand命令实现一键复制文本的javascript代码

网页上实现一键复制的功能可以使用clipboardjs插件，也可以使用execCommand命令，但兼容性没有前者好。实现思路是创建一个表单文本输入框元素如input、textarea，然后使用select()方法选择文本，再使用execCommand命令复制文本到剪切板。 为了便于重复调用，写成一个函数 function tddx_copyText(ctext) { var copyText = do...
Web前端开发 / / 589次阅读

canvas实现点击指定切换元素的圆形弧线进度条动画效果

这是一个使用画布canvas做的通过点击元素实现弧线运动到指定位置的动画效果。实现原理和前面分享的《Canvas百分比动画进度条》教程一样，区别是增加了一个点击事件来传递参数使弧线动画运动到指定位置。思路很简单，代码也很简单。 HTML代码： <div class="canvas"> <canvas id="circle" width="644" height="640...
Web前端开发 / / 730次阅读
canvas实现点击指定切换元素的圆形弧线进度条动画效果

javascript封装$_GET函数来获取url的参数值

js获取通过window.location获取当前网址的参数（参考《javascript获取当前页面url网址参数信息代码》），如果需要频繁获取或者获取的参数较多，显得有点不方便。写成函数的方式，像php或其它代码那样直接使用$_GET['id']的方式获取参数值会更好。 var $_GET = (function(){ var url = window.document.location.href.toStrin...
Web前端开发 / / 728次阅读