Cool! Three full-screen slide effects (source code download]

Today, we want to show you how to create a slide for tiled background images. It is inspired by a foreign studio website (onlookers), which is full of interesting and creative effects. Remember to check it out.

The slide effect consists of independent movement of the four areas. The slides are separated by pictures and new images are displayed. Here you need to combineCss33D conversion, transition, and animation functions. In addition to this effect, we will also add two more changes. Our aim is to achieve a super smooth interactive experience.

Tip: to ensure the best results, visit modern browsers such as ie10 +, chrome, Firefox, and safari.

 

 

Online Demo of source code download

 

For slides, we need a specialHtmlStructure to achieve four different page areas, each region uses the same image, but with different positioning, let the four areas work together exactly as a complete background image. We need to ensure that the content is filled with the whole page because it is a full screen slide.

First, we define a simple initial structure that specifies which image is displayed on each panel (or slide) and then create fragments of our recurring structure. Therefore, we initially hoped that:

<div id="boxgallery" class="boxgallery" data-effect="effect-1">    <div class="panel"></div>    <div class="panel"></div>    <div class="panel"></div>    <div class="panel"></div></div>

To break down an image into fragments for animation effect, we need to define the following structure for each panel:

div id="boxgallery" class="boxgallery" data-effect="effect-1">    <div class="panel current">        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>    </div>    <div class="panel">        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>        <div class="bg-tile">            <div class="bg-img"></div>        </div>    </div>    <div class="panel">        <!-- ... -->    </div>    <div class="panel">        <!-- ... -->    </div>    <nav>        <span class="prev"><i></i></span>        <span class="next"><i></i></span>    </nav></div>

Of course, you may look at the above structure and ask why image elements are used instead of background images? In fact, after trying to compare different methods, we can conclude that using the background image and setting the background size may cause a problem with the transition effect. For example, using background-size: cover may cause trembling in the conversion animation.

We also need to add a navigation bar so that we can browse through the panel. We also used data attributes to set the animation effect. Next, let's add some styles to this effect. Note thatCSSIt will not contain any browser prefix, but it is available in the source code file.

First, we are in full screen mode, so we need to set the following settings to make our page full of Windows:

html, body, .container {    height: 100%;}

Both the main container and sub-elements will be absolutely positioned, and the Panel will occupy all width and height:

.js .boxgallery,.js .boxgallery div {    position: absolute;} .js .boxgallery,.js .panel {    top: 0;    left: 0;    width: 100%;    height: 100%;}

Since our results may have elements that exceed our own region, we also need to ensure that they do not overflow:

.js .boxgallery,.bg-tile,.bg-img {    overflow: hidden;}

This example has three effects:CSSAnimation effect code:

.boxgallery[data-effect="effect-1"] .panel.active .bg-tile,.boxgallery[data-effect="effect-2"] .panel.active .bg-tile {    animation: scaleDown 1.1s ease-in-out;} @keyframes scaleDown {    from { transform: translate3d(0,0,380px); }    to { transform: translate3d(0,0,0); }}

 

Online Demo of source code download

 

Articles you may be interested in

• Awesome! Amazing page switching animation effects [Download source code]
• Unlimited creativity! A set of webpage sidebar transition animations [download with source code]
• Good stuff! Dynamic page loading animation effect [Download source code]
• Use css3 to implement the 3D image slider effect [Download source code]
• Fashion design! Three special grid loading effects (source code download]

 

Link to this article: How to Create a four-cell slide for tiled backgrounds via codrops

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Source of this article [http://www.cnblogs.com/lhb25 /]