首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何用原生 JS 复刻 Bilibili 首页头图的视差交互效果

    ,我也沉浸在这片“海洋”中疯狂摸鱼:尝试只使用原生 JS 来复刻它,最终实现了非常还原的效果:图片可点击图片进入 码上掘金 中体验完整效果。...我们打开控制台观察B站首页头图对应的 DOM 结构,会看到处理的对应变换包括了:平移(translate)、旋转(rotate)、缩放(scale)等,此外还有透明度可能也会随之改变。...matrix(2,0,0,1.5,0,0);即等价于:transform: scale(2, 1.5)学会了如上这一基础变换,后面我们实现等比缩放的操作就非常简单了,往这两个系数乘上一个缩放倍数(假设为...这种方式虽然没什么问题,但需要额外利用 CSS 才能实现,能不能只用 JS 来做呢,我们先分析下 transition 中两个主要的参数:持续时间动画函数其实只要搞懂这两个参数,我们就可以用 JS 来实现...加餐本来到这里就该结束了,但正好在文章写完那天,我登录B站时发现首页头图更新了。。那敢情好啊,我就把新出的效果也复刻一下吧!不过上面的代码是一行也不用改动的,只需要换一套数据就行了。

    36760

    Django 博客首页视图

    比如你访问了我的博客主页 http://zmrenwu.com/,服务器接收到这个请求后就知道用户访问的是首页首页显示的是全部文章列表,于是它从数据库里把文章数据取出来,生成一个写着这些数据的 HTML...views.py from django.http import HttpResponse def index(request): return HttpResponse("欢迎访问我的博客首页...浏览器接收到这个响应后就会在页面上显示出我们传递的内容 :欢迎访问我的博客首页!...欢迎访问我的博客首页! 使用 Django 模板系统 这基本上就上 Django 的开发流程了,写好处理 HTTP 请求和返回 HTTP 响应的视图函数,然后把视图函数绑定到相应的 URL 上。...', 'welcome': '欢迎访问我的博客首页' }) 这里我们不再是直接把字符串传给 HttpResponse 了

    1.2K50
    领券