页面滚动时 Hero Images 的缩放

页面滚动时 Hero Images 的缩放

在2016年里,hero headershero images是最常用和美观的网页设计趋势之一,而且很可能之后会流行几年。术语hero经常可以与jumbo(庞然大物)互换,指页面顶部的全宽图形或照片。在网页设计中有多种方法来使用hero image,可以是背景图像,或直接在页面中添加图片。

大多数hero images是与文章内容相关的照片或图形,但它并不意味着无趣。随着趋势的发展,更多新奇有趣的方式将被应用,甚至是有关hero headers的使用,并包括动画背景、视频和简单的滚动效果。

在个人或新闻网站的视觉效果实际上,很多都不是直接以静态照片来表达。在本教程中,你会学到一个简单但优雅的方式,其应运自适应的CSS,为hero images添加滚屏缩放的效果。

滚屏放大图片

应用视差效果,这一技巧在向下滚屏的同时放大hero image,是个有趣的互动方式并吸了引访客的注意力。在演示中,航拍照片给人一种轻轻下坠的感觉,你也可以选择一张复杂的照片,让其放大后主题更明晰。

有多种CSS方法可以实现图像的缩放,下面,我们有两个稍微不同的版本,主要差别图像在布局中的位置,以及放大时是否需要将图像放在一个特定的父元素中。

下面第一中方法使用内容图像,而不是背景填充。这具有更充分响应的优点,若希望实现更多的功能,如收藏夹或其他点击行为,它更容易实现。

为了达到最佳效果,应该使用高分辨率的图片,如果做不到,放大时可以添加额外的虚化效果,来消除明显的像素块。启用模糊,点击Codepen编辑选项,启用JS窗口里被注释掉的代码。需要在自己的项目中使用演示中的代码,可以从CodePen编辑页面中点击导出。

See the Pen Hero Zoom on Scroll by Vail (@vailjoy) on CodePen.dark

View Full Screen Demo

HTML

标记非常简单,将所需图像的<img>放在主<header>中,把<header>元素设置class="zoom",并将在jQuery代码中选择.zoom

<header class="zoom">
<img src="http://www.goodfreephotos.com/albums/iceland/other-iceland/aerial-view-of-a-river-in-iceland.jpg" alt="zoom me">
</header>

在WordPress中,语句一般如下:

<header class="zoom">
    <?php if ( has_post_thumbnail() ) : ?> 
      <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
    <?php the_post_thumbnail( 'full' ); ?> </a> <?php endif; ?>
</header>

CSS

为了控制hero image区域的高度,使用一个简单的padding填充技巧。 多数网站可以设置为55%,对于大多数4:3和16:9的图像效果很好。

.zoom{
overflow: hidden;
padding-bottom: 55%;
}

图片CSS的设置,使用position: fixed;让它在的滚屏时固定,transform: translateX(-50%);让放大效果发生。

.zoom img{
position: fixed;
top: 0%;
left: 50%;
transform: translateX(-50%);
}

更多详见 transformposition

jQuery

$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom img").css({
width: (100 + scroll/5)  + "%",
top: -(scroll/10)  + "%",
});
});

使用了scroll功能,滚屏时为.zoom img添加相应的CSS,实现了图片放大与窗口滚动同步实现。

header-zoom

另一种方案

另一种技术是使用background-size属性,将hero jmage作为一个容器的背景。如果要实现标题区域内的动态内容(例如titlespost meta),就可能需要这样做。

See the Pen Hero Zoom on Scroll Using Background Size by Vail (@vailjoy) on CodePen.dark

View Full Screen Demo

HTML

这里的主要区别是在header处移除img

<header class="zoom">	
<h1> Iceland</h1></header>

CSS

然后,在CSS中设置标题背景:

header{
  min-height: 90%;
  background-image: url(http://www.goodfreephotos.com/albums/iceland/other-iceland/aerial-view-of-a-river-in-iceland.jpg);
  background-size: 100%;
  background-position: center center;
}

background-size属性初始设置为100%。与第一种方法类似,应用jQuery,让其随着窗口滚动逐步放大。

注:有很多方式去设置标题高度,包括的JavaScript。简单起见,此处使用百分比这种基本方法。

jQuery

jQuery代码基本相同,只需要调整CSS选择器,并且将更改应用于该元素:

$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom").css({
backgroundSize: (100 + scroll/5)  + "%",
top: -(scroll/10)  + "%",
    });
});

捷径

如果不想手动实现,也可以轻松地将此效果应用于Themify WordPress主题中的任何Themify Builder行元素,方法是在行的样式选项下选择缩放滚动背景模式,详见:Learn more about the Themify Builder here.