Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #27 from Mire/compositing_demo_update

Update the blend-photogallery demo to match the current browser behavior
  • Loading branch information...
commit f7337cf29f3cac96352451073ead71c3da875f7e 2 parents 2519e08 + 9674f64
@oslego oslego authored
View
49 demos/compositing/blend-photogallery/css/style.css
@@ -3,7 +3,9 @@ body{
padding: 0px;
background: black;
background-image: -webkit-radial-gradient(circle, #000, #333);
+ background-image: -moz-radial-gradient(circle, #000, #333);
-webkit-perspective: 1000;
+ -moz-perspective: 1000;
}
h1, h2{
@@ -31,6 +33,8 @@ section{
background-size: cover;
-webkit-transform: translateZ(-1000px) rotateX(90deg);
-webkit-transition: -webkit-transform 1s ease-in;
+ -moz-transform: translateZ(-1000px) rotateX(90deg);
+ -moz-transition: -moz-transform 1s ease-in;
}
#container{
@@ -41,12 +45,15 @@ section{
z-index: 1;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
+ -moz-perspective: 1000;
+ -moz-transform-style: preserve-3d;
}
#page1{
display: block;
background-image: url(../img/photo/yellowstone1.png);
-webkit-transform: translateZ(0px) rotateX(0deg);
+ -moz-transform: translateZ(0px) rotateX(0deg);
}
#page2{
@@ -73,40 +80,39 @@ section{
text-align: center;
z-index: 400;
-webkit-transition: top 1s ease-in;
+ -moz-transition: top 1s ease-in;
}
-#overlay{
+#overlay-content {
position: fixed;
- height: 220px;
width: 100%;
- top: 50%;
- margin-top: -150px;
- z-index: 2;
- -webkit-transition: all 1s;
-}
-
-#overlay-content{
- position: absolute;
- width: 100%;
- /* height: 100%; */
+ height: 200px;
left: 0px;
padding: 30px 0px;
font-size: 30px;
text-align: center;
color: white;
+ top: 50%;
+ z-index: 2;
+ margin-top: -150px;
+ -webkit-transition: all 1s;
+ -moz-transition: all 1s;
}
-#overlay-bg{
- position: absolute;
+#overlay-bg {
+ position: fixed;
width: 100%;
- height: 100%;
+ height: 200px;
left: 0px;
background: #ba3214;
pointer-events: none;
- -webkit-transition: background 1s;
- -webkit-blend-mode: multiply;
+ z-index: 2;
+ top: 50%;
+ margin-top: -150px;
+ -webkit-transition: all 1s;
+ -moz-transition: all 1s;
+ mix-blend-mode: multiply;
}
-
#down-btn{
position: fixed;
top: 5px;
@@ -143,6 +149,7 @@ section{
.arrow-btn{
opacity: 1;
-webkit-transition: opacity .2s ease-in;
+ -moz-transition: opacity .2s ease-in;
}
.arrow-btn:hover{
@@ -173,12 +180,13 @@ section{
cursor: pointer;
opacity: .5;
-webkit-transition: all .2s;
- -webkit-blend-mode: screen;
+ -moz-transition: all .2s;
+ mix-blend-mode: screen;
}
.grid-blend:hover{
opacity: .8;
- /* -webkit-blend-mode: overlay; */
+ /* mix-blend-mode: overlay; */
}
#blinder{
@@ -191,4 +199,5 @@ section{
cursor: pointer;
z-index: 300;
-webkit-transition: opacity .2s;
+ -moz-transition: opacity .2s;
}
View
19 demos/compositing/blend-photogallery/index.html
@@ -1,6 +1,6 @@
<!--
Copyright 2012 Adobe Systems, Incorporated
-This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License http://creativecommons.org/licenses/by-nc-sa/3.0/ .
+This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License http://creativecommons.org/licenses/by-nc-sa/3.0/ .
Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html .
-->
@@ -9,7 +9,6 @@
<title>Blend Demo</title>
<script src="http://use.edgefonts.net/italiana:n4.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
- <script type="text/javascript" src="js/BrowserDetector.js"></script>
<script src="js/main.js"></script>
</head>
<body>
@@ -32,15 +31,13 @@
<div id="blinder"></div>
- <div id="overlay">
- <div id="overlay-bg"></div>
- <div id="overlay-content">
- A Modern Look at Classic
- <hr/>
- <h1>BLEND MODES</h1>
- <hr/>
- Changing How Elements Relate Visually
- </div>
+ <div id="overlay-bg"></div>
+ <div id="overlay-content">
+ A Modern Look at Classic
+ <hr/>
+ <h1>BLEND MODES</h1>
+ <hr/>
+ Changing How Elements Relate Visually
</div>
<div id="container">
View
93 demos/compositing/blend-photogallery/js/main.js
@@ -7,6 +7,7 @@ var currentpage = 1,
currentElement,
nextElement,
overlayBg,
+ overlayCntn,
overlay,
grid,
blinder,
@@ -79,9 +80,13 @@ function populateGrid() {
}
function resetOverlay() {
- overlay.style.height = window.innerHeight + 'px';
- overlay.style.width = window.innerWidth + 'px';
- overlay.style.marginTop = - (window.innerHeight / 2) + 'px';
+ overlayBg.style.height = window.innerHeight + 'px';
+ overlayBg.style.width = window.innerWidth + 'px';
+ overlayBg.style.marginTop = - (window.innerHeight / 2) + 'px';
+
+ overlayCntn.style.height = window.innerHeight + 'px';
+ overlayCntn.style.width = window.innerWidth + 'px';
+ overlayCntn.style.marginTop = - (window.innerHeight / 2) + 'px';
}
/*
@@ -91,56 +96,87 @@ function handle_overlay_COMPLETE() {
switch (currentpage) {
case 1:
- overlay.style.width = '100%';
+ overlayBg.style.width = '100%';
+
+ overlayCntn.style.width = '100%';
break;
case 2:
- overlay.style.height = '100%';
- overlay.style.width = '100%';
- overlay.style.marginTop = '-50%';
+ overlayBg.style.height = '100%';
+ overlayBg.style.width = '100%';
+
+ overlayCntn.style.height = '100%';
+ overlayCntn.style.width = '100%';
break;
case 3:
- overlay.style.height = '100%';
- overlay.style.marginTop = '-50%';
+ overlayBg.style.height = '100%';
+
+ overlayCntn.style.height = '100%';
break;
case 4:
- overlay.style.height = '100%';
- overlay.style.width = '100%';
- overlay.style.marginTop = '-50%';
+ overlayBg.style.height = '100%';
+ overlayBg.style.width = '100%';
+
+ overlayCntn.style.height = '100%';
+ overlayCntn.style.width = '100%';
break;
}
-
- overlay.removeEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+
+ overlayBg.removeEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.removeEventListener('transitionend', handle_overlay_COMPLETE);
+
+ overlayCntn.removeEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayCntn.removeEventListener('transitionend', handle_overlay_COMPLETE);
}
/*
* transition overlay to new values
*/
function updateOverlay() {
-
+
overlayBg.style.background = getOverlayColor();
resetOverlay();
if (currentpage === 2) {
- overlay.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('transitionend', handle_overlay_COMPLETE);
+
+ overlayCntn.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayCntn.addEventListener('transitionend', handle_overlay_COMPLETE);
} else if (currentpage === 3) {
-
+
setTimeout(function () {
- overlay.style.width = '220px';
- overlay.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.style.width = '220px';
+ overlayBg.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('transitionend', handle_overlay_COMPLETE);
+
+ overlayCntn.style.width = '220px';
+ overlayCntn.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayCntn.addEventListener('transitionend', handle_overlay_COMPLETE);
+
}, 10);
} else if (currentpage === 4) {
- overlay.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('transitionend', handle_overlay_COMPLETE);
+
+ overlayCntn.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayCntn.addEventListener('transitionend', handle_overlay_COMPLETE);
} else {
setTimeout(function () {
- overlay.style.height = '220px';
- overlay.style.marginTop = '-150px';
- overlay.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.style.height = '220px';
+ overlayBg.style.marginTop = '-150px';
+ overlayBg.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayBg.addEventListener('transitionend', handle_overlay_COMPLETE);
+
+ overlayCntn.style.height = '220px';
+ overlayCntn.style.marginTop = '-150px';
+ overlayCntn.addEventListener('webkitTransitionEnd', handle_overlay_COMPLETE);
+ overlayCntn.addEventListener('transitionend', handle_overlay_COMPLETE);
}, 10);
}
}
@@ -148,12 +184,14 @@ function updateOverlay() {
function handle_animIn_COMPLETE(e) {
animating = false;
nextElement.removeEventListener('webkitTransitionEnd', handle_animIn_COMPLETE, true);
+ nextElement.removeEventListener('transitionend', handle_animIn_COMPLETE, true);
updateOverlay();
}
function animIn() {
-
+
currentElement.removeEventListener('webkitTransitionEnd', animIn, true);
+ currentElement.removeEventListener('transitionend', animIn, true);
currentpage = nextPage;
nextElement = document.getElementById('page' + currentpage);
nextElement.style.display = 'block';
@@ -161,7 +199,9 @@ function animIn() {
setTimeout(function () {
nextElement.style.webkitTransform = 'translateZ(0px) rotateX(0deg)';
+ nextElement.style.MozTransform = 'translateZ(0px) rotateX(0deg)';
nextElement.addEventListener('webkitTransitionEnd', handle_animIn_COMPLETE, true);
+ nextElement.addEventListener('transitionend', handle_animIn_COMPLETE, true);
}, 10);
}
@@ -171,7 +211,9 @@ function gotoPage(newPage) {
currentElement = document.getElementById('page' + currentpage);
currentElement.style.webkitTransform = 'translateZ(-1000px) rotateX(90deg)';
+ currentElement.style.MozTransform = 'translateZ(-1000px) rotateX(90deg)';
currentElement.addEventListener('webkitTransitionEnd', animIn, true);
+ currentElement.addEventListener('transitionend', animIn, true);
}
function showGrid() {
@@ -201,7 +243,7 @@ function handle_gridItem_CLICK(e) {
}
function handle_document_KEY_PRESS(e) {
-
+
if (animating === false) {
var pageNumber;
@@ -250,6 +292,7 @@ function handle_rightBtn_CLICK(e) {
window.onload = function () {
overlayBg = document.getElementById('overlay-bg');
+ overlayCntn = document.getElementById('overlay-content');
overlay = document.getElementById('overlay');
container = document.getElementById('container');
closeBtn = document.getElementById('down-btn');
Please sign in to comment.
Something went wrong with that request. Please try again.