Recent

Author Topic: Slideshow with crossfade and scrolling  (Read 307 times)

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 601
Slideshow with crossfade and scrolling
« on: September 28, 2020, 08:15:59 am »
I need simple static page with slideshow. I don't want to hardcode things, as I need this slide show to have arbitrary placement on page (left half of page for example), so, I guess, I need to use JavaScript. I don't want to use jQuery, because it's overkill for such simple project. Problem is - I'm not familiar with Web programming and JavaScript. Of course I would find out how to do it myself, but it would take time and I need to make it work as fast, as possible. May be you will help me?

I need something similar to this:
Code: Text  [Select][+][-]
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>Stream</title>
  6.         <style>
  7.             html {
  8.                 overflow: hidden;
  9.                 width: 100%;
  10.                 height: 100%;
  11.             }
  12.             body {
  13.                 margin: 0;
  14.                 padding: 0;
  15.                 background: #000000;
  16.             }
  17.             .slideshow {
  18.                 position: relative;
  19.             }
  20.             @keyframes fade {
  21.                 0% {opacity: 0.5;}
  22.                 0.83% {opacity: 1;}
  23.                 32.5% {opacity: 1;}
  24.                 34.16% {opacity: 0;}
  25.                 99.17% {opacity: 0;}
  26.                 100% {opacity: 0.5;}
  27.             }
  28.             .slideshow img {
  29.                 position: absolute;
  30.                 left: 0;
  31.                 right: 0;
  32.                 display: block;
  33.                 margin: 0 auto;
  34.                 opacity: 0;
  35.                 animation-timing-function: linear;
  36.                 animation-name: fade;
  37.                 animation-duration: 30s;
  38.                 animation-iteration-count: infinite;
  39.             }
  40.             .slideshow img:nth-child(1) {
  41.                 animation-delay: 0s;
  42.             }
  43.             .slideshow img:nth-child(2) {
  44.                 animation-delay: 10s;
  45.             }
  46.             .slideshow img:nth-child(3) {
  47.                 animation-delay: 20s;
  48.             }
  49.         </style>
  50.     </head>
  51.     <body>
  52.         <div class="slideshow">
  53.             <img src="../../Images/Image1.png">
  54.             <img src="../../Images/Image2.png">
  55.             <img src="../../Images/Image3.png">
  56.         </div>
  57.     </body>
  58. </html>
  59.  

But with following requirements:
1) Images should fit into 100% height - not having their bottom cut, if their height is bigger, than 100%, as in my example.
2) Each should be shown for X seconds (10 second in my example), i.e. full cycle should take X * N seconds, where N is number of images
3) There should be cross-fade for Y seconds (0.5 seconds in my example) - i.e. Y/2 at the beginning and Y/2 at the end of animation - both should be included into X, not added to it.
4) If image width is smaller, than container width - it should be centered.
5) If image width is bigger, that  container width - it should be repeated and scrolled for Z seconds (i.e. with speed Width/Z pixels per second), just like running line.
« Last Edit: September 28, 2020, 08:47:49 am by Mr.Madguy »
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

lucamar

  • Hero Member
  • *****
  • Posts: 3179
Re: Slideshow with crossfade and scrolling
« Reply #1 on: September 28, 2020, 12:24:39 pm »
You do know that this is a Pascal forum, don't you? You'll probably have better luck (and better answers) in JavaScript fora.

Just saying ... ;D

Unless you want to use the "Pascal to JavaScript" transpiler, of course.
Turbo Pascal 3 CP/M - Amstrad PCW 8256 (512 KB !!!) :P
Lazarus/FPC 2.0.8/3.0.4 & 2.0.10/3.2.0 - 32/64 bits on:
(K|L|X)Ubuntu 12..18, Windows XP, 7, 10 and various DOSes.

Mr.Madguy

  • Hero Member
  • *****
  • Posts: 601
Re: Slideshow with crossfade and scrolling
« Reply #2 on: September 28, 2020, 05:18:22 pm »
You do know that this is a Pascal forum, don't you? You'll probably have better luck (and better answers) in JavaScript fora.

Just saying ... ;D

Unless you want to use the "Pascal to JavaScript" transpiler, of course.
Yeah, I understand. But first part of project, i.e. Chromium-based mini-browser with extra features from my previous mini-VLC player - is already completed. It was actually the easiest part of my task. But this one is a little bit harder for me. Since now I will be able to make arbitrary pages to be displayed on TVs, that won't put too much load on server. Because streaming pre-rendered video isn't as resource-intensive, as real-time rendering. But I need at least 3 page patterns for start. Slideshow, 50/50 slideshow+video, video. Video is obviously easy one. But slideshow is hard. Especially when it needs scrolling. I just thought, that there are some people here, who whom solving my problem would be easy task, as this part of forum is about Web programming, so people here should know HTML and JS.

BTW, I almost completed this task today by myself. Only problem - is mixing two animations together. The biggest problem with making something new for you - is that you have to read many guides, manuals and experiment too much. All of this takes too much time. My boss is already upset, because I wasted whole day trying to solve this problem, instead of doing something more important.
« Last Edit: September 28, 2020, 05:27:14 pm by Mr.Madguy »
DynamicData 3.0 is released!
Since now development is frozen - only optimization passes will be made at some point.
Lack of multiple inheritance turns it into abomination.

 

TinyPortal © 2005-2018