I have an image in a WordPress site that is positioned (absolute) to layer over a background video and under a text block (also position absolute). When a user scrolls down the page, I need the image to scale to 0 down to the bottom left corner. At the same time, a similar image appears in my navigation bar which is anchored to the bottom of the browser window and appears upon scroll. That effect currently works properly. The site is done in Divi and the image in question is a full-width image module. Everything I've tried within Divi's Scroll Effects has not yielded the proper effect. You can preview here: https://modusai.wpengine.com
To accomplish the desired effect in Divi - I started with a Fullwidth Header section. In the Fullwidth Header module, I uploaded and added a video for the background. In the same section (yes, you can add more than one module to a Fullwidth section), I added a Fullwidth image and another Fullwidth Header. Both of those two modules are set to Absolute position (bottom left and center, respectively), with z-indexes of 299 and 499 respectively, to achieve the layered effect I needed.
Then, in the Fullwidth Image module, I enabled the Vertical Motion, Horizontal Motion, and Scaling Up and Down effects. Those settings are:
Vertical Motion: 18% / 48% / 78% and 0 / 7 / 15
Horizontal Motion: 18% / 48% / 78% and 0 / -7 / -15
Scaling: 18% / 48% / 78% and 100% / 50% / 0%
All three have the Motion Effect Trigger set to "Bottom of Element"
The sample is currently at https://modusai.wpengine.com/ If you have any questions, ping me!
Related
I'm trying to design a responsive UI for my game.
I'd like that UI elements are scaled when screen resolution is below a certain threshold and repositioned otherwise.
Let's see it in an example.
I assume that the resolution of 1600 x 900 is the one below which UI elements must be scaled down keeping their aspect ratio.
In the following images, you can see the size that the red and the green panels should take at different resolutions (1600 x 900 in the former, 1280 x 720 in the latter).
On the contrary, when the screen resolution is greater than 1600 x 900 the panels should be simply reposed, without being scaled.
You can see an example, for a resolution of 1920 x 1080, in the following image.
I've been able to realize both logics, but not at the same time.
I've followed this article for repos logic (key point is to have a max size for panels) and Unity UI system tutorial for the scaling logic.
You could have 2 sets of prefab, one for each version and then swap them as needed depending on resolution.
This could be implemented by always having both canvases on the screen but only having the one shown that is supposed to be active in the current screen resolution.
In PowerPoint 2016 I have two histograms: one at 52% and the other at 48%. The last one is displayed half the size of the other one, but I want them both to display the correct size (i.e. one of them 52% of the total height and the other 48% of the total height).
I'm using Zurb Foundation 5.5.3 with CSS (and do not wish to use SASS). I'm running Windows XP and if needed have Windows 7.
I have images with the following wxh sizes JPEGs out of the camera:
5472x3080
5312x2988
5435x3750
5760x3840
5750x3501
6016x4016
4320x3240
and more sizes....
To what width and height should I resize these content images to get a better page load speed (I'm scoring under 40 in https://www.dropbox.com/s/343u2ksehlbcete/Screenshot%202016-05-20%2016.34.50.png?dl=0 but still maintain quality images where some will be used to fill the whole 12 columns on all screens (class=large-12 columns), and some just 4 columns (large-4 columns)
The following screenshot taken from http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html from talks about sizes 641px for medium, 641px, 1024px for medium-only and for large 1025px and large-only 1025px, 1440px and x-large 1441px, x-large only 1441px, 1920px and xx-large 1921px...
https://www.dropbox.com/s/kf8j6xgd9qmtcgm/Screenshot%202016-05-20%2016.27.09.png?dl=0
I'm confused! I thought that 12 columns equals 1000px (62.5rem), therefore I'd think that the max width of my images for large-12 columns would be 1000px which I'd need to resize while maintaining the same aspect ratio and logically a large-6 column would be half of that width or 500px and an image for 4-column would be 250px wide. Also I read that there's a margin of 30px so I don't know if for large the image should be 1000px or 970px ?
I'd appreciate a confirmation and also to know if I can use Photoshop and create some action batch this resize or if it's better to use Gulp (which I've never used before).
Any help would be much appreciated!
It depends how you are using the images, if you have a full width row or a background image this will depend on the screen size of the device. Now a days some large screen devices are becoming popular like 1920x1080 and 2560x1440.
If you are having the images within the grid, if the row size is 1000px then the max size of images should be 1000px, if you want to support retina devices you can have max 2000px. BTW the common grid size is either 1200px or 1280px nowdays.
You will need higher resolution images only if you will have full width rows or full with background images, else you can have max size that of the row width.
I think using gulp would be lot better as it would be more automatic than using Photoshop actions.
here is gulp plugin for generating multiple images https://github.com/mahnunchik/gulp-responsive
I want to have 3 ImageSliders stack on top of each other, not overlay, like 3 sliders one on top, one in the middle, and one at the bottom. When you tap on one, it resizes to 30% larger in Height and Width, once you tap another one, the current one resizes back to 30% smaller and the new one which got tapped enlarges 30% in size. How can I make such thing in Swift ? I tried to google some solution but haven't find any tutorial or answer.
It's a bit complicated, but you can experiment with the following API which can be used on any view, including the UISlider.
imageView.transform = CGAffineTransformMakeScale(1.3, 1.3)
This can also be animated by including it into a UIView animation block (see documentation about animateWithDuration).
With the new screen resolution and aspect ratio of iPhone 5 it seems there are two approaches to take advantage of the new screen real estate when handling images that are full screen (or mostly full screen) images:
Include two images bg#2x.png and bg-h568#2x.png and check the device's main screen bounds to figure out which to load.
Only include the one file but make it the full iPhone 5 resolution
(There are other methods also: stretching, tiling, and / or drawing with Quartz.)
Both of these options have drawbacks:
Including two files is going to increase your app's bundle size
Loading a iPhone 5 retina image on a 4 will clip the image data when displayed on screen, but will still consume the same amount of memory resources
I am particularly interested in understanding the details of the second drawback better.
I am thinking it would save the app bundle (and my designer) if I could use this consolidating images idea further...
Let's say I have an image that take up 320pt x 480pt in portrait and 480pt x 320pt in landscape (width x height).
(EDIT: Initially I hadn't considered a couple of other important tidbits. For sake of completeness, I'm including those thoughts here)
If we create a single image file at a 480pt x 480pt resolution instead of landscape and portrait files, it would prevent the app bundle from having two files that which each contain 320pt x 320pt area of duplicate image data. However, this large square image would include four 80pt x 80pt quadrants in the corners that won't be seen. All things equal, we should still have 20% less image data in the app bundle.
Having re-read Bill's "iBooks Author Experiment", the memory requirements are very easy to figure out:
Landscape or Portrait: 640 * 960 * 4 = 2,457,600
Large Square: 960 * 960 * 4 = 3,686,400
The memory required to load the large square is 50% more then loading the image sized correctly for the screen. Clearly the savings in the app bundle don't measure up to this hit on resources!
But, what about extending this to a giant square that would encompass iPhone 5 and iPhone 4 - 568pt x 568pt? Instead of four files (iP4 landscape, iP4 portrait, iP5 landscape, iP5 portrait), there would be only one file in the app bundle (giant square). The savings could be about 60%.
What about the resources hit?
iPhone 5 Landscape or Portrait: 1136 * 640 * 4 = 2,908,160
Giant Square: 1136 * 1136 * 4 = 5,161,984
That's 110% more memory for iPhone 4, and 77.5% more memory for iPhone 5.
My original question was roughly two parts: 1. Do I understand this correctly and 2. is this tradeoff a wise one to make.
I hope my edits (spurred by Bill's answer) show that I do understand this stuff now. And, if the new found knowledge is correct, then #2 pretty much answers itself. :-)
Generally you get it.
Assuming that you have the big square image and it's some kind of tiled pattern (linen etc) then you could use ImageIO to load the cropped image at the size you need which would use some extra memory decompressing the image but once done it would consume only what is needed to fill the background.
I would suggest against scaling the image.
On the flip side though, shipping an app with 3 images (foo, foo#2x and foo-h568#2x) instead of 1 makes way more sense. The only way I'd say you should go with one image is if you are close to the 3G/LTE download size of (I think) 50MB.