rellax实现全屏图文视觉差异滚动效果代码-html代码-BFW代码库

代码语言：html

代码描述：rellax实现全屏图文视觉差异滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
/* Flexbox */
/* Columns */
/* Spacings */
/* Colors */
/* Sizes */
/* misc */
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700;1,6..96,800;1,6..96,900&family=Noto+Serif+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  width: 100%;
  color: black;
  font-family: "Poppins", sans-serif;
  background-color: #fbf4f4;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* Font Size */
h1 {
  font-size: clamp(2.8rem, 2.2399999999999998rem + 2.8vw, 5.6rem);
}

h2 {
  font-size: clamp(2rem, 1.68rem + 1.6vw, 3.6rem);
}

h3 {
  font-size: clamp(1.8rem, 1.68rem + 0.59vw, 2.4rem);
}

h4 {
  font-size: calc($heading-small - 0.2rem);
}

h5 {
  font-size: calc($heading-small - 0.4rem);
}

h6 {
  font-size: calc($heading-small - 0.6rem);
}

/* Font Weight */
h1,
h2 {
  font-weight: 900;
}

h3,
h4,
h5,
h6 {
  font-weight: 800;
}

/* Paragraphs */
p {
  margin: 0;
  font-size: clamp(1rem, 0.978rem + 0.11vw, 1.11rem);
}

/* Links */
a {
  color: #f01932;
  font-size: clamp(1rem, 0.978rem + 0.11vw, 1.11rem);
  text-decoration: none;
}

a:visited {
  color: rgba(240, 25, 50, 0.5);
}

/* Global */
.view-width {
  width: calc(100% - 6em);
  max-width: 1420px;
}

.no-margin {
  margin: 0 !important;
}

/* Main */
.main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* Article List */
.article-list {
  width: 100%;
}
.article-list-item {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  position: relative;
  animation: aListLoading 1s 0.5s cubic-bezier(0.175, 0.685, 0.32, 1) forwards;
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-list-item-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-list-item-inner-title {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-list-item-inner-title-inner {
  padding: 0.22em 0;
  position: relative;
  color: white;
  font-family: "Noto Serif Display", serif;
  font-size: clamp(2.8rem, 2.2399999999999998rem + 2.8vw, 5.6rem);
  font-weight: 900;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.025em;
  line-height: 0.8;
  text-decoration: none;
  transform: scale(1.2, 1);
  user-select: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.article-list-item-inner-title-inner:visited {
  color: white;
}
.article-list-item-inner-title-inner span {
  top: 2em;
  display: block;
  position: relative;
  transform: scale(0.8, 0.8) rotate(17deg);
}
.article-list-item-inner-title-inner .ht-outlined {
  color: transparent;
  -webkit-text-stroke: 1px white;
}
.article-list-item-inner-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  z-index: 4;
  animation: aListOverlayLoading 1s 0.5s cubic-bezier(0.175, 0.685, 0.32, 1) forwards;
}
.article-list-item-background {
  min-width: 100%;
  min-height: 100%;
  max-width: 110%;
  position: absolute;
  object-fit: cover;
  transform: scale(1, 1);
  transition: all 0.35s cubic-bezier(0.175, 0.685, 0.32, 1);
}
.article-list-item-background-blur {
  width: 100vw;
  height: 100vh;
  position: absolute;
  transform: scale(0.9, 0.9);
  filter: blur(6rem);
  opacity: 0.5;
  z-index: 1;
}

/* Keyframes */
@keyframes aListLoading {
  0% {
    padding: 0;
  }
  100% {
    padding: 0;
  }
}
@keyframes aListTitle {
  0% {
    top: 2em;
    transform: scale(0.8, 0.8) rotate(17deg);
  }
  100% {
    top: 0;
    transform: scale(1, 1) rotate(0);
  }
}
@keyframes aListOverlayLoading {
  0% {
    background-color: black;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>

  
</head>

<body translate="no">
  <!-- Main -->
<main class="main">
  <section class="article-list">
    <div class="article-list-item" id="article.........完整代码请登录后点击上方下载按钮下载查看