武功秘籍--Parallax的404页面

小潮鸡
287 阅读5分钟

最近忙于公司的业务代码，都没什么时间来写写自己三招可能必败的武功秘籍，这个偷懒的借口还行吧哈~~最近玉女心经的撰写还在酝酿中，今天就先来点不一样的，来几招打狗棒法，接棒。

            

前段日子听朋友群上摸鱼说，GitHub服务器爆炸啦由于公司用得是SVN，但是秉承吃瓜群众的心态还是去看看究竟，这一看不要紧，却被GitHub报500的动态页面吸引了，这八爪猫也太可爱了吧还有Parallax动效也太酷了吧~~我也要实现一个，先给大家看看这个可爱的八爪猫~

这个页面通过鼠标滑动背景图片，然后背景、文字、招牌和八爪猫产生相对或相反移动的Parallax效果。是不是觉得这个页面设计得很好？怎么可能只有感叹的份呢？别的小朋友有的，我们也要尽量有，别的小朋友会的，我们尽量会。但是今天我要让大家都会所以我们今天来实现一个类似于这样效果的404页面

搞一个404静态页面

也是有做过静态404页面，但是总是觉得不够精美，为什么404页面就要那么死板，我也要给自己的404页面加入parallax效果，让其看起来更精美一点。首先先找一个恰当的设计图，它最好要有点可以加parallax效果的元素。当然要克服审美和切图的小困难，但是这都让我用一瓶冰红茶解决了哈哈哈，让我的设计师来帮我把把关，最终选择了这样一张的设计图，先一段拼凑把他实现先~

给合适的页面元素加Parallax

当然页面实现了之后并不是每个元素都适合加上parallax动效，本来考虑将所有流星、星体和UFO都加上parallax效果，但是发现这样整体效果不是很好，感觉动的元素太多导致页面太过于杂乱，失去精美的感觉。作为一个有点追求的切图仔，再三对比下，只对相对突出的元素加上parallax效果，先给大家看看效果吧，在看看怎么简单实现它当然美感因人而异，看着玩玩就好啦

实现用到的方法

首先在简单的几行实现的js代码中，我们用到了这样一个方法：

window.getComputedStyle(element, [pseudoElt])

先说说这个方法吧~
这个方法简单来说就是可以读取样式css最终样式，包括了内联样式、嵌入样式和外部样式。但是它只支持读，不支持写~

再看看他的参数：

  • 第一个参数即是元素：必需，要获取样式值的元素对象；
  • 第二个参数表示制定元素计数器的伪元素（：before，：after等）非必需的，可以忽略或者给个null

可能你会觉得，呃这，document.style他不香吗？既能读取样式也能写改样式，搞那么都花样，搞这个新方法干什么？
其实事实是，document.style只能够获取通过以下方式设置的CSS属性值：

  • HTML标签的样式属性设置CSS属性值。
  • document.style.width =“ 100px”这样的类似设置CSS属性值。

此时，getComputedStyle方法的功能得以实现，它可以获取元素CSS属性的最终计算值。如果元素没有在style属性中设置宽高，也没有在样式表里面设置宽高，就可以用getComputedStyle方法来获取宽高了

最终实现

说了那么多废话，终于来到了实现的地方了，先上代码：

document.querySelector('#containerBg').addEventListener('mousemove',function (e) {  
    let horizontal = e.clientX / parseInt(getComputedStyle(document.querySelector('#containerBg')).width, 10)  
    let vertical = e.clientY / parseInt(getComputedStyle(document.querySelector('#containerBg')).height, 10)   

 document.querySelector('#containerUfo').style.transform = calculateTransform(horizontal, vertical, 20)   
 document.querySelector('#containerBall1').style.transform = calculateTransform(horizontal, vertical, 15)   
 document.querySelector('#containerBall2').style.transform = calculateTransform(horizontal, vertical, -10)   
 document.querySelector('#containerBall3').style.transform = calculateTransform(horizontal, vertical, -10)       

})

function calculateTransform(horizontal, vertical, offset) {    

     return `translate(${horizontal * offset / 0.5}px, ${vertical * offset / 0.5}px)`
}

先看看代码所用到的id元素，结合页面和命名的规范，不难看出原理：主要是通过获得鼠标在背景图上滑动时的位置，在计算位移的距离，然后再将元素顺着或者逆着鼠标的移动而移动。先在背景图上添加鼠标移动 mousemove的监听事件，然后再通过e.clientX / e.clientY 获取鼠标的位置，分别除以背景图片的宽高，得到相对的变数~~当移动到背景的中间时，就可以得到两个0.5，这个后面位移有用~

接下来就是通过移动改变各个元素之间的移动的函数，即

function calculateTransform(horizontal, vertical, offset) {
     return `translate(${horizontal * offset / 0.5}px, ${vertical * offset / 0.5}px)`
}

由函数返回的字符串，结合运用document.style.transform可以看出，通过获得鼠标的位置的相对变数乘以要相对位移的offset值，他可以是正或者是负值，取决于他是相同或者相对的位移。而0.5是表示在正中间的时候不会产生位移效果~~大概整体就是这样~希望能帮到你

说点别的

这是我第二次发文，自己每次发文主要是为了能让自己更自律地学习总结，但是没想到自己的文章还是有人点进来并看到这里，自己还是很高兴的。希望自己能够更加自律，学一些写一些有趣的东西分享给大家，谢谢你能看到这里！希望自己能尽快写出下一节武功秘籍~今天的打狗棒法就到这里了

avatar
文章
阅读
粉丝