Is it possible to change an object (e.g. Logo) at scrollposition with Sparkle and not using external Code?
I was playing around with Pop-up’s (“open on scroll”) but i cant’t get the effect i want.
I try to explain:
At some point the background changes from white to black.
The black logo should change to a white version if the background changes.
The fact i can’t find a Sparkle built-in solution i code it (HTML/CSS).
Please see the short video that make things clear: https://youtu.be/ySb2UYlyU3I
if anyone knows a way to solve it natively, let me know.
In fact i have two .svg-files (black & white) of the object.
And the object sits in a popup (fixed in window), left oriented (30 px) and top oriented (30 px).
The object have to changed at scrollposition over 9000 pixels.
It is nothing what the animation feature can do. As much as i know…
its kind of a gimmick, but you can try: you set up both the logos in their respective places (balck on white and white on black), and then you applky the opacity effect to dim the first one and the same opacity effect to show the other
other way is to have them stacked on a fixed group and make the black one push the white one off the screen. this would need a reorganization of layers, but should work the way you’re wanting it to… but both ways are gimmicks as Sparkle doesn’t do that what you want automatically (a pet peeve of mine, too). Also theres the Blending mode, but the object needs to be an image (you can try to blend the image with the background in reverse or invert the color, should work too if you manage)
All these things will only work, if the object is within the canvas limits (e.g. Desktop > 1200 px).
But i’m using Pop-up’s. As descriped they are 30 px from left viewport and 30 px from top viewport.
There is no need to use pop-up windows to fix images outside the canvas. This is actually difficult to achieve with pop-up windows. Here are two examples of solutions that might suit you.
- Page 1:
Creation of two groups that overlap when scrolling. “box for group” is there only to make the group creation possible, it is just a transparent box.
The “image box” boxes are full-width boxes and contain the logos’ images as a background. The box’s background (the logo) must be positioned on the left.
I also added an animation for the display of the “group logo white” for a cleaner effect, but this is not mandatory.
- Page 2:
Embedding logos directly into layout blocks, positioned at the top left and embedded in the window. This method does what you wanted to do visually, but it has a drawback: the image size will remain the same on all devices with automatic scaling. If your site is adapted to multiple devices and you want the logo to display in multiple sizes, you will need to place the logos in boxes rather than in layout blocks and create a box per device with the appropriate logo size. It might also be necessary to rework the logo images to add margins.
SVG files will remain at the size they are placed on the Sparkle Canvas - they work perfectly well. Furthermore, if you have SVG’s of the logo, you can use just one of them (black or white), then apply a colour overlay to create the other variant - one black and one white - no need to have two separate files.
Indeed, for the example on page 2, it will be mandatory to use a JPG or PNG image, but the example on page 1 will also work with an SVG image. If you have checked “Stretch” and selected “Fit” in the options of the wide box containing the image, it will adjust to the height of the box, even in SVG.
The thing is you only get the option to fit or fill if you add he SVG to a box. If you want it at a fixed size, or if you want to scale it manually, just drag the SVG onto the canvas. This will remove the fill/fit options. To resize, just grab the corner handles and drag. Place the SVG anywhere you want on the canvas and it will stay there at the same size you set it.
