MULTIPLE BACKGROUNDS
Sliding Effects template with tons of options. Admix is a responsive stack that allows you to add a layer with CSS filters that will scroll over another layer with the same image. They're so easy to use and they can be quickly styled to match your own brand, using the Stack panel. Purchase includes a demonstration project file to show you how every example on this demo was created.
Enter the name for this tabbed section:
STACK INFO
This stack combines the power of the "Blending" and "CSS-filters" effects.
Multi Layer
Two Layers with interactive blending Mode and CSS filters and animated. Trigger effects by scroll or with mouse over. For Desktop screens there is an option to sticky the first layer, so you can slide the second layer over the main background. The two overlapping images will also be visible on mobile devices!Animations
This stack allows you to set more than one effect at the same time. Scroll and Blending effects can be combined in different ways. Start animation automatically or in view.Responsive
This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone.Dashboard
A dashboard is available in Edit Mode with basic settings, the settings changes are reflected in the UI. You Can show/hide the preview for BG images.Add Link to Stack
This Stack turns also any stack into a hover link. Add a link to the full banner.Simulator in Preview
The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and Viewport triggers.Hype BlendModes
This Stack include "Hype BlendModes" by MaxZieb; this extension offer support for blending images.Hype Pro
The HypePro based Stacks is the next generation of packages with original contents for RapidWeaver. All animations are designed exclusively for Stacks.Enter the name for this tabbed section:
GENERAL SETTING
Admix Stack Options
Template setting
Edit Mode Tools
- Hide/Show panel
- Hide/Show the BG preview
- Hide Stack Preview
- Hide/Show panel
- Hide/Show the BG preview
- Hide Stack Preview
Responsive setting
Scroll Button
+
Title Style
Background Layer 1
+ +
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL
- Drag image from resources panel or disk
- Load image from URL
Backgrounds 1 & 2 Setting
+
Blending Filters
& or =
Blend modes need two layers to work their magic!
Link setting
Advanced Link Option
Add link to title area
Add link to title area
Slice: Text Colours & BG
Vector Bands
Background Layer 2
+ + +
Add BG to the stack.
- Use Layer 1 image
- Drag image from resources panel or disk
- Load image from URL
- Off
- Use Layer 1 image
- Drag image from resources panel or disk
- Load image from URL
- Off
Enter the name for this tabbed section:
EDIT MODE
Edit Mode
A dashboard is available to ensure ease of use. The settings changes are reflected in the edit mode UI.
Options: Show/hide images, You can also minimize the panel to save space in edit mode.
Options: Show/hide images, You can also minimize the panel to save space in edit mode.
Enter the name for this tabbed section:
PREVIEW
Smart Preview
The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and more.
Enter the name for this tabbed section:
FAQ
Smooth Animation
How to increase performances?
Choose the best combination between filters, filling method and animation.
You should try the animation in more than one browser, the stack deliver "cross platform web fonts" and the result is quite identical in all browsers.
The features requiring more resources are:
- CSS filters over the BG like Blur (or you can use 2 images)
- Further css filters applied to the stack with nested stack.
Compatibility
Can I use this Stack within other stacks?
Yes, you need to check that the animations are loaded on the main page; Stacks with lightbox or modal windows are not compatible.
Load images
How to load a Stacks4 "site image" in this stack?
- Publish the project ( to upload all "site images").
- In RW copy the URL from the Thumbnail in Resources panel.
- In the Stack Paste the image path into the URL field.
RW: Resources panel / site image
Stack: external "URL image"