Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update the blend-photogallery demo to match the current browser behavior #27

Merged
merged 1 commit into from

2 participants

@Mire

No description provided.

@oslego oslego merged commit f7337cf into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
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');
Something went wrong with that request. Please try again.