Deleted crap
This commit is contained in:
Omar
parent
b1def9a5e5
commit
aadc3d0c60
6 changed files with 2 additions and 166 deletions
|
|
@ -1,9 +0,0 @@
|
|||
# Door opening animations with CSS
|
||||
_A Pen created at CodePen.io. Original URL: [https://codepen.io/thecoderpenguin/pen/xxGzxKW](https://codepen.io/thecoderpenguin/pen/xxGzxKW).
|
||||
|
||||
Testing out animating opening doors on click using CSS animations. Cross browser testing results:
|
||||
|
||||
Chrome Desktop: great!
|
||||
IE 11: can do the rotating animation OK, but the door is the same on both sides
|
||||
Firefox: OK, some issues with overlapping doors that might be fixable with absolute positioning & z-indexes
|
||||
Safari iOS 8: great with prefixed CSS
|
||||
|
|
@ -1 +0,0 @@
|
|||
# door-opening-animations-with-css-kso
|
||||
25
dist/index.html
vendored
25
dist/index.html
vendored
|
|
@ -1,25 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CodePen - Door opening animations with CSS</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<section class="container group">
|
||||
<div class="doorFrame" id="c0">
|
||||
<div class="door swing">
|
||||
<figure class="front"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
|
||||
<figure class="back"><img src="http://www.sharecg.com/images/medium/11603.jpg"></figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="popover">Surprise!</div>
|
||||
<!-- partial -->
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
15
dist/script.js
vendored
15
dist/script.js
vendored
|
|
@ -1,15 +0,0 @@
|
|||
for (var i = 1; i < 3; i++) {
|
||||
$('#c0').clone().appendTo('.container').attr('id', 'c' + i);
|
||||
}
|
||||
$('.doorFrame').click(function(event){
|
||||
console.log('click');
|
||||
|
||||
var doorFrame = $(event.currentTarget)
|
||||
// open door
|
||||
doorFrame.find('.swing').toggleClass('flipped');
|
||||
|
||||
/*
|
||||
// move the overlay
|
||||
$('.popover').css('top', doorFrame.offset().top - 60 + "px").css('left', doorFrame.offset().left - 70 + "px").toggleClass('open');
|
||||
*/
|
||||
});
|
||||
114
dist/style.css
vendored
114
dist/style.css
vendored
|
|
@ -1,114 +0,0 @@
|
|||
body {
|
||||
font-family:sans-serif;
|
||||
}
|
||||
.container {
|
||||
background-color: black;
|
||||
-webkit-perspective: 5000px;
|
||||
perspective: 5000px;
|
||||
margin: 110px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.doorFrame {
|
||||
width: 240px;
|
||||
height: 390px;
|
||||
margin: 10px;
|
||||
float: left;
|
||||
/* background-color:blue; */
|
||||
background-image: url("https://scontent-syd2-1.xx.fbcdn.net/v/t1.15752-0/p280x280/90203443_1097525597268465_5594717321387048960_n.png?_nc_cat=105&_nc_sid=b96e70&_nc_ohc=af1Yj3DdYU8AX8eZLiv&_nc_ht=scontent-syd2-1.xx&oh=26059dd934ec8a829f7fa989adec4834&oe=5E95783F");
|
||||
color:#fff;
|
||||
padding:5px 5px 2px 5px;
|
||||
}
|
||||
|
||||
.door {
|
||||
width:100%;
|
||||
height:100%;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.door img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.group:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.swing {
|
||||
cursor:pointer;
|
||||
box-shadow: 0 0 0 0 rgba(0,0,0,0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transition: box-shadow .5s, -webkit-transform .5s;
|
||||
transition: box-shadow .5s, -webkit-transform .5s;
|
||||
transition: transform .5s, box-shadow .5s;
|
||||
transition: transform .5s, box-shadow .5s, -webkit-transform .5s;
|
||||
-webkit-transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.swing figure {
|
||||
margin: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.door .front {
|
||||
background-color:green;
|
||||
width:240px;
|
||||
height:390px;
|
||||
}
|
||||
|
||||
.door .back {
|
||||
/* background-color: blue; */
|
||||
width:240px;
|
||||
height:390px;
|
||||
}
|
||||
|
||||
.swing .back {
|
||||
-webkit-transform: rotateY( 180deg);
|
||||
transform: rotateY( 180deg);
|
||||
}
|
||||
|
||||
.swing:hover {
|
||||
outline:3px solid white;
|
||||
}
|
||||
|
||||
.swing.flipped {
|
||||
-webkit-transform: rotateY( 120deg);
|
||||
transform: rotateY( 120deg);
|
||||
box-shadow: 0 0 15px 1px rgba(0,0,0,.75);
|
||||
}
|
||||
|
||||
.popover {
|
||||
position:absolute;
|
||||
border:1px solid red;
|
||||
width:200px;
|
||||
height:200px;
|
||||
background-color:#fff;
|
||||
-webkit-transition: -webkit-transform .5s;
|
||||
transition: -webkit-transform .5s;
|
||||
transition: transform .5s;
|
||||
transition: transform .5s, -webkit-transform .5s;
|
||||
-webkit-transition: box-shadow .5s;
|
||||
transition: box-shadow .5s;
|
||||
-webkit-transform:scale3d(0,0,0);
|
||||
transform:scale3d(0,0,0);
|
||||
}
|
||||
|
||||
.popover.open {
|
||||
-webkit-transform:scale3d(1,1,1);
|
||||
transform:scale3d(1,1,1);
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ body {
|
|||
box-shadow: 0 0 0 0 rgba(0,0,0,0);
|
||||
transform-style: preserve-3d;
|
||||
transition: transform .5s, box-shadow .5s;
|
||||
transform-origin: right center;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.swing figure {
|
||||
|
|
@ -95,5 +95,5 @@ body {
|
|||
}
|
||||
|
||||
.popover.open {
|
||||
transform:scale3d(1,1,1);
|
||||
transform:scale3d(1,1,1);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue