1. 首页
  2. 前端

接上篇:前端必看的8个HTML+CSS技巧(下)

5. 图片视差效果

接上篇:前端必看的8个HTML+CSS技巧(下)

这个超级炫酷的效果在官网中非常的受欢迎,这种效果可以给用户带来视觉冲击,也给我们的网站带来了活力。普通的网页图片会跟随着网页一起滑动,但是视觉差效果图就会固定在底部,只有图片所在的窗口上的元素会移动。

仅使用CSS

对你没有看错,这个效果只需要用到CSS就能轻易的实现!我们只要使用一个CSS背景图的属性background-attachment: fixed,这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。

实现理论:

一、在含有图片的元素中加入background: url()和background-size: cover(第二个属性适用于定义图片为封面,可以让图片大小自动适应,在很大的屏幕也会显示完整的图片)

二、然后附加固定背景图的属性background-attachment: fixed

三、最后给这个元素加入一个高度height: 100%或者任意的高度height: 400px

就那么简单哦!不用怀疑,马上上代码,大家都可以自己去试试哦!

HTML

<div class="wrapper">
   <div class="parallax-img"></img>
   <p>这里填写一堆文字就可以了,尽量多一点哦</p>
</div>

CSS

.wrapper {  
  height: 100wh;
}
.parallax-img {  
  background-attachment: fixed;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-size: cover;  
  height: 100%;  
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {  
  font-size: 20px;  
  padding: 1.5rem 3rem;  
  min-height: 1000px; 
  // 当你的文字内容不够,也能撑出足够的高度来看到效果,当然如果你文字足够多,就不需要了
}

知识总结

  • background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动。
  • background-size: cover — 可以让图片大小自动适应,在很大的屏幕也会显示完整的图片。

使用CSS + JavaScript

接上篇:前端必看的8个HTML+CSS技巧(下)

有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来一个高级例子,上面的例子在滑动的时候图片是固定死的。如果我们加上JavaScript的助力,我们可以让窗口的图片缓慢的跟随这个页面滑动,使得效果更有动力和更有冲击感。

实现理论

首先讲一下排版,因为我们需要在我们滑动页面的时候使用JavaScript偏移图片,所以我们需要给图片一个CSS属性让我们可以让图片可以根据一个速度来往上或者往下移动。这个例子里面我们让所有图片包裹在一个div里面,class名为block。这个div给予相对定位属性position: relative,这个时候我们就可以在里面加入图片,然后让图片绝对定位position: absolute在这个div盒子里面。

但是图片是可能很大的,我们需要把图片不超出我们定义个盒子,所以我们的div同时也给予了overflow: hidden和一个高度height: 100%。这样图片超出div盒子就会被隐藏。

布局代码如下:

<div class="block">  
  <img    src="https://unsplash.it/1920/1920/?image=1005"    data-speed="-1"    class="img-parallax"  />  
    <h2>视差速度 -1</h2>
</div><div class="block">  
<img    src="https://unsplash.it/1920/1920/?image=1067"    data-speed="1"    class="img-parallax"  />  
  <h2>视差速度 1</h2>
</div>
html, body{  
  margin: 0;  
  padding: 0;  
  height: 100%;  
  width: 100%;  
  font-family: 'Amatic SC', cursive;
}
.block{  
  width: 100%;  
  height: 100%;  
  position: relative;  
  overflow: hidden;  
  font-size: 16px;
}
.block h2{  
  position: relative;  
  display: block;  
  text-align: center;  
  margin: 0;  
  top: 50%;  
  transform: translateY(-50%);  
  font-size: 10vw;  
  color: white;  
  font-weight: 400;
}
.img-parallax {  
  width: 100vmax;  
  z-index: -1;  
  position: absolute;  
  top: 0;  
  left: 50%;  
  transform: translate(-50%,0);  
  pointer-events: none
}

实现这个布局,在你滑动的时候,图片是不会移动的。因为最后一步就是加入JavaScript的辅助,让图片活起来。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
  </script><script>
// 循环获取每一个图片元素
$(".img-parallax").each(function () {  
  var img = $(this);  
  var imgParent = $(this).parent();  
  function parallaxImg() {    
    var speed = img.data("speed"); /
    / 获取每张图片设置了的偏移速度    var imgY = imgParent.offset().top; // 获取图片盒子所在的Y位置    var winY = $(this).scrollTop(); // 获取当前滑动到的位置    var winH = $(this).height(); // 获取浏览器窗口高度    var parentH = imgParent.innerHeight(); // 获取图片盒子的内高度    // 浏览器窗口底部的所在位置    var winBottom = winY + winH;     // 当前图片是否进入浏览器窗口    if (winBottom > imgY && winY < imgY + parentH) {      // 运算图片需要开始移动的位置      var imgBottom = (winBottom - imgY) * speed;      // 运算出图片需要停止移动的位置      var imgTop = winH + parentH;      // 获取从开始移动到结束移动的%(根据开始与结束像素 + 移动速度)      var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50);    }    img.css({      top: imgPercent + "%",      transform: "translate(-50%, -" + imgPercent + "%)",    });  }  $(document).on({    scroll: function () {      parallaxImg();    },    ready: function () {      parallaxImg();    },  });});</script>

知识总结

  • position: relative — 相对定位。
  • position: absolute — 绝对定位。
  • overflow: hidden — 如果需要,内容将被剪裁以适合填充框。不提供滚动条。
接上篇:前端必看的8个HTML+CSS技巧(下)

6. 裁剪图像的动画

接上篇:前端必看的8个HTML+CSS技巧(下)

在有CSS3之前裁剪图片实现也是颇有难度的。现在我们有了两个非常方便简单的CSS3属性可以实现裁剪,那就是object-fit和object-position, 这两个属性可以让我们改变图片的大小,但是不影响图片的长宽比。

当然我们可以使用图片处理工具或者使用JavaScript等插件来实现图片裁剪功能。但是因为有了CSS3的属性,我们不只可以裁剪,我们还可以用裁剪的属性来做图片的动态效果。

为了让我们的例子更加简单,我们这里使用了<input type=”checkbox”>复选框元素,这样我们就可以使用:checked的伪类来触发启动效果。所以在例子里面我们完全不需要JavaScript的协助。

实现原理:

一、首先给予图片一个宽高height: 1080px,width: 1920px。

二、然后用CSS选择器,锁定当input被选中后img标签的样式变化。当被选中时,给图片设定一个新的宽高,这里我们给宽高各自500像素:width: 500px,height: 500px。

三、然后我们加上了过渡效果和时间让图片改变宽高时有动画过渡效果:transition: width 2s, height 4s;。

四、最后加上object-fit: cover和object-position: left-top这两个属性来保持图片的宽高比例,这样就大功告成了!

我们来看看完成的代码:

勾选裁剪图片 
  <input type="checkbox" />
    <br />
    <img  src="https://img-blog.csdnimg.cn/2020032122230564.png"  alt="Random"/>
input {  
  transform: scale(1.5); 
  /* 只是用来放大复选框大小 */  
  margin: 10px 5px;  
  color: #fff;
}
img {  
  width: 1920px;  
  height: 1080px;  
  transition: 0s;
}
/* css选择器锁定复选框被选中时的状态 */
input:checked + br + img {  
  width: 500px;  
  height: 500px;  
  object-fit: cover;  
  object-position: left-top;  
  transition: width 2s, 
  height 4s;
}

知识总结

object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-position — 用来切换被替换元素的内容对象在元素框内的对齐方式。

transition — 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

接上篇:前端必看的8个HTML+CSS技巧(下)

7. 混合模式(Blend)

接上篇:前端必看的8个HTML+CSS技巧(下)

如果有使用过Photoshop的同学对blend混合模式应该是非常熟悉了,我们都知道混合模式是非常强大,也是p图时非常常用的一个功能。但是你们有没有想象过可以在浏览器的CSS中直接使用呢?对我们不需要设计师给我们做图,我们前端也可以实现混合模式了。

在CSS中我们不只可以对background背景加入混合模式,我们可以对任何一个元素的自带背景加入混合模式,让你可以做出很多之前没有想过的效果和排版。

往一个元素加入混合模式,我们只需要使用到一个CSS属性mix-blend-mode即可。

简单实现原理:

首先我们只需要加一个h1标题标签

<h1>混合模式:颜色减淡</h1>

然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge,但是要注意的是我们需要给body和html加入背景颜色background: white,要不你会发现这个效果会无效。因为h1我们没有给颜色,会自动往上级继承,并且混合模式是针对背景颜色的过滤,所以body和html需要有背景颜色才行。

h1 {   
  mix-blend-mode: color-dodge;   
  font-family: yahei;   
  font-size: 5rem;   
  text-align: center;   
  margin: 0;    
  padding: 20vh 200px;   
  color: #D1956C; 
} 
html, body {   
  margin: 0;   
  background-color: white; 
} 
body {   
  background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);   
  background-repeat: no-repeat;   
  background-size: cover;   
  min-height: 100vh;   
  overflow: hidden; 
}

换换背景图和h1标签的字体颜色就可以弄出各种不同的特效了。

接上篇:前端必看的8个HTML+CSS技巧(下)

知识总结

  • mix-blend-mode — CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
接上篇:前端必看的8个HTML+CSS技巧(下)

8. 瀑布流布局

接上篇:前端必看的8个HTML+CSS技巧(下)

CSS Grid和Flexbox让我们可以更简便,更容易和更快的实现各式各样的响应布局,并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。

虽然这些新出的布局方式可以让我们解决很多以前的布局难题,但是像瀑布流布局这种,就无法用它们简单来实现了。因为瀑布流一般来说都是宽度一致,但是高度是根据图片自适应的。并且图片的位置也是根据在上方图片的位置而定的。

其实最好实现瀑布流布局的办法就是用CSS的列属性套件,这套属性大多数都是用于排版杂志中的文本列。但是用于布局瀑布流也是特别实用哦。因为以前需要实现瀑布流,就必须有JavaScript的辅助来计算图片高度然后决定每张图片的定位和位置,所以现在有了列属性就可以使用纯CSS实现了。

实现原理:

实现这个布局,首选我们需要把所有的内容先包裹在一个div元素里面,然后给这个元素column-width和column-gap属性。

然后,为了防止任何元素被分割到两个列之间,将column-break-inside: avoid添加到各个元素中。

神奇的效果就完美实现了,零JavaScript。

我们来看看代码:

<div class="columns">  
  <figure>    
  	<img src="https://source.unsplash.com/random?city" alt="" />  
    </figure>  
	<figure>    
    <img src="https://source.unsplash.com/random?night" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?developer" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?building" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?water" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?coding" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?stars" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?forest" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?girls" alt="" />  
  </figure>  
  <figure>    
    <img src="https://source.unsplash.com/random?working" alt="" />  
  </figure>
</div>
.columns {  
  column-width: 320px;  
  column-gap: 15px;  
  width: 90%;  
  max-width: 1100px;  
  margin: 50px auto;
}
.columns figure {  
  display: inline-block;  
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
  column-break-inside: avoid;  
  border-radius: 8px;
}
.columns figure img {  
  width: 100%;  
  height: auto;  
  margin-bottom: 15px;  
  border-radius: 8px;
}

知识总结

column-width — CSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。

column-width — 该 CSS 属性用来设置元素列之间的间隔 (gutter) 大小。

column-break-inside — 设置或检索对象内部是否断。

接上篇:前端必看的8个HTML+CSS技巧(下)

总结

我希望这8个前端小技巧和特效对大家有帮助,或多或少有吸收一点新的前端知识。这篇文章提到的内容,其实很多都是值得深挖和学习的。有一些例子我做的比较简单,但是其实是有无限的可能性。喜欢前端的童鞋们,让我们继续在前端领域中一起深挖,让我们的热爱无限的燃烧起来吧!

在最后我想给大家讲一下我对前端的热爱和态度。

回想前端这几年,发展真的是突飞猛进,从前端排版,HTML5+CSS3做H5页面,到前端组件化,各种UI框架满天飞。

一开始我随着热潮用起了UI框架,起初觉得特别方便,来一个新的项目就直接上一个UI框架,研发速度也非常快。但是久而久之就觉得前端开发变成了处理数据,对接接口,实现交互。

某天在阅览国外的一些前端设计和框架的时候,我突然发现国内多数的前端开发者都不再怎么使用CSS3做出一些很好玩的布局和特效了。现在市面上的系统和页面都是千篇一律,普遍都是用一些知名的UI框架搭建系统和APP,基本自己动手去排版已经少之又少。前端已不再是以前的前端,缺少了灵魂。

但是我们回想一下,我们刚刚开始学习前端的时候,让我们最有成就感,觉得前端特别有意思的那种感觉。就是那种让我们觉得神乎奇迹,不可思议的布局,特效和交互。那种感觉自己成功实现了很优美,很炫酷的页面和特效的感觉,让我们越做越来劲,越做越是兴奋。

但是在某些公司,研发部都是要求快速开发,UI设计部门也是受到时间的控制和限制,所以逐步走进了UI框架的限制之中。都是围绕这一些UI框架来设计和开发系统和应用。

作为一名热爱前端的开发者,我还是坚持在绝大多数的项目中,自己排版和实现页面交互特效。然后使用UI框架作为辅助,主要是用来减轻一些小组件和常用组建的快速实现。(可以说我是比较追求完美和外貌协会的程序员

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/196201.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code