杭州网站制作：如何创建背景固定效果_极简慕枫

时间：2019-08-16

编辑:网站制作公司

5424

作为网站不可分割的一部分，具有固定位置的背景越来越具有创新性，它可以创造一种视觉错觉，即它会改变图像而不会注意到它具有固定的位置，因为它提供了一个整洁的过渡效果。页面的下一部分。

这是在它变得流行的早期视差日。图像和文本向上移动，而固定的背景卡在后面，为您的网站访问者创建一个宏伟的用户体验。

杭州网站制作在今天的教程中，我们将创建一个后台固定效果（CSS和jQuery），在滚动更改Macbook计算机的屏幕时更改元素。

请注意，这仅适用于较大的屏幕，我们需要在较小的屏幕上设置默认布局。让我们开始吧。

Markup入门

我们的HTML结构很简单。我们将首先设置标题部分作为主幻灯片，然后是一系列部分。每个部分都有一个背景固定类以及包含图像集的img-（nth）。我们还将为导航设置节号id。我设置了四个部分和一个标题。

<header id="section1">
    <h1 class="animate fx">Background Fixed Effect</h1>
</header>
    <section class="background-fixed img-1" id="section2">
    </section>
    <section class="background-fixed img-2" id="section3">
    </section>
    <section class="background-fixed img-3" id="section4">
    </section>
    <section class="background-fixed img-4" id="section5">
    </section>

接下来，我们将设置主内容div并在其中放置一个图像以及h3和p标签内容。

图像将有一个类隐藏，因为我们需要首先隐藏它，并将它显示在较小的设备上。（我们也不要忘记我们的页脚。）

<header id="section1">
    <h1 class="animate fx">Background Fixed Effect</h1>
</header>
<section class="background-fixed img-1" id="section2">
    <div class="main-content">
    <img src="img/img1-mobile.png" class="hide">
    <h3>Mac are Awesome</h3>
    <p>You can preview any file (even Photoshop files and videos) by selecting it and pressing the spacebar. Press it again to close the preview. While in the preview you can also press the arrow keys to change between files.</p>
    </div>
</section>
<section class="background-fixed img-2" id="section3">
    <div class="main-content">
    <img src="img/img2-mobile.png" class="hide">
    <h3>Summarize text</h3>
    <p>Mac OS X allows you to quickly summarize long pieces of text in just a few seconds. To summarize a text first select it, right click on the selection and click on “Summarize”. To enable the summary feature, click on the app name in the status bar (“Chrome” for instance) > Services > Services Preferences… >  scroll down and check “Summarize”.</p>
    </div>
</section>
<section class="background-fixed img-3" id="section4">
    <div class="main-content dark">
    <img src="img/img3-mobile.png" class="hide">
    <h3>Hot Corners</h3>
    <p>Hot corners allow you to trigger certain events by touching a corner of your screen. You can start and disable a screensaver, open mission control, application windows, show the desktop, dashboard, notification center or lauchpad or put your display to sleep.</p>
    </div>
</section>
<section class="background-fixed img-4" id="section5">
    <div class="main-content">
    <img src="img/img4-mobile.png" class="hide">
    <h3>Automate actions</h3>
    <p>Everyone forgets about Automator, the application that lets you automate repetitive tasks. It works by clicking together actions into a chain of events.</p>
    </div>
</section>
<footer>
    <p>&copy; 2015 - Designmodo.com - All Rights Reserved
</footer>

使用导航

对于导航，我们将创建一个id为nav的无序列表。每个列表都有一个带有节号的id的链接，并且稍后会为我们的jQuery代码滚动类。我将代码放在我们的标记之上。

<ul id="nav">
    <li><a href="#section1" title="Next Section" class="scroll">
    <img src="img/dot1.png" alt="Link"></a></li>
    <li><a href="#section2" title="Next Section" class="scroll">
    <img src="img/dot2.png" alt="Link"></a></li>
    <li><a href="#section3" title="Next Section" class="scroll">
    <img src="img/dot3.png" alt="Link"></a></li>
    <li><a href="#section4" title="Next Section" class="scroll">
    <img src="img/dot4.png" alt="Link"></a></li>
    <li><a href="#section5" title="Next Section" class="scroll">
    <img src="img/dot5.png" alt="Link"></a></li>
</ul>

CSS

在开始使用常规样式之前，我将添加Eric Meyer网站的重置样式，以减少浏览器在布局上的不一致性。

让我们从我们的一般风格开始。我们将html和body height设置为100％，然后给出body，header和h1泛型样式。我还将隐藏类的样式放在这里以隐藏裁剪图像并稍后在较小的视口上显示它们。

html, body {   
  height: 100%;
}
body {
  font: 15px 'Lato', Helvetica, sans-serif;
  color: #0f594d;
  background-color: #fff;
}
header {
  background-color: #34495e;
  z-index: 999;
  position: relative;
  height: 100%;
}
header h1 {
  font: 45px 'Lato', Helvetica, sans-serif;
  color: #fff;
  font-weight: 300;
  border: 1px solid #fff;
  padding: 20px 25px;
  text-align: center;
  position: absolute;
  bottom: auto;
  right: auto;
  left: 30.3%;
  top: 42%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
img.hide{
  display: none;
}

由于我创建了一个圆形PNG图像，我们需要将此元素放置在浏览器的右侧，然后将其固定位置。

#nav {
  list-style: none;
  position: fixed;
  right: 20px;
  z-index: 999999;
  top: 260px;
}
#nav li {
  margin: 0 0 15px 0;
}
.background-fixed {
  background-size: cover;
  position: relative;
  padding: 45px 20px 0;
  background-repeat: no-repeat;
  background-position: center center;
}

接下来，让我们使用背景样式。首先，我将在h3标签上使用泛型样式，这也是标题和段落标记。请注意，我在h3上设置了一个白色边框，使其有点吸引人。现在，对于每个背景图像，我设置了不同的背景颜色。这将在稍后使用，因为我们尝试在较小的视口上对我们的布局进行一些更改。让我们在这里也包括我们页脚的样式。只是基本的代码块。

.background-fixed h3 {
  font-family: &quot;Lato&quot;, Arial, serif;
  font-size: 45px;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 300;
  border: 1px solid #fff;
  width: 100%;
  padding: 10px 15px;
  text-align: center;
}
.background-fixed p {
  font-family: &quot;Lato&quot;, Arial, serif;
  font-size: 18px;
}
.background-fixed.img-1 {
  background-color: #2dcc70;
}
.background-fixed.img-2 {
  background-color: #e84c3d;
}
.background-fixed.img-3 {
  background-color: #d25400;
}
.background-fixed.img-4 {
  background-color: #9b58b5;
}
footer{
  background: #172029;
  padding: 15px 0;
}
footer p{
  text-align: center;
    color: #fff;
    font-weight: 300;
}

由于背景固定效果仅适用于大屏幕并且不会出现在移动大小视口中，因此我们需要在小型设备上隐藏整个大背景图像并显示具有隐藏类别的默认图像。让我们玩我们的媒体查询，并在较小的屏幕上修复布局的外观。

@media only screen and (min-width: 1048px) {
  .background-fixed {
    background-attachment: fixed;
  }
  .main-content {
    width: 30%;
    left: 8%;
  }
}
@media only screen and (min-width: 768px) {
  .background-fixed {
    height:100%;
    padding:0
}
.background-fixed.img-1 {
    background-image:url(../img/img-1.jpg)
}
.background-fixed.img-2 {
    background-image:url(../img/img-2.jpg)
}
.background-fixed.img-3 {
    background-image:url(../img/img-3.jpg)
}
.background-fixed.img-4 {
    background-image:url(../img/img-4.jpg)
}
.main-content {
    width:38%;
    position:absolute;
    left:8%;
    bottom:auto;
    top:50%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%)
}
.main-content h3 {
    font-size:45px;
    font-weight:300
}
.main-content p {
    font-weight:300;
    font-size:18px;
    line-height:1.8;
    color:#fff
}
}
 
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
header h1 {
  left: 50%;
  margin-left: -260px;
}
.main-content {
  width: 35%;
}
.background-fixed h3 {
  font-size: 40px;
}
}
 
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
header h1 {
  left: 50%;
  margin-left: -173px;
}
.main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
  width: 480px;
}
.background-fixed h3 {
  font-size: 28px;
  width: initial;
}
.background-fixed p {
  line-height: 1.6;
  color:#fff;
  font-size: 16px;
}
 
img.hide {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  width: 60%;
}
.background-fixed {
  padding: 0;
}
}
 
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
header h1 {
  font-size: 25px;
  left: 50%;
  margin-left: -165px;
}
.main-content {
  left: auto;
  margin: 0 auto;
  padding: 25px 20px 20px;
  text-align: center;
  width: 320px;
}
.background-fixed h3 {
  font-size: 28px;
  width: initial;
}
.main-content.dark &gt; p {
  color: #fff;
}
.background-fixed p {
  line-height: 1.6;
  color: #fff;
  font-size: 16px;
}
img.hide {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
}
.background-fixed {
  padding: 0;
}
}

jQuery for Navigation

我们在屏幕右侧的圆形导航将无法使用纯CSS。要使其功能正常，请在<script>标记下添加我们的jQuery。我们使用了click函数以及scrollTop函数和offset函数来设置每个元素的坐标，并通过scroll类使每个幻灯片上的滚动效果生效。

jQuery(document).ready(function($) {
  $(&quot;.scroll&quot;).click(function(event){    
  event.preventDefault();
  $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
  });
  });