创建交互式视差图像

IT资讯 2018-08-03 95 次浏览 0 条评论

通过鼠标移动控制视差效果,为您的网站提供深度印象。

视差滚动不再是过去保证的注意力吸引力,但还有其他方法可以使用视差技术吸引访问者并增强用户体验。

看看由BMO设计的Fisk先生的网站,你会发现一种不同的视差:它的颜色鲜艳的主图像在3D中移动,以响应你的鼠标移动。

超快速CSS的5个技巧
这是一个令人印象深刻的效果,并不太难实现;只需按照以下步骤操作,即可为您的网站带来引人注目的深度感。

01.启动HTML

第一步是定义HTML文档,该文档由用于存储头部和主体部分的HTML容器组成。虽然head部分主要负责加载外部CSS和JavaScript资源,但body部分将存储要在步骤02中创建的内容元素。

<!DOCTYPE html>
<HTML>
<HEAD>
<title>鼠标滚动</ title>
<link rel =“stylesheet”type =“text / css”href =“styles.css”/>
<script src =“code.js”> </ script>
</ HEAD>
<BODY>
***第2步在这里
</ BODY>
</ HTML>
02.内容要素

该技术将允许使用data-parallax属性的任何内容容器显示效果。每个第一级子元素将与视差呈现一起显示。此示例为视差设置三个子图层,但如果需要,可以添加更多图层。您还可以向这些图层添加内容,例如文本或图像;具有透明度的PNG或SVG效果最佳。

<article data-parallax>
<DIV> </ DIV>
<DIV> </ DIV>
<DIV> </ DIV>
</文章>
03.视差容器风格

创建一个名为“styles.css”的新文件。此文件中的第一组规则设置视差容器的默认大小及其位置模式。使用相对定位非常重要,这样子元素就可以放置在容器所在的任何位置。宽度和高度设置为覆盖整个屏幕,以实现最大的交互性。

[数据视差] {
位置:相对;
宽度:100vw;
身高:100vh;
}
04.视差儿童

数据视差容器内的每个第一级元件的尺寸和位置设置成集中显示。与父母相对定位一起,百分比被用作测量单元,允许将尺寸和位置相对于视差容器放置。对于此示例,透明的红色背景用于演示效果 - 您可以使用@background:url(“此处的图像”)将其替换为您选择的PNG或SVG图像。

[data-parallax]> * {
位置:绝对;
宽度:50%;
身高:50%;
左:25%;
最高:25%;
边框:1px solid#000;
背景:rgba(255,0,0,.25)
}
05.启动JavaScript

创建一个名为“code.js”的新文件。 JavaScript将用于控制对用户鼠标交互的响应。我们不希望JavaScript在页面完全加载之前运行任何JavaScript代码,因此步骤06和07的代码放置由load事件触发的函数,该函数在窗口完成加载时激活。

window.addEventListener(“load”,function(){
***第6步在这里
});
06.节点搜索

在页面准备好之后立即执行的第一个JavaScript活动是查找所有视差层。首先,找到视差容器,然后是他们的孩子。每个子项都在“data-index”属性下应用了索引号。

ar nodes = document.querySelectorAll(“[data-parallax]”);
for(var i = 0; i <nodes.length; i ++){
var children = nodes [i] .children;
for(var n = 0; n <children.length; n ++){
children [n] .setAttribute(“data-index”,n + 2);
}
*** STEP 7在这里
}
07.视差听众

最后一步是为视差容器上发生的任何鼠标移动应用事件监听器。任何这样的动作触发特征以基于在步骤06中定义的鼠标位置和数据索引属性来计算视差层的新位置 - 导致每个层以不同的速度更新。每个计算的结果都通过style属性应用于图层。

nodes [i] .addEventListener(“mousemove”,function(e){
var elms = this.children;
for(var c = 0; c <elms.length; c ++){
var divisor = parseInt(elms [c] .getAttribute(“data-index”));
var startX = this.offsetWidth / 4;
var startY = this.offsetHeight / 8;
elms [c] .style.left = startX - (((e.screenX / divisor)-e.clientX)/ 3)+“px”;
elms [c] .style.top = startY - (((e.screenY / divisor)-e.clientY)/ 3)+“px”;
}
});

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论