CodePen - Door opening animations with CSS

commit b1def9a5e5e58fc251f3f68ed33d32da98157886 Author: Omar Date: Wed Mar 18 00:11:05 2020 +1100 Initial commit diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.markdown b/README.markdown new file mode 100644 index 0000000..a025fd6 --- /dev/null +++ b/README.markdown @@ -0,0 +1,9 @@ +# 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 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3542b37 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# door-opening-animations-with-css-kso diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..d9731c0 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,25 @@ + + + + + CodePen - Door opening animations with CSS + + + + + +

+ + + + + + + diff --git a/dist/script.js b/dist/script.js new file mode 100644 index 0000000..dd18184 --- /dev/null +++ b/dist/script.js @@ -0,0 +1,15 @@ +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'); +*/ +}); \ No newline at end of file diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..22b68ce --- /dev/null +++ b/dist/style.css @@ -0,0 +1,114 @@ +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); +} \ No newline at end of file diff --git a/license.txt b/license.txt new file mode 100644 index 0000000..224e18f --- /dev/null +++ b/license.txt @@ -0,0 +1,9 @@ +Copyright (c) 2020 by omar (https://codepen.io/thecoderpenguin/pen/xxGzxKW) +Fork of an original work Door opening animations with CSS (https://codepen.io/adamsullovey/pen/epWzwX + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..48dcba7 --- /dev/null +++ b/src/index.html @@ -0,0 +1,10 @@ +

+ + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..04cecfe --- /dev/null +++ b/src/script.js @@ -0,0 +1,15 @@ +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'); +*/ +}); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..a41299d --- /dev/null +++ b/src/style.css @@ -0,0 +1,99 @@ +body { + font-family:sans-serif; +} +.container { + background-color: black; + 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); + transform-style: preserve-3d; + transition: transform .5s, box-shadow .5s; + transform-origin: right center; +} + +.swing figure { + margin: 0; + display: block; + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.door .front { + background-color:green; + width:240px; + height:390px; +} + +.door .back { +/* background-color: blue; */ + width:240px; + height:390px; +} + +.swing .back { + transform: rotateY( 180deg); +} + +.swing:hover { + outline:3px solid white; +} + +.swing.flipped { + 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; + transition: transform .5s; + transition: box-shadow .5s; + transform:scale3d(0,0,0); +} + +.popover.open { + transform:scale3d(1,1,1); +} \ No newline at end of file