布局框架

带旋转背景特效两栏页面布局

阿里云


这是一款带旋转背景特效的两栏页面布局。该页面布局将页面按颜色分为左右两栏,中间配上轮播图片。当点击前后导航按钮的时候,页面以颜色为视觉感进行旋转,同时切换轮播图,效果非常炫酷。

使用方法

在页面中引入以下文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  4. <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
  5. <script src="assets/js/demo.js"></script>

HTML 结构

基本的 HTML 结构如下。

  1. <div class="loader">
  2.   <div class="lds-ripple">
  3.     <div></div>
  4.     <div></div>
  5.   </div>
  6. </div>
  7. <header>
  8.   <div class="header-inner">
  9.     <div class="logo">
  10.       <a href="#"><span>microsite</span></a>
  11.     </div>
  12.     <div class="header-headline">
  13.       <div class="slides-navigation">
  14.         <ul>
  15.             <li><a class="main-nav__link is-active" href="#slide-01" data-id="0"><span>Never</span></a></li>
  16.             <li><a class="main-nav__link" href="#slide-02" data-id="1"><span>stop</span></a></li>
  17.             <li><a class="main-nav__link" href="#slide-03" data-id="2"><span>dreaming</span></a></li>
  18.         </ul>
  19.       </div>
  20.     </div>
  21.   </div>
  22. </header>
  23. <section class="coidea-slider">
  24.   <div class="slides-background"></div>
  25.   <div class="slides-container">
  26.     <div class="slides-iphone">
  27.       <div class="iphone"></div>
  28.       <div class="image" style="background-image: url(assets/img/img-1.jpeg);"></div>
  29.       <div class="image-blank"></div>
  30.     </div>
  31.     <article id="slide-01" class="slide is-active" data-bcg="assets/img/img-1.jpeg">
  32.       <div class="slide__content slide__content_left">
  33.         <h1 class="slide__title slide__title_left">Be a voice.</h1>
  34.         <p class="slide__subtitle slide__subtitle_left">Never stop dreaming.</p>
  35.       </div>
  36.       <div class="slide__content slide__content_right">
  37.         <h1 class="slide__title slide__title_right">Not an echo.</h1>
  38.         <p class="slide__subtitle slide__subtitle_right">Never stop dreaming.</p>
  39.       </div>
  40.     </article>
  41.     <article id="slide-02" class="slide" data-bcg="assets/img/img-2.jpeg">
  42.       <div class="slide__content slide__content_left">
  43.         <h1 class="slide__title slide__title_left">Collect<br>moments.</h1>
  44.         <p class="slide__subtitle slide__subtitle_left">Never stop dreaming.</p>
  45.       </div>
  46.       <div class="slide__content slide__content_right">
  47.         <h1 class="slide__title slide__title_right">Not<br>things.</h1>
  48.         <p class="slide__subtitle slide__subtitle_right">Never stop dreaming.</p>
  49.       </div>
  50.     </article>
  51.     <article id="slide-03" class="slide" data-bcg="assets/img/img-3.jpeg">
  52.       <div class="slide__content slide__content_left">
  53.         <h1 class="slide__title slide__title_left">Find<br>yourself.</h1>
  54.         <p class="slide__subtitle slide__subtitle_left">Never stop dreaming.</p>
  55.       </div>
  56.       <div class="slide__content slide__content_right">
  57.         <h1 class="slide__title slide__title_right">And<br>be that.</h1>
  58.         <p class="slide__subtitle slide__subtitle_right">Never stop dreaming.</p>
  59.       </div>
  60.     </article>
  61.   </div>
  62. </section>
  63. <div class="image-preloader"><img src="assets/img/img-1.jpeg" alt="coidea - 1"></div>
  64. <div class="image-preloader"><img src="assets/img/img-2.jpeg" alt="coidea - 2"></div>
  65. <div class="image-preloader"><img src="assets/img/img-3.jpeg" alt="coidea - 3"></div>

Github 网址:https://github.com/COIDEAwebsite/microsite-concept-with-rotating-background

带旋转背景特效两栏页面布局

已有 470 人购买
  • 29r5
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!