<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带CSS混合模式的JS视觉差轮播图特效</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
</head>
<body>
<!-- coidea:loader START -->
<div class="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
<!-- coidea:loader END -->
<!-- coidea:header START -->
<header>
<div class="header-inner">
<div class="logo">
<a href="https://www.htmleaf.com/"><span>Elements.</span></a>
</div>
<div class="header-headline">
<p>Finding Your Element and What It Means</p>
</div>
<nav class="navigation">
<li><a href="https://www.jb51.net/"><span>Article</span></a></li>
<li><a href="https://github.com/COIDEAwebsite/css-mix-blend-mode-and-stunning-parallax-slideshow" target="_blank"><span>Github</span></a></li>
<li><a href="https://www.jb51.net/"><span>jQuery</span></a></li>
</nav>
</div>
</header>
<!-- coidea:header END -->
<!-- coidea:main START -->
<main id="coidea" class="coidea-fullpage">
<!-- coidea:main:section START -->
<section class="wrapper" id="section-1">
<div class="bg">
<div class="el">
<div class="bcg" style="background-image: url(assets/img/img-1.jpeg)"></div>
<div class="content">
<span>Earth</span>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
</div>
</div>
</div>
</div>
</section>
<!-- coidea:main:section END -->
<!-- coidea:main:section START -->
<section class="wrapper" id="section-2">
<div class="bg">
<div class="el">
<div class="bcg" style="background-image: url(assets/img/img-2.jpeg)"></div>
<div class="content">
<span>Water</span>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
</div>
</div>
</div>
</div>
</section>
<!-- coidea:main:section END -->
<!-- coidea:main:section START -->
<section class="wrapper" id="section-3">
<div class="bg">
<div class="el">
<div class="bcg" style="background-image: url(assets/img/img-3.jpeg)"></div>
<div class="content">
<span>Fire</span>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
</div>
</div>
</div>
</div>
</section>
<!-- coidea:main:section END -->
<!-- coidea:main:section START -->
<section class="wrapper" id="section-4">
<div class="bg">
<div class="el">
<div class="bcg" style="background-image: url(assets/img/img-4.jpeg)"></div>
<div class="content">
<span>Air</span>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
</div>
</div>
</div>
</div>
</section>
<!-- coidea:main:section END -->
</main>
<!-- coidea:main END -->
<!-- coidea:indicators START -->
<footer class="active-footer">
<nav class="anchor-nav" role="navigation">
<a href="#section-1" class="active" id="anchor1"></a>
<a href="#section-2" id="anchor2"></a>
<a href="#section-3" id="anchor3"></a>
<a href="#section-4" id="anchor4"></a>
</nav>
</footer>
<!-- coidea:indicators END -->
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="assets/js/demo.js"></script>
</body>
</html>