Pos Terbaru Kreatifa Media

Tutorial App Showcase with Grid Overlay

Sunday, April 7, 2013

DEMO      -       DOWNLOAD

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase. 
In this tutorial will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and scales up. When clicking on another screenshot, the device image gets updated and the grid disappears again. 

The beautiful iPhone mockup used in the demo is by Jakub Kejha
Let’s get started with the markup.

The Markup

The HTML will consist of a main wrapper that contains a heading, a division for the device and a division for the grid:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="ac-wrapper" class="ac-wrapper">
    <h2>Weatherous <span>Concept & UI Design</span></h2>
    <div class="ac-device">
        <a href="#"><img src="images/screen1.jpg"/></a>
        <h3 class="ac-title">Gentrify small batch umami retro vegan</h3>
    </div>
    <div class="ac-grid">
        <a href="#"><img src="images/screen1.jpg"/><span>Gentrify small batch umami retro vegan</span></a>
        <a href="#"><img src="images/screen2.jpg"/><span>Chambray squid semiotics</span></a>
        <a href="#"><img src="images/screen3.jpg"/><span>Fashion axe blue bottle</span></a>
        <a href="#"><img src="images/screen4.jpg"/><span>Photo booth single-origin coffee</span></a>
        <a href="#"><img src="images/screen5.jpg"/><span>Flexitarian synth keytar blog master</span></a>
        <a href="#"><img src="images/screen6.jpg"/><span>Next level retro flexitarian freegan</span></a>
        <a href="#"><img src="images/screen7.jpg"/><span>Pour-over superious meggings terry</span></a>
        <a href="#"><img src="images/screen8.jpg"/><span>Seitan william vinyl chillwave</span></a>
    </div>
</div>
Once we click on a grid item, we will update the content of the device container. We will also make the span for each grid item appear on hover.
Let’s style everything.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.
In this tutorial we will be going through the style of demo 1.
So let’s start with the main wrapper. This will be the container that will have perspective. The origin will not be in the center but a bit more up:
1
2
3
4
5
6
.ac-wrapper {
    width: 100%;
    position: relative;
    perspective: 1000px;
    perspective-origin: 50% 25%;
}
The heading will be positioned absolutely on the left side of the device:
1
2
3
4
5
6
7
8
9
.ac-wrapper h2 {
    top: 20%;
    width: 50%;
    position: absolute;
    font-weight: 300;
    font-size: 4em;
    text-align: right;
    padding: 0 180px 0 50px;
}
Let’s give a slightly different look to the span:
1
2
3
4
5
.ac-wrapper h2 span {
    display: block;
    font-size: 60%;
    color: #c0c0c0;
}
The device will have the iPhone mockup as a background image and we will set the right dimensions. This container will need to preserve the 3D transforms and we’ll add a transition to it. Later, we’ll define a “transition classes” that will contain the properties for the altered states.
1
2
3
4
5
6
7
8
9
.ac-device {
    background: url(../images/iPhone.png) no-repeat;
    width: 288px;
    height: 611px;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}
The screenshot will be inside of an anchor and we’ll set the dimensions here and position it to fit into the mockup:
1
2
3
4
5
6
7
8
9
10
.ac-device a {
    height: 440px;
    width: 249px;
    display: inline-block;
    margin: 85px 0 0 20px;
}
.ac-device a img {
    display: block;
}
The title for each screenshot once it’s in the mockup view will be positioned absolutely on the right side of the device:
1
2
3
4
5
6
7
8
9
10
.ac-device h3 {
    position: absolute;
    font-size: 2.5em;
    left: 100%;
    width: 100%;
    top: 60%;
    margin-left: 30px;
    font-weight: 300;
    color: #888;
}

Now, let’s style the grid. We want to display a total of eight items so a row will have four items. Let’s set a fitting width, make it absolute and center it by setting a negative left margin (half of its width) and a left value of 50%. The initial opacity is 0 and since the grid is displayed and covering the device, we’ll set the pointer events to none so that we can’t click on it when it’s invisible. We’ll also add a transition and translate it -350px on the Z axis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ac-grid {
    position: absolute;
    width: 620px;
    left: 50%;
    margin-left: -310px;
    height: 100%;
    z-index: 1000;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    transform: translateZ(-350px);
}

The anchors in the grid will be floated left and the images inside will be set to 100% width. This will come in handy later on when we apply some media queries:

1
2
3
4
5
6
7
8
9
10
11
12
13
.ac-grid a {
    width: 145px;
    display: block;
    position: relative;
    float: left;
    margin: 10px 5px;
    cursor: pointer;
}
.ac-grid a img {
    display: block;
    width: 100%;
}

The span for the description will be positioned absolutely on top of the anchor and we’ll fade it in and move it a bit on hover:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ac-grid a span {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    text-transform: uppercase;
    padding: 3em 1em 0;
    z-index: 100;
    color: #ddd;
    background: rgba(0,0,0,0.4);
    font-weight: 700;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease;
}
.ac-grid a:hover span {
    opacity: 1;
    transform: translateY(0);
}

Next, we’ll define the “transition classes”. When we click on the device, we’ll apply a class to the wrapper which will trigger the fading in and scaling up of the grid and the moving back of the device:

1
2
3
4
5
6
7
8
9
10
.ac-wrapper.ac-gridview .ac-device {
    transform: translateZ(-350px);
    opacity: 0.6;
}
.ac-wrapper.ac-gridview .ac-grid {
    transform: translateZ(0px);
    opacity: 1;
    pointer-events: auto;
}

Once the grid is there, we also set the pointer-events to auto again.
Our layout has some absolutely positioned elements and we’ll need to take care of them on smaller screens. The idea is that we will switch the main heading to the right side first and then center everything once the screen is very small. The second media query takes care of the grid structure. Here we will set a fluid width for both, the grid and the anchors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
@media screen and (max-width: 63.875em) {
    .ac-wrapper {
        font-size: 60%;
        width: 100%;
        padding: 0 20px;
    }
    .ac-device {
        margin: 0;
        width: 100%;
    }
    .ac-device h3 {
        width: 50%;
        left: 290px;
    }
    .ac-wrapper h2 {
        left: 308px;
        padding: 0;
        text-align: left;
        margin-left: 30px;
    }
}
@media screen and (max-width: 39.8125em) {
    .ac-grid {
        width: 90%;
        left: 5%;
        margin-left: 0;
        padding-top: 150px;
    }
    .ac-grid a {
        width: 22%;
    }
}
@media screen and (max-width: 35.6875em) {
    .ac-wrapper {
        padding: 0 20px 100px;
    }
    .ac-wrapper h2 {
        width: 100%;
        text-align: center;
        margin: 0 0 1em;
        top: 0;
        left: auto;
        position: relative;
    }
    .ac-device {
        margin: 0 auto;
        width: 288px;
    }
    .ac-device h3 {
        position: relative;
        margin: 0;
        left: auto;
        width: 100%;
        top: 100px;
        display: block;
        text-align: center;
    }
}
And that’s all the style! Let’s take a look at the JavaScript.

The JavaScript

Let’s start by caching some elements and initialize some variables:
1
2
3
4
5
6
7
8
9
10
11
12
13
var $el = $( '#ac-wrapper' ),
    // device element
    $device = $el.find( '.ac-device' ),
    // the device image wrapper
    $trigger = $device.children( 'a:first' ),
    // the screens
    $screens = $el.find( '.ac-grid > a' ),
    // the device screen image
    $screenImg = $device.find( 'img' ),
    // the device screen title
    $screenTitle = $device.find( '.ac-title' ),
    // HTML Body element
    $body = $( 'body' );   
We will bind the events to the device’s image wrapper (anchor) and to the screen elements.

1
2
3
4
5
6
7
8
9
function init() {
    // show grid
    $trigger.on( 'click', showGrid );
    // when a grid´s screen is clicked, show the respective image on the device
    $screens.on( 'click', function() {
        showScreen( $( this ) );
        return false;
    } );
}

When the device’s image is clicked, the grid is shown. For this to happen the class “ac-gridview” has to be added to the ac-wrapper element:

1
2
3
4
5
6
function showGrid() {
    $el.addClass( 'ac-gridview' );
    // clicking somewhere else on the page closes the grid view
    $body.off( 'click' ).on( 'click', function() { showScreen(); } );
    return false;
}

When a screen element is clicked we remove the “ac-gridview” class from the ac-wrapper element, and update both, image source and title on the respective elements:

1
2
3
4
5
6
7
8
function showScreen( $screen ) {
    $el.removeClass( 'ac-gridview' );
    if( $screen ) {
        // update image and title on the device
        $screenImg.attr( 'src', $screen.find( 'img' ).attr( 'src' ) );
        $screenTitle.text( $screen.find( 'span' ).text() );
    }
}

For the third demo we also want to offer the possibility to navigate through the screenshots without having to open the grid. Depending to the direction we are navigating, the next screen will either scale up / fade in (navigating to the next screen) or move up / fade in (navigating to the previous screen). The same logic applies to the current screenshot. In order for this to work, we need to add the next/previous screen’s image to the DOM right before the current screen’s image (both images being absolute). When the transition ends we remove the old one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
function navigate( direction ) {
    // if currently animating return
    if( animating ) {
        return false;
    }
    animating = true;
     
    // update current
    if( direction === 'next' ) {
        current = current < screensCount - 1 ? ++current : 0;
    }
    else if( direction === 'prev' ) {
        current = current > 0 ? --current : screensCount - 1;
    }
     
    // next screen to show
    var $nextScreen = $screens.eq( current );
    // if css transitions support:
    if( support ) {
        // append new image to the device and set the transition and initial style
        var $nextScreenImg = $( '<img src="' + $nextScreen.find( 'img' ).attr( 'src' ) + '">' ).css( {
            transition : 'all 0.5s ease',
            opacity : 0,
            transform : direction === 'next' ? 'scale(0.9)' : 'translateY(100px)'
        } ).insertBefore( $screenImg );
        // update title
        $screenTitle.text( $nextScreen.find( 'span' ).text() );
        setTimeout( function() {
            // current image fades out / new image fades in
            $screenImg.css( {
                opacity : 0,
                transform : direction === 'next' ? 'translateY(100px)' : 'scale(0.9)'
            } ).on( transEndEventName, function() { $( this ).remove(); } );
            $nextScreenImg.css( {
                opacity : 1,
                transform : direction === 'next' ? 'scale(1)' : 'translateY(0px)'
            } ).on( transEndEventName, function() {
                $screenImg = $( this ).off( transEndEventName );
                animating = false;
            } );
        }, 25 );
    }
    else {
        // update image and title on the device
        $screenImg.attr( 'src', $nextScreen.find( 'img' ).attr( 'src' ) );
        $screenTitle.text( $nextScreen.find( 'span' ).text() );
        animating = false;
    }
}

This navigation concept was introduced by Evan You and you can check it out here, or watch the video.

And that’s all! We hope you enjoyed this tutorial and find it inspiring!

By Mary Lou (Manoela Ilic)
Source: http://tympanus.net/codrops/2013/04/01/app-showcase-with-grid-overlay/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29

Tutorial Animated CSS3 Photo Stack

Friday, April 5, 2013

DEMO       DOWNLOAD

In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.


The HTML

 

As always, the first step is to present the markup of the example. We are starting with a regular HTML5 document in which we are including a number of CSS/JS files:

index.html

01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="utf-8" />
05
06    <title>Animated CSS3 Photo Stack | Tutorialzine Demo</title>
07
08    <!-- CSS Includes -->
09    <link href="assets/css/style.css" rel="stylesheet" />
10    <link href="assets/css/animate.css" rel="stylesheet" />
11
12</head>
13<body>
14
15    <ul id="photos">
16        <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/"
17        style="background-image:url(...)">Landscape 5</a></li>
18        <!-- More photos here -->
19    </ul>
20
21    <a href="#" class="arrow previous"></a>
22    <a href="#" class="arrow next"></a>
23
24    <!-- Libraries -->
25    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
26    <script src="assets/js/script.js"></script>
27
28</body>
29</html>

The #photos UL holds the photos that we will be animating. For each photo, I’ve defined a LI item with an anchor element inside it. The image is set as the background-image property of the link. As you will see in the CSS part, I am using the background-size property to force the image to cover the entire width and height of the link. When adding more photos, keep in mind that because they are positioned absolutely, they will be shown in reverse order (the last photo will be at the top).
In the head section of the document, I am including our main stylesheet and animate.css – the library that gives us those wonderful CSS3 animations. Before the closing body tag, we have the jQuery library and script.js which we will discuss next.


The JavaScript

 

To trigger the effects that the animate library gives us, we have to assign a class name to the element with the name of the animation. We will also have to move the animated photo at the bottom of the stack after the animation finishes, so that we can show the next image. Here is what we need to do in order to make this example work:

  • First, we will listen for clicks on the arrows;
  • Then, when a click occurs on the next arrow, we will trigger a randomly chosen CSS animation by assigning a class name to the topmost element of the stack (this is actually the last LI item because of the positioning);
  • After one second, when the animation completes, we will move the animated element before the other LIs with the prependTo jQuery method (this will push it to the bottom of the stack) and remove the classes that we’ve assigned above.
  • For the previous arrow, we will do nearly the same, with the only difference being that we will take the last image and place it at the top of the stack before triggering the animation.

In addition, I will also add auto-advance functionality like we did in this article. This will turn the example into a cool slideshow that stops the automated transitions when you click one of the arrows.
Here is what the code looks like:

assets/js/script.js

01$(function() {
02
03    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown',
04        'hinge', 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft',
05        'lightSpeedOut', 'rollOut'];
06
07    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight',
08            'rotateIn', 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown'];
09
10    var photos = $('#photos'),
11        ignoreClicks = false;
12
13    $('.arrow').click(function(e, simulated){
14        if(ignoreClicks){
15
16            // If clicks on the arrows should be ignored,
17            // stop the event from triggering the rest
18            // of the handlers
19
20            e.stopImmediatePropagation();
21            return false;
22        }
23
24        // Otherwise allow this click to proceed,
25        // but raise the ignoreClicks flag
26
27        ignoreClicks = true;
28
29        if(!simulated){
30            // Once the user clicks on the arrows,
31            // stop the automatic slideshow
32            clearInterval(slideshow);
33        }
34    });
35
36    // Listen for clicks on the next arrow
37    $('.arrow.next').click(function(e){
38
39        e.preventDefault();
40
41        // The topmost element
42        var elem = $('#photos li:last');
43
44        // Apply a random exit animation
45        elem.addClass('animated')
46            .addClass( exits[Math.floor(exits.length*Math.random())] );
47
48        setTimeout(function(){
49
50            // Reset the classes
51            elem.attr('class','').prependTo(photos);
52
53            // The animation is complate!
54            // Allow clicks again:
55            ignoreClicks = false;
56
57        },1000);
58    });
59
60    // Listen for clicks on the previous arrow
61    $('.arrow.previous').click(function(e){
62
63        e.preventDefault();
64
65        // The bottom-most element
66        var elem = $('#photos li:first');
67
68        // Move the photo to the top, and
69        // apply a random entrance animation
70
71        elem.appendTo(photos)
72            .addClass('animated')
73            .addClass( entrances[Math.floor(entrances.length*Math.random())] );
74
75        setTimeout(function(){
76
77            // Remove the classess
78            elem.attr('class','');
79
80            // The animation is complate!
81            // Allow clicks again:
82            ignoreClicks = false;
83
84        },1000);
85    });
86
87    // Start an automatic slideshow
88    var slideshow = setInterval(function(){
89
90        // Simulate a click every 1.5 seconds
91        $('.arrow.next').trigger('click',[true]);
92
93    }, 1500);
94
95});

I haven’t used all the effects that animate.css provides, but you can find a full list at its github page.
All that we are left to do, is to write a few CSS styles.

The CSS

 

I won’t be showing all of the styles here, only those that are directly responsible for the photo stack:

assets/css/styles.css

01#photos{
02    margin:0 auto;
03    padding-top:120px;
04    width:450px;
05    position:relative;
06}
07
08#photos li{
09    position:absolute;
10    width:450px;
11    height:450px;
12    overflow:hidden;
13    background-color:#fff;
14    box-shadow: 1px 1px 1px #ccc;
15    z-index:10;
16
17    -webkit-animation-duration: 1s;
18    -moz-animation-duration: 1s;
19    animation-duration: 1s;
20}
21
22#photos li a{
23    position:absolute;
24    top:6px;
25    left:6px;
26    right:6px;
27    bottom:6px;
28    background-size: cover;
29    text-indent:-9999px;
30    overflow:hidden;
31}

To change the duration of the animations, you will have to supply the animation-duration property. In the fragment above, I have set it to 1 second. More properties that you can set are animation-delay for the delay before the animation is triggered, and animation-iteration-count for the number of repetitions.

by Martin Angelov
Source: http://tutorialzine.com/2013/02/animated-css3-photo-stack/
 
Support : Femin Collection | Habitat Design | Kreatifa Media
Copyright © 2013. Kreatifa Media - All Rights Reserved
Template Created by Habitat Design Published by Kreatifa Media
Proudly powered by Blogger