Loading:

Książka Zend Framework 3. Poradnik Programisty.

jQuery - opóźnienie na css (delay on css)

Problem:

Wykonać kolejno na warstwach w kontenerze obrócenie o 180 stopni pokazując obrazek raz z jednej strony raz z drugiej.

 

Rozwiązanie:

Na początku tworzymy strukrę HTML i umieszczamy w niej następujący kontener z naszymi warstwami do obracania:

<div>
<div class="container">
 <div class="sub_container">
  <div class="card shadow">
    <div class="front face">
      <img src="1-front.jpg" width="250" height="250" />
    </div>
    <div class="back face">
      <img src="1-back.jpg" width="250" height="250" />
    </div>
  </div>
 </div>
</div>
<div class="container">
 <div class="sub_container">
  <div class="card shadow">
    <div class="front face">
      <img src="1-front.jpg" width="250" height="250" />
    </div>
    <div class="back face">
      <img src="1-back.jpg" width="250" height="250" />
    </div>
  </div>
 </div>
</div> 
<div class="container">
 <div class="sub_container">
  <div class="card shadow">
    <div class="front face">
      <img src="1-front.jpg" width="250" height="250" />
    </div>
    <div class="back face">
      <img src="1-back.jpg" width="250" height="250" />
    </div>
  </div>
 </div>
</div> 
</div>

 

Następnie dodajemy CSS

.container{
display:inline-block;
margin-bottom:-5px;
}
.sub_container {
position: relative;
z-index: 1;
-webkit-perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.3s linear;                     
}
.sub_container:hover #f1_card {
-webkit-transform: rotateY(180deg);                      
-webkit-box-shadow: -5px 5px 5px #aaa;                   
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.back {
display: block;                  
-webkit-box-sizing: border-box;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;                  
}


Kod javascript do wykonania obrócenia kolejno każdego z elementów z okreslonym opoznieniem wygląda następująco:

$(function(){
 var elements = $(".sub_container .card").length;
 var multiplier = 0.05;
 var plus = 0.3;
 $( ".sub_container .card" ).each(function() {
  width = $(this).find('img').attr('width');
  height = $(this).find('img').attr('height');
  $(this).parent().css('width', width);
  $(this).parent().css('height', height);
  formula = elements * multiplier + plus;
  if (action=='back') $(this).delay( formula ).queue( function(){ $(this).css( '-webkit-transform','rotateY(180deg)' ); $(this).dequeue(); } );
  else if (action=='front') $(this).delay( formula ).queue( function(){ $(this).css( '-webkit-transform','' ); $(this).dequeue(); } );
  elements--;
 });
});



Napisz Artykuł

Listing

Listing przedstawia gotowy kod na prezentacje iPad która obraca obrazki wykorzystując do wykrycia ruchu akcelerometr.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name = "viewport" content = "initial-scale = 1.0" width = "device-width" user-scalable= "no" />
        <title>Unbenanntes Dokument</title>
                <style>
                        .container{
                                display:inline-block;
                                margin-bottom:-5px;
                        }
                        .sub_container {
                          position: relative;
                          z-index: 1;
                          -webkit-perspective: 1000px;
                        }
                        .card {
                          width: 100%;
                          height: 100%;
                          -webkit-transform-style: preserve-3d;
                          -webkit-transition: all 0.3s linear;                   
                        }
                        .sub_container:hover #f1_card {
                          -webkit-transform: rotateY(180deg);                    
                          -webkit-box-shadow: -5px 5px 5px #aaa;                         
                        }
                        .face {
                          position: absolute;
                          width: 100%;
                          height: 100%;
                          -webkit-backface-visibility: hidden;
                          -moz-backface-visibility: hidden;
                          -o-backface-visibility: hidden;
                          backface-visibility: hidden;
                        }
                        .face.back {
                          display: block;                        
                          -webkit-box-sizing: border-box;
                          -webkit-transform: rotateY(180deg);
                          -moz-transform: rotateY(180deg);
                          -o-transform: rotateY(180deg);
                          transform: rotateY(180deg);
                          -o-box-sizing: border-box;
                          -moz-box-sizing: border-box;
                          box-sizing: border-box;                        
                        }
                </style>
                <script src='jquery-1.9.1.min.js'></script>
                <script>
                        var accelerationX = 0;
                        var position = 'front';
                        window.ondevicemotion = function(event) {
                                accelerationX = event.accelerationIncludingGravity.x;
                                if( accelerationX>2 && position == 'front' ){
                                        position = 'back';
                                        change( 'back' );
                                }
                                if( accelerationX<-2 && position == 'back' ){
                                        position = 'front';
                                        change( 'front' );                                     
                                }
                                $('h1').html( accelerationX+ ' - ' + position );
                        }
                       
                        $(function(){
                                $( ".sub_container .card" ).each(function(index) {
                                        width = $(this).find('img').attr('width');
                                        height = $(this).find('img').attr('height');
                                        $(this).parent().css('width', width);
                                        $(this).parent().css('height', height);
                                });
                        });
                       
                        function change( action ){
                                var elements = $(".sub_container .card").length;
                                var multiplier = 0.05;
                                var plus = 0.3;
                                $( ".sub_container .card" ).each(function(index) {
                                        formula = elements * multiplier + plus;
                                        if (action=='back') $(this).delay( formula ).queue( function(){ $(this).css( '-webkit-transform','rotateY(180deg)' ); $(this).dequeue(); } );
                                        else if (action=='front') $(this).delay( formula ).queue( function(){ $(this).css( '-webkit-transform','' ); $(this).dequeue(); } );
                                        elements--;
                                });            
                        };
                       
                        function showBack( obj, formula ) {
                                obj.delay( formula ).queue( function(){ obj.css( '-webkit-transform','rotateY(180deg)' ) } );
                        }
                       
                        function showFront( obj, formula ) {
                                obj.delay( formula ).queue( function(){ obj.css( '-webkit-transform','rotateY(270deg)' ) } );
                        }                      
                       
                </script>
</head>
<body>
<h1></h1>
<div>
        <div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div><div class="container">
                <div class="sub_container">
                        <div class="card shadow">
                                <div class="front face">
                                  <img src="1-front.jpg" width="250" height="250" />
                                </div>
                                <div class="back face">
                                  <img src="1-back.jpg" width="250" height="250" />
                                </div>
                        </div>
                </div>
        </div>
</section>
</body>
</html>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=3&t=12890

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors