Page transitions module/plugin ?

[armpouniotis]

Hi there !

is there any module/plugin for page transitions ?
or
can you recommend me any website with codes, which offers something like that ?

Thank you in advance
Christos

[datahell]

You can have transitions by adding just a few lines of CSS in template's CSS file (or, better, in userconfig.css - Elxis 5.2). If you write what exactly you want to do I can write you the code.

[armpouniotis]

Hi there !

maybe some fade in - fade out transition.

I really don't know what kind of transition exist !

How can you do that using css ?

[datahell]

With transition and animation you can do anything. Transitions apply on element properties (any property), for example width, background-colour, etc. Animation allows you to move (and much more) an element and gives you excellent control over it. Here are some examples.

EXAMPLE 1 / transition
Change opacity (fade) on mouse over. HTML:
<div class="myfade">TEST A</div>
CSS:
.myfade { padding: 20px; margin: 10px 0; box-sizing: border-box; background: red; color: #FFFFFF; opacity:1; transition: opacity 1s; }
.myfade:hover { opacity:0.2; }

EXAMPLE 2 / transition
Resize (reduce width) on mouse over. HTML:
<div class="shrink">TEST B</div>
CSS:
.shrink { padding: 20px; margin: 10px 0; box-sizing: border-box; background: red; color: #FFFFFF; width: 100%; transition: width 1s; }
.shrink:hover { width:50%; }

EXAMPLE 3 / animation
Change background colour on mouse over. HTML:
<div class="switchcolour">TEST C</div>
CSS:
.switchcolour { padding: 20px; margin: 10px 0; box-sizing: border-box; background: red; color: #FFFFFF; }
.switchcolour:hover { animation: colourize 3s infinite; }
@keyframes colourize {
  0%   { background:red; }
  33%  { background:yellow; }
  67%  { background:orange; }
  100% { background:red; }
}

Test it live in codepen

Link to W3 Schools / Transition
Link to W3 Schools / Animation

There are unlimited things you can do. The on mouse over event used above is just an example in order to better see the change. If you have something specific in mind write it and I will give you instructions.

[armpouniotis]

These are lovely animations,
but,
what about if I click on a category on the menu, e.g. I am in Home page, and I click "Contact" to go to contact page.

Is there any page transition or effect for that ?

[datahell]

And what you want to do in this case? Animate something? Fade? What?

[armpouniotis]

Let's say, fade or animate the whole screen !

By clicking a menu item, the whole screen could just slide left, and the new page appears !

Christos

[datahell]

If you want to load a brand new page the browser needs to refresh the whole page, you cannot make a css or javascript transition from one page to the other because on each page the browser re-builts the page from scratch and everything re-initializes. What you can do is to use a pre-loader that might look like as a slider although it will not be from one page to the other but something else (e.g. from a loading screen to the loaded page). BTW I don't find this a good idea.

The effects work on html elements existing on a page. The contents of these elements can be changed using AJAX or simple javascript. If you want to click a menu item and display something new you can do it with AJAX and off-course use fade, animation, etc, but you will not refresh the whole page but only a portion of it. This portion can be almost everything on the page but the page it self will not be refreshed (the URL will not change). The browser will show you that you are still on the same page.

Here is a sample I made when a menu item gets clicked leads to change of the displayed data using an animation. However the page remains the same although it has different contents.

[armpouniotis]

ok !
thank you for your advise !

I will make a research about it !

cheers !