header_v1.7.40

web前端经典教程之品牌墙特效

80天前发布

原创文章 / 多领域 / 教程
鬼谷魂 原创,如需商业用途或转载请与鬼谷魂联系,谢谢配合。

大型互联网商城的品牌墙技术……

      品牌墙,以其不循规蹈矩、不拘一格的布局,不论是线上网页还是线下印刷,都有着非常广泛的运用。线下常被传统企业用于制作自己的文化墙,线上常被互联网企业用于展示自己的产品或业务,个人常用他来展示自己的技能和服务。品牌墙的设计和动画的风格也大都不一,有的是旋转了45度的正方形,有的是旋转了30度的六边形。交互动画也是多种多样的,有的是图片显示切换,有的是图片翻转替换,高级点的重构拿到品牌墙设计,切图时往往不会一刀切,而是一个个切下来,并且自主加入一些动画特效以形成交互。


《单行平铺翻转版》

1. 由于录制的gif动画有失帧的缘故,看不到完整的翻转过程,不过在网页中效果是很好的。这种翻转显得很立体,不同于单张图片的翻转,本次案例的背面跟正面不是同一张图片,这也正是实现的一个难点,但是掌握了的话,你就可以融入更多的营销内容。在我的文件里,也准备了背面是图片本身的网页文件,以供对比。



2. 除了背景之外,就用到了下面这一张png图片了。切图并不是把设计稿都切碎,该整合的要整合,这样可以减少http请求数量,不过就是这张整合了的图片,体积稍微要大一点。



3. 切图的方式决定了还原设计稿时需要使用背景定位的方式,通过下面7组背景位置数据,就可以把品牌盒子贴上相应的图片了。两个数值分别代表X轴和Y轴,第一个数值表示背景图片在X轴方向的位置,负数表示背景图片往左走;第二个数值表示背景图片在Y轴,负数表示往上走。



《多行平铺翻转版》

1. 该案例效果的背面也是另外一张图,但是实现方式不是用前位的css属性,而是非常的巧妙用z-index图层优先级,实现了类似的效果。对于这种多行的品牌墙效果,怎么轻松实现格子间距一致是难点,相比下方视频里讲的那种给一个个品牌定位的方式,这种方式要轻松好多,京东网页源文件是一个个位置写出来的,在我文件里可以看下纯定位的版本。



2. 除此之外,其中的一个细节也很重要,我们要实现的是鼠标指针在各个品牌图片上的呈手指形状,也就是说点击跳转的a链接区域,而这个正方形盒子的其他四个角落指针则呈箭头形状,这样的好处就是盒子相交部分的链接不会冲突。



3. 这次用的方法跟下面视频里讲的不一样,代码结构有所变化,这种方式是把整排图片定位,而每排中的每个只要设置一定的边距,正常居中排列就好,也就省却了很多计算或测量的麻烦了。



《多行定位切换版》

1. 这种版式上跟上面的那种差别不大,就是少了点空白区域的装饰元素而已,主要是动画效果不一样。这里是滑过后当前图片消失,另外一张图片出现,效果虽然简单,但是也能让网页具有交互感,尤其是应用在那种简约的设计上,瞬间让网页出彩。



2.  部分素材如下,基本上品牌的一张白色对应着一张紫色的图片,然后我为了能够更加精准的还原设计稿,会切出一张完整的设计作为背景参考。很明显,经验之谈呀!


3. 品牌盒子的html结构如下所示。其实当时从京东那结构和层次较多的源文件里简化出原始的教程后,发现有的还不是特别适合设计师理解,比方说上面的这个hover效果还用到了js知识,并且连each遍历都用到了,这样会增加认知难度的。所以我用基本的css实现等效动画就好,而js和遍历就留待我以后讲功能更多的应用。


下面的这个跟第二个案例差不多,也发出来给大家看下,电商网站的网页专题很多时候都是换下配色,有些结构还是会重复利用的,一方面是为了减少开发成本,二来是因为经典嘛!



下面这个设计的外观跟第三个案例差不多,而且你要是会了第二个案例的布局方式,布局下面这个结构和动画更简单。



上面两个就不做视频教程了,算是给大家的一点设计参考。有的甚至还跟选项卡效果结合在一起,大牌的感觉一下子就粗来了!有的小姐姐给自己制作在线简历或者个人网站的时候,就非常恰当的用到了品牌墙结构,真的是非常的耐司和beautiful啊!但是如果能够有点交互就更灵动了。比方说下面这个设计,按照下面视频讲的那样,事先给某些区域加几个透明度为20%的白色块,滑过时消失就更好看,交替滑过这些区域时会特别带感。



附上高清实操视频,全屏观看效果更好,虽然目前关注到我课程视频的人还比较少,但是我还是会在站酷持续推出系列课程,就好像渔夫不知道海里哪里有鱼,也依然要去海一样。我也非常坚信我的视频教程非常具有学习的价值,所选的教学内容跟设计是贴合非常近的,而我在梳理课程时讲的也更加全面,一个知识点会有好几个相关的教程,每个教程之中还会有另外的版本和思路。把时间花在看我的教程上,会学到不少设计师所欠缺的综合技能的,而一个人要想在职场中长期受到器重,有一技之长之外的相关技能才更保险。



如果大家能够系统的学习上面所有的课程,相信对品牌墙的设计和动画应该有所掌握了,在以后应对这种设计的开发时,也会更加游刃有余,以后如果打造个人品牌或者个人网站,也可以把这样的效果来展示自己的技能和作品上哦

0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功