当前位置：首页 > 网站模板 > 后台模板

html5带flexbox网格图片的文章标题全屏图片滑动显示布局

分类：后台模板日期：2024-05-14 点击(1) 评论(0)

简介

###### 简要教程
这是一款效果很酷的html5带flexbox网格图片的文章标题全屏图片滑动显示布局。插件中使用了一些Flexbox和 CSS Transitions 技术，请确保你的浏览器支持这些特性。

html5带flexbox网格图片的文章标题全屏图片滑动显示布局-1

这个文章标题布局插件中将使用到以下的技术：

CSS Transitions
Media Queries
Flexbox with Viewport Units
Some JavaScript for toggling classes among others
该文章标题布局插件中的网格布局将使用Flexbox，我们通过CSS media queries来控制网格的数量和它们的高度，通过为网格的宽和高使用vw单位（快速了解vw），我们可以创建一个自适应的的网格布局，并保证图片的宽高比基本上是一个正方形。如果你想了解更多，可以查看caniuse.com的Can I Use，获取它们的浏览器支持和使用方法。

html5带flexbox网格图片的文章标题全屏图片滑动显示布局-2

##### HTML结构
首先我们需要一个header和一个title，还需要一个用于放置内容的网格。所有这些都要包裹到container容器中以便于后面用JS来控制它们。

```html
<header class="intro">
  <img class="intro__image" src="img/header.jpg" alt="Iceland glacier"/>
  <div class="intro__content">
    <h1 class="intro__title">Essential Feelings</h1>
    <div class="intro__subtitle">
      <div class="codrops-links">
        
      </div>
      <div class="intro__description">  </div>
      <button class="trigger">
        <svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
          <g class="icon icon--grid">
            <rect x="32.5" y="5.5" width="22" height="22"></rect>
            <rect x="4.5" y="5.5" width="22" height="22"></rect>
            <rect x="32.5" y="33.5" width="22" height="22"></rect>
            <rect x="4.5" y="33.5" width="22" height="22"></rect>
          </g>
          <g class="icon icon--cross">
            <line x1="4.5" y1="55.5" x2="54.953" y2="5.046"></line>
            <line x1="54.953" y1="55.5" x2="4.5" y2="5.047"></line>
          </g>
        </svg>
        <span>View content</span>
      </button>
    </div>
  </div>
</header>
```
下面是网格的html结构:

```html
<section class="items-wrap">
 
  <a href="#" class="item">
    <img class="item__image" src="img/item01.jpg" alt="item01"/>
    <h2 class="item__title">Magnificence</h2>
  </a>
 
  <a href="#" class="item">
    <img class="item__image" src="img/item02.jpg" alt="item02"/>
    <h2 class="item__title">Electrifying</h2>
  </a>
 
  
 
</section>
```
在这里你也可也是用一个无序列表或figure元素来做网格。

##### JAVASCRIPT
我们使用js脚本来在点击按钮时添加和移除class，同时还用js脚本来控制页面滚动条的行为。

```html
<script src="js/classie.js"></script>
<script>
  (function() {
 
    var container = document.getElementById( 'container' ),
      trigger = container.querySelector( 'button.trigger' );
 
    function toggleContent() {
      if( classie.has( container, 'container--open' ) ) {
        classie.remove( container, 'container--open' );
        classie.remove( trigger, 'trigger--active' );
        window.addEventListener( 'scroll', noscroll );
      }
      else {
        classie.add( container, 'container--open' );
        classie.add( trigger, 'trigger--active' );
        window.removeEventListener( 'scroll', noscroll );
      }
    }
 
    function noscroll() {
      window.scrollTo( 0, 0 );
    }
 
    // reset scrolling position
    document.body.scrollTop = document.documentElement.scrollTop = 0;
 
    // disable scrolling
    window.addEventListener( 'scroll', noscroll );
 
    trigger.addEventListener( 'click', toggleContent );
 
  })();
</script>
```

web299.com

html5带flexbox网格图片的文章标题全屏图片滑动显示布局

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面