Not very GWD native, but the easiest way to solve this. Window.addEventListener("resize", arguments.callee) if stage size changes, call this function again V.setInlineStyle("square", "transform-origin:0 0 top: " + ((p.offsetHeight - sH) / 2) + "px left: " + ((p.offsetWidth - sW) / 2) + "px transform: scale3D(" + factor + "," + factor + "," + factor + ")") SH = s.offsetHeight * factor /* calculate new safe space height */ SW = s.offsetWidth * factor, /* calculate new safe space width */ P = s.parentNode, /* shortcut for stage */ĭW = p.offsetWidth / s.offsetWidth, /* get difference of safe space width and stage width */ĭH = p.offsetHeight / s.offsetHeight, /* get difference of safe space height and stage height */įactor = (dW > dH ? dH : dW), /* find max scale size for perfect fit*/ S = v.getElementById("safespace"), /* shortcut for our safe space */
#GOOGLE WEB DESIGNER CHANGE BACKGROUND COLOR CODE#
The easiest solution is creating a div container with the tag tool, name it „safespace“ and adding the following JavaScript code on „Ready to present page“: var v =, /* just a shortcut */ Safe Spaces – Centered Interactive Background without images (JavaScript) The rest of the screen (outside of the square) can be used for decoration, the user interface, the scoreboard, the background images etc. create small games, where we know, that the main part always has to be visible. We can fill in percentage based content and so e. So, what can we do now with this safe spaced square? This is not part of native Google Web Designer, but through CSS luckily available on any mobile Browser according to caniuse (except of Mobile Opera) and defines, that its height should have 100% viewport height. and the Media Rules will change into Landscape and Portrait rules.Īs we now want to change the landscape rules to keep the square always in its format, we select „Landscape rules“, turn back to the „Properties“ tab and do the following changes, either in the properties panel or directly in CSS: height: 100% įinally, we change to the „CSS“ tab and add an additional property „width: 100 vh„. Go to „Padding“ and set padding-bottom: 100%įor landscape mode, it’s getting a little bit more complicated: We’ll need some CSS „hacks“ to help here, but luckily Google Web Designer allows responsive layouts, so we go to the Responsive tab and click in the right icon next to the „ Media Rules“ menu.Create a square with the following display options:.In this example, we want to have a square, which will always be fully displayed in its maximum size dependent of the screen format in the top left corner. for having interactive content? Then it’s getting slightly complicated. Safe Spaces – Centered Interactive Background without images (CSS)īut what happens, if you need a specific space with content in it, that always needs to be displayed on the canvas, independent from its size, e. Instead of just showing the center, the focal point forces the image to show the selected center point, to guarantee it is visible in any canvas size.
With this option, Google Web Designer automatically scales the image to cover the whole canvas while remaining its aspect ratio.
With the new „focal point“ function in Google Web Designer, you just drop an image on stage, make it „Crop image to fill“ in „Image > Scaling“ and so unlock the focal point option.
0 kommentar(er)
