Support > General

Page transitions module/plugin ?

(1/2) > >>

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 ?

Navigation

[0] Message Index

[#] Next page