Slide with fade and zoom effect

Using Concrete / Help
1

hi everyone, one customer have ask me a slide effect like those you can find in this web site building with wordpress

but i don’t want use wordpress; someone can suggest me a plugin about it? or a solution?

i have try to edit lite slide in css part in this way , but don’t work

.xw-ls__slide  { display: flex;
  justify-content: center;
  align-items: center; overflow: hidden;}
.xw-ls__slide  >img { vertical-align: middle;   display: flex;
  align-items: center;

  position: relative;
  animation-name: zoomslide;
  animation-duration: 10s;
  animation-iteration-count: infinite ;
  animation: alternate; 
  }
  
  @keyframes zoomslide {
 
  0%  {height: 10% !important; width: auto; }
 50% {height: 100% !important; width: auto;}
  100% {height: 200% !important; width: auto;}
 
}

Enrico

2

1. The initial full-window zoom transition background can be implemented using the Vegas jQuery plugin. There is a bit more to it than just $(selector).vegas() because it has to work with menus and with the dashboard bar.

If you are looking for an already implemented solution for a zoom transition background, my Omni Gallery addon includes Vegas. Amongst the transition/animation options are zoom in and zoom out.

Vegas is quite an old jQuery plugin. With modern CSS I expect the entire sequence could be coded purely in CSS by someone with enough time on their hands.

2. The changing background as you scroll down is achieved with CSS backgrounds and background attachment. That is usually implemented with a single-page theme rather than using a slider addon.

There used to be a few marketplace themes implementing such, but I don’t know of any current themes providing this effect. (I have implemented similar as custom adaptations of site themes)

3

hi John, thank you for you reply, at the moment i have installed concrete5 9.2 whit atomik theme .

i need creating a presentation slide like in the web site i have post.
whit your plugin is possible make it easily , without coding or complicate css, right? have i understand right?

excuse my question , but isn’t the money the problem, but time to spend about it.

Enrico

4

The example page you linked two had two separate effects that could be described as sliders.

  1. The first was the background zoom slider that shows when the page is first loaded.

  2. The second is a ‘big scroll’ background image as you scroll down the page.

These are addressed by (1) and (2) of my previous post.

Omni Gallery can be configured to implement (1), similar to the linked demonstration page but configured with a zoom out effect. In the Omni Gallery block edit dialogue you would need to select the visual effect option to ‘zoom out’.

Omni Gallery has many options, so to help you configure (and save a lot of time), it provides an export and import of options as JSON. You can copy settings from the demonstration page, then import the JSON to your own Omni Gallery block. Then just make a few changes for your site.

(and the linked video Setings copy and import - YouTube )