Starter Theme 2022

If you want to exit this offscreen panel you have different possibilities:

You can use the key. Test it now. Well Done! 🔥

You can click on the button at the bottom right. OK! now for the last possibility 🌚

You can click anywhere

Turn on off

Functionnality Offscreen menu to view the functionnality informations

Technologies in use Vanilla JavaSCript & GSAP

LAYOUT. Layout Line Animation

Show files location

scss

scss/assets/layout/layout-line-animation.scss

php

template-parts/layout/layout-line-animation.php

js/layout/layout-line-animation.js

Line animation around the layout

Technologies ???

Turn on off

LEFT

Middle

right

bottom

EFFECT. Différent fading effects

Show files location

scss

scss/assets/effect/text/underline.scss

php

template-parts/effects/text/underline.php

Add the underline class going from left to right <a href="#" class="element--underline">This is the underline Effect<a>

Technologies SASS

Turn on off

Fade In

Element appears from transparency

Fade In Down

Element appears through transparency from above

Fade in Right

Element appears through transparency from the left

Fade in Up

Element appears through transparency from the bottom

Fade in Left

Element appears through transparency from the right

Zoom In

Element gradually appears by zooming in

LAYOUT. Social medias

Show files location

scss

scss/assets/layout/social-medias.scss

php

template-parts/layout/social-medias.php

Select between the 2 options (text and icon) for your social medias

Technologies SASS

Turn on off

Adamo.

LAYOUT. Slideshow

Show files location

scss

scss/assets/layout/grid-slideshow.scss

php

template-parts/layout/grid-slideshow.php

Horizontal scroll slideshow with little effect on hover

Technologies SASS

Turn on off

Dead no longer alive. absolutely; completely.

LAYOUT. Columns with text reveal split by line

Show files location

scss

scss/assets/layout/grid-columns.scss

js/assets/layout/grid-columns.js

php

template-parts/layout/grid-columns.php

Animation ligne par ligne en apparition quand le container est visible

Technologies Splitting - Vanilla JavaScript

Turn on off

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat, purus ultricies fermentum scelerisque, dolor ipsum euismod urna, sed viverra metus tellus vel sapien. Sed porta, ligula nec varius cursus, tellus mi lobortis turpis, sit amet gravida urna magna non tellus. Vivamus dapibus rhoncus tortor nec ultricies. Etiam congue in felis vitae tincidunt. Sed mattis sollicitudin risus, in rhoncus urna hendrerit blandit. Duis fringilla mollis justo vitae iaculis.

COMPONENTS. Buttons

Show files location

scss

scss/assets/effect/text/underline.scss

php

template-parts/effects/text/underline.php

Add the underline class going from left to right <a href="#" class="element--underline">This is the underline Effect<a>

Technologies SASS

Turn on off

Je suis un bouton

EFFECT. Text reveal on scroll

Show files location

scss

scss/assets/effect/text/split-text-animation-lines.scss

scss/assets/effect/text/split-text-animation-sentence.scss

scss/assets/effect/text/split-text-animation.scss

js/assets/effect/text/split-text-animation-lines.js

js/assets/effect/text/split-text-animation-sentence.js

php

template-parts/effects/text/split-text-animations.php

Add the following class to the element you want to add the effect class="element--split-text-animation-sentence"

Technologies Vanilla Javascript

Turn on off

Text Reveal Effect

When the page is scrolling, the text will show with a little effect sliding up and fading in.

EFFECT. Marquee

Show files location

scss

scss/assets/effect/text/marquee.scss

js/assets/effect/text/marquee.js

php

template-parts/effects/text/marquee.php

Change the text within the element that has the class marquee__part <div class="marquee__part">This is the marquee Effect<div>

Technologies GSAP – Vanilla Javascript

Turn on off

This is the marquee Effect

EFFECT. Underline

Show files location

scss

scss/assets/effect/text/underline.scss

php

template-parts/effects/text/underline.php

Add the underline class going from left to right <a href="#" class="element--underline">This is the underline Effect<a>

Technologies SASS

Turn on off

This is a very very very very very very very very very very very very very long the underline Effect

top