web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
滚动
HTML5 SVG带视觉差效果的响应式不规则分段布局
分类:
滚动
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 在这个布局中,每一个div.section是一个段落,从第二个段落开始,使用SVG的clipPath元素来制作不规则图形剪裁路径。并使用image元素来作为背景图片,在图片上应用clipPath剪裁路径。 ```html
Page 1
Page 2
... ``` ##### CSS样式 这个布局的CSS样式非常简单。这里主要是为第一个段落设置样式。同时也为SVG元素设置了一些样式: ```html .section { height: 100%; position: relative; padding: 20vh 10rem 0; } .section__bg { position: absolute; top: 0; left: 0; width: 100%; height: 150%; background-size: cover; will-change: transform; } .section__svg { position: absolute; top: -20rem; left: 0; width: 100%; height: calc(100% + 20rem); } .section__svg image { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .section__heading { position: relative; font-size: 5rem; font-family: "Open Sans", Helvetica, Arial, sans-serif; color: #fff; text-transform: uppercase; } .section.section-1 .section__bg { will-change: transform; -webkit-transform: translate3d(0, -16.66667%, 0); transform: translate3d(0, -16.66667%, 0); background-image: url(2.jpg); } ``` ##### JAVASCRIPT 页面滚动时的视觉差效果是在jQuery代码中完成的。jQuery代码中为窗口绑定滚动事件,然后使用滚动的百分比来作为参数设置背景的transform:translate3d属性,以及SVG图片的Y轴坐标。 ```html $(window).on('scroll', function () { var st = $(window).scrollTop(); $sections.each(function () { var $this = $(this), $bg = $(this).find('.section__bg'), $svgImg = $(this).find('.section__svg image'), offsetTop = $this.data('offset'), height = $this.data('height'), ofTop = offsetTop - height, percent = 0; percent = (st - offsetTop + winH) / height * 100; if (st < offsetTop - winH) percent = 0; if (st > offsetTop + height) percent = 200; $bg.css('transform', 'translate3d(0,' + percent / -6 + '%,0)'); $svgImg.attr('y', -35 - percent / 7 + '%'); }); }); $(window).trigger('scroll'); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告