linkedin facebook linkedin facebook nod32

3D Galirikani yaratish

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-07-02

Galirikani  yaratish 

Chromebook Getting Started guide   shundan  birini ko’rishimiz mumkin  bo’lgan googledagi  galirikani  qayta yaratishni  o’rganamiz. Biz hozirgi namunamizda  Masonry to’ri  3D  transformasiyasini qo’llaymiz.  
Hamda galereyani  stireka  orqali  farqlash va “ESC” orqali chiqib ketish  mumkin.
Eslatib o’tamizki 3D  transformasiyasi hamma  brovzerlarda ham  ishlamaydi.

 

HTML
<div id="grid-gallery" class="grid-gallery">
    <section class="grid-wrap">
        <ul class="grid">
            <li class="grid-sizer"></li><!-- for Masonry column width -->
            <li>
                <figure>
                    <img src="img/thumb/1.png" alt="img01"/>
                    <figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/2.png" alt="img02"/>
                    <figcaption><h3>Vice velit chia</h3><p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/3.png" alt="img03"/>
                    <figcaption><h3>Brunch semiotics</h3><p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/4.png" alt="img04"/>
                    <figcaption><h3>Chillwave nihil occupy</h3><p>In post-ironic gluten-free deserunt, PBR&B non pork belly cupidatat polaroid. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/5.png" alt="img05"/>
                    <figcaption><h3>Kale chips lomo biodiesel</h3><p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p></figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="img/thumb/6.png" alt="img06"/>
                    <figcaption><h3>Exercitation occaecat</h3><p>Street chillwave hoodie ea gentrify.</p></figcaption>
                </figure>
            </li>
        </ul>
    </section><!-- // grid-wrap -->
    <section class="slideshow">
        <ul>
            <li>
                <figure>
                    <figcaption>
                        <h3>Letterpress asymmetrical</h3>
                        <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>
                    </figcaption>
                    <img src="img/large/1.png" alt="img01"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Vice velit chia</h3>
                        <p>Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, cred sustainable Odd Future hashtag butcher.</p>
                    </figcaption>
                    <img src="img/large/2.png" alt="img02"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Brunch semiotics</h3>
                        <p>IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next level single-origin coffee photo booth.</p>
                    </figcaption>
                    <img src="img/large/3.png" alt="img03"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Chillwave nihil occupy</h3>
                        <p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
                    </figcaption>
                    <img src="img/large/4.png" alt="img04"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Kale chips lomo biodiesel</h3>
                        <p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p>
                    </figcaption>
                    <img src="img/large/5.png" alt="img05"/>
                </figure>
            </li>
            <li>
                <figure>
                    <figcaption>
                        <h3>Exercitation occaecat</h3>
                        <p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p>
                    </figcaption>
                    <img src="img/large/6.png" alt="img06"/>
                </figure>
            </li>
        </ul>
        <nav>
            <span class="icon nav-prev"></span>
            <span class="icon nav-next"></span>
            <span class="icon nav-close"></span>
        </nav>
        <div class="info-keys icon">Navigate with arrow keys</div>
    </section><!-- // slideshow -->
</div><!-- // grid-gallery -->

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script>
new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>


CSS

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome/fontawesome.eot?-e43dk9');
    src:url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),
        url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),
        url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),
        url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Общие стили */
.grid-gallery ul {
list-style: none;

 

    margin: 0;
padding: 0;
}

.grid-gallery figure {
margin: 0;
}

.grid-gallery figure img {
display: block;
width: 100%;
}

.grid-gallery figcaption h3 {
margin: 0;
padding: 0 0 0.5em;
}

.grid-gallery figcaption p {
margin: 0;
}

/* Стиль сетки */
.grid-wrap {
max-width: 69em;
margin: 0 auto;
padding: 0 1em 1.875em;
}

.grid {
margin: 0 auto;
}

.grid li {
width: 25%;
float: left;
cursor: pointer;
}

.grid figure {
padding: 15px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}

.grid li:hover figure {
opacity: 0.7;
}

.grid figcaption {
background: #e4e4e4;
padding: 25px;
}

/* Слайдшоу стиль */
.slideshow {
position: fixed;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 500;
opacity: 0;
visibility: hidden;
overflow: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.slideshow ul {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,150px);
transform: translate3d(0,0,150px);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.slideshow ul.animatable li {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.slideshow li {
width: 660px;
height: 560px;
position: absolute;
top: 50%;
left: 50%;
margin: -280px 0 0 -330px;
visibility: hidden;
}

.slideshow li.show {
visibility: visible;
}

.slideshow li:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,0.8);
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.slideshow li.current:after {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
width: 100%;
height: 100%;
background: #fff;
border: 50px solid #fff;
overflow: hidden;
}

.slideshow figcaption {
padding-bottom: 20px;
}

.slideshow figcaption h3 {
font-weight: 300;
font-size: 200%;
}

/* Навигация */
.slideshow nav span {
position: fixed;
z-index: 1000;
color: #59656c;
text-align: center;
padding: 3%;
cursor: pointer;
font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.slideshow nav span.nav-next {
right: 0;
}

.slideshow nav span.nav-close {
top: 0;
right: 0;
padding: 0.5em 1em;
color: #31373a;
}

.icon:before,
.icon:after {
font-family: 'fontawesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
content: "\e601";
}

span.nav-next:before  {
content: "\e600";
}

span.nav-close:before {
content: "\e602";
}

/* Информация на стрелке навигации */
.info-keys {
position: fixed;
top: 10px;
left: 10px;
width: 60px;
font-size: 8px;
padding-top: 20px;
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
text-align: center;
}

.info-keys:before,
.info-keys:after {
position: absolute;
top: 0;
width: 16px;
height: 16px;
border: 1px solid #fff;
text-align: center;
line-height: 14px;
font-size: 12px;
}

.info-keys:before {
left: 10px;
content: "\e603";
}

.info-keys:after {
right: 10px;
content: "\e604";
}

/* Медиа запросы для разных размеров экранов */

@media screen and (max-width: 60em) {
/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
.grid li {
width: 33.3%;
}

    .slideshow li {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
}

    .slideshow li figure img {
width: auto;
margin: 0 auto;
max-width: 100%;
}

    .slideshow nav span,
.slideshow nav span.nav-close {
font-size: 1.8em;
padding: 0.3em;
}

    .info-keys {
display: none;
}

}

@media screen and (max-width: 35em) {
.grid li {
width: 50%;
}
}

@media screen and (max-width: 24em) {
.grid li {
width: 100%;
}
}


JavaScript

/**
 * cbpGridGallery.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
;( function( window ) {

    'use strict';

    var docElem = window.document.documentElement,
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = {
transitions : Modernizr.csstransitions,
support3d : Modernizr.csstransforms3d
};

    function setTransform( el, transformStr ) {
el.style.WebkitTransform = transformStr;
el.style.msTransform = transformStr;
el.style.transform = transformStr;
}

    // взясто с http://responsejs.com/labs/dimensions/
function getViewportW() {
var client = docElem['clientWidth'],
inner = window['innerWidth'];

        if( client < inner )
return inner;
else
return client;
}

    function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}

    function CBPGridGallery( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}

    CBPGridGallery.prototype.options = {
};

    CBPGridGallery.prototype._init = function() {
// основная сетка
this.grid = this.el.querySelector( 'section.grid-wrap > ul.grid' );
// основные элементы сетки
this.gridItems = [].slice.call( this.grid.querySelectorAll( 'li:not(.grid-sizer)' ) );
// общее количество элементов
this.itemsCount = this.gridItems.length;
// сетка
this.slideshow = this.el.querySelector( 'section.slideshow > ul' );
// слайды сетки
this.slideshowItems = [].slice.call( this.slideshow.children );
// индекс текущего слайда
this.current = -1;
// элементы управления слайд-шоу
this.ctrlPrev = this.el.querySelector( 'section.slideshow > nav > span.nav-prev' );
this.ctrlNext = this.el.querySelector( 'section.slideshow > nav > span.nav-next' );
this.ctrlClose = this.el.querySelector( 'section.slideshow > nav > span.nav-close' );
// инициализация сетки masonry
this._initMasonry();
// инициализация событий
this._initEvents();
};

    CBPGridGallery.prototype._initMasonry = function() {
var grid = this.grid;
imagesLoaded( grid, function() {
new Masonry( grid, {
itemSelector: 'li',
columnWidth: grid.querySelector( '.grid-sizer' )
});
});
};

CBPGridGallery.prototype._initEvents = function() {
        var self = this;

        // открытие слайд-шоу
this.gridItems.forEach( function( item, idx ) {
item.addEventListener( 'click', function() {
self._openSlideshow( idx );
} );
} );

        // элементы управления
this.ctrlPrev.addEventListener( 'click', function() { self._navigate( 'prev' ); } );
this.ctrlNext.addEventListener( 'click', function() { self._navigate( 'next' ); } );
this.ctrlClose.addEventListener( 'click', function() { self._closeSlideshow(); } );

        // отслеживание изменения размеров окна
window.addEventListener( 'resize', function() { self._resizeHandler(); } );

        // события навигации через клавиши
document.addEventListener( 'keydown', function( ev ) {
if ( self.isSlideshowVisible ) {
var keyCode = ev.keyCode || ev.which;

                switch (keyCode) {
case 37:
self._navigate( 'prev' );
break;
case 39:
self._navigate( 'next' );
break;
case 27:
self._closeSlideshow();
break;
}
}
} );

        // устраняем прокрутку если слайд-шоу активировано
window.addEventListener( 'scroll', function() {
if ( self.isSlideshowVisible ) {
window.scrollTo( self.scrollPosition ? self.scrollPosition.x : 0, self.scrollPosition ? self.scrollPosition.y : 0 );
}
else {
self.scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
}
});
};

    CBPGridGallery.prototype._openSlideshow = function( pos ) {
this.isSlideshowVisible = true;
this.current = pos;

        classie.addClass( this.el, 'slideshow-open' );

        /* позиционируем слайды */

        // определяем видимые элементы (текущий, следующий и предыдущий)
this._setViewportItems();

        // добавление классов "current" и "show" к текущему элементу currentItem
classie.addClass( this.currentItem, 'current' );
classie.addClass( this.currentItem, 'show' );

        // добавление класса show следующему и предыдущему элементам
// позиционируем предыдущий слайд слева, следующий справа
if( this.prevItem ) {
classie.addClass( this.prevItem, 'show' );
var translateVal = Number( -1 * ( getViewportW() / 2 + this.prevItem.offsetWidth / 2 ) );
setTransform( this.prevItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
if( this.nextItem ) {
classie.addClass( this.nextItem, 'show' );
var translateVal = Number( getViewportW() / 2 + this.nextItem.offsetWidth / 2 );
setTransform( this.nextItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
};

    CBPGridGallery.prototype._navigate = function( dir ) {
if( this.isAnimating ) return;
if( dir === 'next' && this.current === this.itemsCount - 1 ||  dir === 'prev' && this.current === 0  ) {
this._closeSlideshow();
return;
}

        this.isAnimating = true;

        // сброс состояния галереи
this._setViewportItems();

        var self = this,
itemWidth = this.currentItem.offsetWidth,
// позиции для текущего и последующих элементов
transformLeftStr = support.support3d ? 'translate3d(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(-' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
transformRightStr = support.support3d ? 'translate3d(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px, 0, -150px)' : 'translate(' + Number( getViewportW() / 2 + itemWidth / 2 ) + 'px)',
transformCenterStr = '', transformOutStr, transformIncomingStr,
// входящий элемент
incomingItem;

        if( dir === 'next' ) {
transformOutStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
transformIncomingStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
}
else {
transformOutStr = support.support3d ? 'translate3d( ' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
transformIncomingStr = support.support3d ? 'translate3d( -' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px, 0, -150px )' : 'translate(-' + Number( (getViewportW() * 2) / 2 + itemWidth / 2 ) + 'px)';
}

        // убираем класс animatable с элемента сетки
classie.removeClass( self.slideshow, 'animatable' );

        if( dir === 'next' && this.current < this.itemsCount - 2 || dir === 'prev' && this.current > 1 ) {
// входящий элемент!
incomingItem = this.slideshowItems[ dir === 'next' ? this.current + 2 : this.current - 2 ];
setTransform( incomingItem, transformIncomingStr );
classie.addClass( incomingItem, 'show' );
}

        var slide = function() {
// добавление класса animatable к элементу галереи
classie.addClass( self.slideshow, 'animatable' );

            // элементы наложения:
classie.removeClass( self.currentItem, 'current' );
var nextCurrent = dir === 'next' ? self.nextItem : self.prevItem;
classie.addClass( nextCurrent, 'current' );

            setTransform( self.currentItem, dir === 'next' ? transformLeftStr : transformRightStr );

            if( self.nextItem ) {
setTransform( self.nextItem, dir === 'next' ? transformCenterStr : transformOutStr );
}

            if( self.prevItem ) {
setTransform( self.prevItem, dir === 'next' ? transformOutStr : transformCenterStr );
}

            if( incomingItem ) {
setTransform( incomingItem, dir === 'next' ? transformRightStr : transformLeftStr );
}

            var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName.indexOf( 'transform' ) === -1 ) return false;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}

                if( self.prevItem && dir === 'next' ) {
classie.removeClass( self.prevItem, 'show' );
}
else if( self.nextItem && dir === 'prev' ) {
classie.removeClass( self.nextItem, 'show' );
}

                if( dir === 'next' ) {
self.prevItem = self.currentItem;
self.currentItem = self.nextItem;
if( incomingItem ) {
self.nextItem = incomingItem;
}
}
else {
self.nextItem = self.currentItem;
self.currentItem = self.prevItem;
if( incomingItem ) {
self.prevItem = incomingItem;
}
}

                self.current = dir === 'next' ? self.current + 1 : self.current - 1;
self.isAnimating = false;
};

            if( support.transitions ) {
self.currentItem.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
};

        setTimeout( slide, 25 );
}

    CBPGridGallery.prototype._closeSlideshow = function( pos ) {
// убираем класс slideshow-open с элемента галереи
classie.removeClass( this.el, 'slideshow-open' );
// убираем класс animatable с элемента галереи
classie.removeClass( this.slideshow, 'animatable' );

        var self = this,
onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.target.tagName.toLowerCase() !== 'ul' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
// убираем классы show и current с элементов слайдшоу
classie.removeClass( self.currentItem, 'current' );
classie.removeClass( self.currentItem, 'show' );

                if( self.prevItem ) {
classie.removeClass( self.prevItem, 'show' );
}
if( self.nextItem ) {
classie.removeClass( self.nextItem, 'show' );
}

                // останавливаем преобразование всех элементов
self.slideshowItems.forEach( function( item ) { setTransform( item, '' ); } );

                self.isSlideshowVisible = false;
};

        if( support.transitions ) {
this.el.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
};

    CBPGridGallery.prototype._setViewportItems = function() {
this.currentItem = null;
this.prevItem = null;
this.nextItem = null;

        if( this.current > 0 ) {
this.prevItem = this.slideshowItems[ this.current - 1 ];
}
if( this.current < this.itemsCount - 1 ) {
this.nextItem = this.slideshowItems[ this.current + 1 ];
}
this.currentItem = this.slideshowItems[ this.current ];
}

    // взято с https://github.com/desandro/vanilla-masonry/blob/master/masonry.js
CBPGridGallery.prototype._resizeHandler = function() {
var self = this;
function delayed() {
self._resize();
self._resizeTimeout = null;
}
if ( this._resizeTimeout ) {
clearTimeout( this._resizeTimeout );
}
this._resizeTimeout = setTimeout( delayed, 50 );
}

    CBPGridGallery.prototype._resize = function() {
if ( this.isSlideshowVisible ) {
// обновление ширины
if( this.prevItem ) {
var translateVal = Number( -1 * ( getViewportW() / 2 + this.prevItem.offsetWidth / 2 ) );
setTransform( this.prevItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
if( this.nextItem ) {
var translateVal = Number( getViewportW() / 2 + this.nextItem.offsetWidth / 2 );
setTransform( this.nextItem, support.support3d ? 'translate3d(' + translateVal + 'px, 0, -150px)' : 'translate(' + translateVal + 'px)' );
}
}
}

    // добавление пространства имён
window.CBPGridGallery = CBPGridGallery;

})( window );

www.rd.uz

Bu dars ruseller.com    sayti kamandasi  tomonidan toyyorlangan

Dars manbai: http://tympanus.net/codrops/2014/03/21/google-grid-gallery/

2146 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений