Loading:

NAJMĄDRZEJSZY PREZENT NA ŚWIECIE!🎁 / Tylko DZIŚ!

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.fsockopen 2.exec 3.end() 4.lcg_value 5.asoc() 6.iptcembed 7.ftp_size 8.ceil 9.ftp_fput 10.list()

56853.05

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:

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--;
});
});

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>