0

I'm just building a locally hosted website. I will have a number of pages, 1,2,3 etc. And I wanted to create a kind of a slideshow effect by cycling slowly through each page. Using http-equiv="refresh" on each page I can link from page 1 to 2, page 2 to 3, page 3 to 1 etc. Going full screen on the browser creates a lovely slideshow effect of the website.

I'm a low enough level, but I would like to be transition from one page to the other smoothly, either fade in fade out or whatever. Right now it's quite jumpy.

Anyway, is this something I can do using the current meta tag or should I use an alternative method? I would prefer C# over Java if required.

<head>
<META HTTP-EQUIV="refresh" CONTENT="8;URL=/page1">
</head>enter code here
gravity121
  • 33
  • 7

2 Answers2

0

Should be possible like that's:

<html>
  <head>
    <style>
      .container {
        opacity: 0;
        transition: opacity 1s;
      }

      .container-loaded {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- All the content you want to fade-in here. -->
    </div>
    <script>
      $(document).ready(function() {
        $('.container').addClass('container-loaded');
      });
    </script>
  </body>
</html>
D4rk_Devs
  • 13
  • 12
  • 1
    Thank you for that. When I add the meta tag to the head (outside of style), and put the iframe where you said, the pages do cycle put there is no content displayed. It's just a white page. But I can see the address changing in the address bar. Any thoughts? – gravity121 Sep 15 '22 at 11:50
  • Maybe it's because of the Capital cases that's you are using? That's weird if nothing happen. You don't got any error? – D4rk_Devs Sep 15 '22 at 12:11
  • It's not transitioning. There's a link on the page so moving the mouse over the page and I can see that the links are there. Setting container opacity to 1 shows the page. So for some reason, it's not transitioning from opacity 0 to 1. – gravity121 Sep 15 '22 at 12:35
0

Thanks to @d4rk_Devs answer for giving me inspiration. I went on a rambling foray through google and stackoverflow and came up with the following code which worked perfectly.

<iframe src="..." 
onload="this.style.opacity = '1';"
style=" opacity: 0;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in-out;"  
></iframe>

can be seen here Original Code

gravity121
  • 33
  • 7