Home Text Fade Slider

Site URL: https://www.87percent.co.uk/

Hi,

I'd like to add a text fade-in slider here on the home page: https://www.87percent.co.uk/

I'd like the top text to slowly fade away and change to a different text. Something like here: https://codepen.io/kubulu/pen/zBxOoj

How do I get to do this?

Thank you!

Add a Code Block > Paste this Codepen code

<div class='slider'>
  <div class='slide1'>Web Application Developement</div>
  <div class='slide2'>Mobile Application Developement</div>
  <div class='slide3'>Cloud Technology</div>
  <div class='slide4'>Cloud Technology</div>
</div>
<style>
  .slider {
  max-width: 600px;
  height: 50px;
  margin: 20px auto;
  position: relative;
  font-size:40px;
  text-align:center;
}
.slide1,.slide2,.slide3,.slide4 {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size:70px;
}
.slide1 {
  
    animation:fade 20s infinite;
-webkit-animation:fade 20s infinite;

} 
.slide2 {
 
    animation:fade2 20s infinite;
-webkit-animation:fade2 20s infinite;
}
.slide3 {
   
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
.slide4 {
   
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
@keyframes fade
{
  0%   {opacity:0}
  20% { opacity: 1}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade2
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 1}
  60% { opacity: 0}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 1}
  80% { opacity: 0}
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   {opacity:0}
  20% { opacity: 0}
  40% { opacity: 0}
  60% { opacity: 0}
  80% { opacity: 1}
  100% { opacity: 0}
}
</style>

Hi there @tuanphan,

I'm looking to achieve something similar to the above, but in a way that there is a list of titles, and clicking on them activates the body copy to change according to the title. Similarly to this about me section on this site: 

https://peachmayphotography.com/about - section shown on screenshot image attached

Any direction and help on this would be amazing, i'm not sure how to even reference it or what to call this effect so it's hard to search for answers. 

Ideally I would like a method/code that would work across multiple different 7.1 sites and not personalised to one site.

thanks so much.

On 11/16/2023 at 6:32 PM, daniellenoakes said:

Hi there @tuanphan,

I'm looking to achieve something similar to the above, but in a way that there is a list of titles, and clicking on them activates the body copy to change according to the title. Similarly to this about me section on this site: 

https://peachmayphotography.com/about - section shown on screenshot image attached

Any direction and help on this would be amazing, i'm not sure how to even reference it or what to call this effect so it's hard to search for answers. 

Ideally I would like a method/code that would work across multiple different 7.1 sites and not personalised to one site.

thanks so much.

You mean click text (01, 02, 03, 04..) will change text above (where aff started my journey..)?

1 hour ago, tuanphan said:

You mean click text (01, 02, 03, 04..) will change text above (where aff started my journey..)?

yeah that's it! 

On 11/18/2023 at 4:48 PM, daniellenoakes said:

yeah that's it! 

I used to do some same cases, you can add 4 Text Blocks here

then we will test & give you code to achieve your request

thank you so much, what is this effect called?
I've added two text blocks and two images:

- 1 text box and 1 image belongs to the 'danielle noakes link'

link button: #block-ef35e5cfca728e4a7896

text box: #block-yui_3_17_2_1_1700218883919_79119

image: #block-yui_3_17_2_1_1700218883919_89095

- and the other text box and image belong to the 'iel beauty' link. 

link button: #block-yui_3_17_2_1_1700218883919_84895

text box: #block-664c85065e3dd8beae5f

image: #block-e946d00316d1668d7a5c

www.annajonesbridal.co.uk/suppliers

the site is live already 

On 11/21/2023 at 7:59 PM, daniellenoakes said:

thank you so much, what is this effect called?
I've added two text blocks and two images:

- 1 text box and 1 image belongs to the 'danielle noakes link'

link button: #block-ef35e5cfca728e4a7896

text box: #block-yui_3_17_2_1_1700218883919_79119

image: #block-yui_3_17_2_1_1700218883919_89095

- and the other text box and image belong to the 'iel beauty' link. 

link button: #block-yui_3_17_2_1_1700218883919_84895

text box: #block-664c85065e3dd8beae5f

image: #block-e946d00316d1668d7a5c

 

www.annajonesbridal.co.uk/suppliers

 

the site is live already 

Can you check again? I see 2 images, but only 1 text only

I don't know what that effect is called, maybe a variation of Tabs

@tuanphan there is deifnitely two texts, the body is the same for now but the title is different, here are the two text block ids:

text box 1 : #block-yui_3_17_2_1_1700218883919_79119

text box 2: #block-664c85065e3dd8beae5f

@tuanphan sorry to be pain, but is there any luck on this? really struggling! 😧 

Sorry, recently a lot of work

You can add this to bottom in Code Injection > Footer + Don't remove any code in your current code. See video

<script>
  $(document).ready(function(){
    // Danielle Noakes Photography
    $('.fe-block.fe-block-ef35e5cfca728e4a7896 h3').click(function(){
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').show();
        $('.fe-block-664c85065e3dd8beae5f').hide();
    });
    // wedding
    $('.fe-block-yui_3_17_2_1_1700218883919_84895 h3').click(function(){
        $('.fe-block-664c85065e3dd8beae5f').show();
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide();
    });
});
</script>
<style>
.fe-block.fe-block-664c85065e3dd8beae5f {
    display: none;
}
</style>

34 minutes ago, tuanphan said:

Sorry, recently a lot of work

You can add this to bottom in Code Injection > Footer + Don't remove any code in your current code. See video

<script>
  $(document).ready(function(){
    // Danielle Noakes Photography
    $('.fe-block.fe-block-ef35e5cfca728e4a7896 h3').click(function(){
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').show();
        $('.fe-block-664c85065e3dd8beae5f').hide();
    });
    // wedding
    $('.fe-block-yui_3_17_2_1_1700218883919_84895 h3').click(function(){
        $('.fe-block-664c85065e3dd8beae5f').show();
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide();
    });
});
</script>
<style>
.fe-block.fe-block-664c85065e3dd8beae5f {
    display: none;
}
</style>

 

this is insane thank you so much!!!!!!! love it!!!

22 hours ago, tuanphan said:

Sorry, recently a lot of work

You can add this to bottom in Code Injection > Footer + Don't remove any code in your current code. See video

<script>
  $(document).ready(function(){
    // Danielle Noakes Photography
    $('.fe-block.fe-block-ef35e5cfca728e4a7896 h3').click(function(){
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').show();
        $('.fe-block-664c85065e3dd8beae5f').hide();
    });
    // wedding
    $('.fe-block-yui_3_17_2_1_1700218883919_84895 h3').click(function(){
        $('.fe-block-664c85065e3dd8beae5f').show();
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide();
    });
});
</script>
<style>
.fe-block.fe-block-664c85065e3dd8beae5f {
    display: none;
}
</style>

 

is there a way now to make the 'buttons' have a hand pointer, hover style and an active state? as currently it looks like they don't do anything 🙂

is there also a way to make the content 'fade' in rather than just quickly swap ? 

thank you!! 

Add this code under

<style>
  .fe-65576dfbfe21dd44b1c2d058 h4 {
    cursor: pointer;
}
</style>

Fade: I don't know this

13 hours ago, tuanphan said:

Add this code under

<style>
  .fe-65576dfbfe21dd44b1c2d058 h4 {
    cursor: pointer;
}
</style>

Fade: I don't know this

that worked great thank you so much! did you know what would work to customise the hover and active states of those links? ive tried a few different approaches but no luck 

With hover, add this code to Website Tools (under Not Linked) > Custom CSS

/* h4 color on hover */
.fe-65576dfbfe21dd44b1c2d058 h4:hover {
    color: #f1f;
}

With click, can you send current code in Code Injection? I can adjust it easier

11 hours ago, tuanphan said:

With hover, add this code to Website Tools (under Not Linked) > Custom CSS

/* h4 color on hover */
.fe-65576dfbfe21dd44b1c2d058 h4:hover {
    color: #f1f;
}

With click, can you send current code in Code Injection? I can adjust it easier

 

 

 

<script>

  $(document).ready(function(){
    // Danielle Noakes Photography
    $('.fe-block.fe-block-ef35e5cfca728e4a7896 h4').click(function(){
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').show();
        $('.fe-block-664c85065e3dd8beae5f').hide();
       $('.fe-block-yui_3_17_2_1_1700218883919_89095').show();
       $('.fe-block-e946d00316d1668d7a5c').hide();

    });
    // iel beauty
    $('.fe-block-yui_3_17_2_1_1700218883919_84895 h4').click(function(){
        $('.fe-block-664c85065e3dd8beae5f').show();
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide();
          $('.fe-block-yui_3_17_2_1_1700218883919_89095').hide();
       $('.fe-block-e946d00316d1668d7a5c').show();
      

    });
});
</script>
<style>
@media screen and (min-width:768px) {
  .fe-block.fe-block-664c85065e3dd8beae5f {
    display: none;
}
  
.fe-block-e946d00316d1668d7a5c {
    display: none;
}

  }}
  
  
</style>

<style>
  .fe-65576dfbfe21dd44b1c2d058 h4 {
    cursor: pointer;
}
  
  
  
</style>

Change to this

<script>
  $(document).ready(function(){
    // Danielle Noakes Photography
    $('.fe-block.fe-block-ef35e5cfca728e4a7896 h4').click(function(){
       $(this).addClass('hover-active');
      $('.fe-block-yui_3_17_2_1_1700218883919_84895 h4').removeClass('hover-active');
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').show();
        $('.fe-block-664c85065e3dd8beae5f').hide();
       $('.fe-block-yui_3_17_2_1_1700218883919_89095').show();
       $('.fe-block-e946d00316d1668d7a5c').hide();

    });
    // iel beauty
    $('.fe-block-yui_3_17_2_1_1700218883919_84895 h4').click(function(){
      $(this).addClass('hover-active');
      $('.fe-block.fe-block-ef35e5cfca728e4a7896 h4').removeClass('hover-active');
        $('.fe-block-664c85065e3dd8beae5f').show();
        $('.fe-block-yui_3_17_2_1_1700218883919_79119').hide();
          $('.fe-block-yui_3_17_2_1_1700218883919_89095').hide();
       $('.fe-block-e946d00316d1668d7a5c').show();
      

    });
});
</script>
<style>
@media screen and (min-width:768px) {
  .fe-block.fe-block-664c85065e3dd8beae5f {
    display: none;
}
.fe-block-e946d00316d1668d7a5c {
    display: none;
}
  }}
   .fe-65576dfbfe21dd44b1c2d058 h4 {
    cursor: pointer;
}
  .hover-active {
    color: #81919f;
    transition: all .1s ease-in-out;
}
</style>

thank you this partly works so happy to tick it off! really appreciate your help