Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 6, 2025 at 3:37 pm #1483696
    mickhb

    Hi Together,
    Does anyone have an idea how to create an effect like this on this page?

    Home

    Regards
    mickhb

    • This topic was modified 3 days, 4 hours ago by mickhb.
    May 7, 2025 at 5:03 am #1483720
    Ismael

    Hey mickhb,

    Thank you for the inquiry.

    Have you tried using the Layer Slider plugin? The effect on the sample page is a bit complex, so replicating it may require significant modifications.

    Best regards,
    Ismael

    May 7, 2025 at 10:35 am #1483759
    mickhb

    Hey Ismail,

    I also often use the layer slider plugin on different pages. That has nothing to do with the effect. I just wanted to ask if you know a way to imitate this. This is also a WordPress site.

    Best regards
    Mickhb

    May 8, 2025 at 6:13 am #1483803
    Ismael

    Hi,

    Thank you for the update. If you’re not particularly focused on replicating the exact effects, animations, and scroll interactions, you can use the available elements in the Advanced Layout Builder. For example, in the first section, you could use the Headline element, followed by a Color Section with a background image or video — you can also use sliders. It will require a significant amount of customization, but it should be doable. If you need more assistance, consider reaching out to Codeable.

    — https://kriesi.at/contact/customization

    Best regards,
    Ismael

    May 8, 2025 at 7:28 am #1483816
    Guenni007

    you did not really specify what effect is meant. The effect of the letters on top and how they appear?
    those heading letter animations will all work with splitting the words to single chars – and then animate each char.
    This little snippet tries to show you how you can split an enfold heading ( give a trigger class to the heading element f.e.: single-letters) and put this to your child-theme functions.php:

    function words_to_single_chars(){
?>
<script>
  var textWrapper = document.querySelectorAll('.single-letters .av-special-heading-tag'), i;
  for (i = 0; i < textWrapper.length; ++i) {
    textWrapper[i].innerHTML = textWrapper[i].textContent.replace(/\S/g, "<span class='char'>$&</span>");   
  } 
</script>
<?php
}
add_action('wp_footer', 'words_to_single_chars');

    see a working example on : https://webers-testseite.de/impressum/
    if you look to the DOM you will see each letter inside a span tag like: <span class="char">I</span>

    ___________
    ;)
    by the way: This is a very interesting site, which certainly comes without layout modules and requires a high level of programming knowledge. The web design studio responsible for it: https://dgrees.studio can certainly offer you a similar design for your site, but probably not quite at the cost of a selfmade framework solution.

    May 8, 2025 at 8:43 am #1483829
    Guenni007

    see here a better snippet that splits first into words then into chars:
    https://webers-testseite.de/split-words/

    May 8, 2025 at 11:25 am #1483847
    Guenni007

    ok – now i see that venetian blind effect – because opening your link does not show it on first load – only if you switch to another page – it is there.

    May 8, 2025 at 1:04 pm #1483853
    Guenni007

    See first if this is a nearby solution: https://enfold.webers-webdesign.de/

    ok – here is a quick solution (with AI support).
    Enfold has the hook where you can insert something directly after the body opening tag. So put this to your child-theme functions.php:

    
function ava_custom_jalousie_loader() {
?>
<script type="text/javascript">
	window.addEventListener('load', function() {
		document.body.classList.add('loaded');
	});
</script>
<?php
}
add_action( 'wp_footer', 'ava_custom_jalousie_loader' );

add_action('ava_after_body_opening_tag', function() {
  echo '<div id="preloader-wrapper">';
    echo '<div id="jalousie-preloader">';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
    echo '</div>';
  echo '</div>';
});

    if you want less amount of jalousie-slat – remove some divs

    now the css:

    #preloader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    perspective: 1000px;
    overflow: hidden;
}

#jalousie-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transform-style: preserve-3d;
}

.jalousie-slat {
    width: 140%;
    position: relative;
    left: -20%;
    flex-grow: 1;
    background-color: #222222;  /* === change to your color you like === */
    transform-origin: 50% 50%;
    transition: transform 0.8s linear, opacity 0.4s linear 0.4s; 
    backface-visibility: hidden;
    transform: rotateX(0deg);
    opacity: 1;
    box-sizing: border-box;
}

body.loaded #preloader-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0.8s, visibility 0.3s 0.8s;
}

body.loaded #jalousie-preloader .jalousie-slat {
    transform: rotateX(90deg) scaleY(0.01);
    opacity: 0;
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.