I am building a client website in an area where the competition tends to have websites that are visually quite bland and we’d like to do something better. I’ve done some photography for them, however both the client and I agree it needs some movement to stand out from the crowd.
What I’d like to do is have a laptop device fade in and then have a slideshow of still images automatically begin to play on the laptop screen. As a workaround I suppose I could create a video incorporating still images and set it to autoplay but I can see that having issues, especially with browsers blocking autoplay videos nowadays.
Does anybody know how this could be achieved?
I know there is a way of cross fading images with CSS. Which might be a good low overhead solution?
Possibly, but can it be done within a device, so it looks like the images are changing on the computer screen.
@Flashman one way to find out. My first guess is yes, it may take a little bit to get the css right. Here is an example.
https://codepen.io/johnbacon/pen/wgYOXW
2 Likes
Thanks I’ll give it a go.
1 Like
I couldn’t get this to work. I wonder if @Norm could include this as an option inside devices with 8.4? Ideally we’d be able to manually add a few images and just have them play as a slideshow inside a device.
1 Like
This Multiple Image Crossfade – CSS Only (https://codepen.io/johnbacon/pen/wgYOXW ) is really cool!Can there be Text over image and a Click-able or Hover-over hyperlink ?@Eldar to check it out. By far the best on the work with code is @Pealco
Brilliant Smooth CSS Cross-Fade with no JS and Text Over Image!
Pealco
September 22, 2019, 8:15pm
10
Hello @KBConcepts please try the following code:
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(e) {
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
</script>
<div id="stage">
<a href="http://home1.com"><img src="//placehold.it/450x280?text=Image 1" class=""></a>
<a href="http://home2.com"><img src="//placehold.it/450x280?text=Image 2" class=""></a>
<a href="http://home3.com"><img src="//placehold.it/450x280?text=Image 3" class=""></a>
<a href="http://home4.com"><img src="//placehold.it/450x280?text=Image 4" class=""></a>
</div>
<style type="text/css">
#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
</style>
Try it and tell me if it worked…
1 Like
Again, I’m grateful for your willingness to help. I hope to get sometime tomorrow to work on this. I’m assuming I open to Page Editor and just paste it.
I just pasted the code into https://codepen.io/pen and #1 images show, but it does not fade to the others.
Also are these responsive Full Screen (Hero)? I asked because the js read 450x280.
Pealco
September 22, 2019, 10:32pm
12
Ah ok, have to change a little bit the code… working on the other request… tomorrow I take this one. Is it ok?
1 Like
Pealco
September 23, 2019, 10:17pm
14
Try this one, as this is responsive:
<div id="slide-container">
<div id="slide-first-element">
<img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_1">
<p class="slide-text">Beautiful</p>
</div>
<div id="slide-element-2">
<img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_2">
<p class="slide-text">Amazing</p>
</div>
<div id="slide-element-3">
<img class="slide-image" src="https://via.placeholder.com/1500x1000.png?text=IMAGE_3">
<p class="slide-text">Incredible</p>
</div>
</div>
<style>/* Slider */
/* Slideshow container */
#slide-container {
position: relative;
max-width: 100%; /* responsiveness */
}
/* First element to be in block mode for responsiveness */
#slide-first-element {
display: block; /* to get the dimensions set */
width: 100%;
height: auto;
}
/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Style images */
.slide-image {
width: 100%;
border-radius: 20px;
}
/* Style text */
.slide-text {
position: absolute;
bottom: 10px;
background-color: #0042b1bb;
color: white;
width: 100%;
text-align: center;
font-size: 1.5rem;
}
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
animation: fade-2 10s infinite;
-webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
animation: fade-3 10s infinite;
-webkit-animation: fade-3 10s infinite;
}
/* and more if there are more slides to show */
@keyframes fade-1 {
0% { opacity: 1; }
33% { opacity: 0; }
66% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade-2 {
0% { opacity: 0; }
33% { opacity: 1; }
66% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-3 {
0% { opacity: 0; }
33% { opacity: 0; }
66% { opacity: 1; }
100% { opacity: 0; }
}
/* example for a 4th slide */
@keyframes fade-4 {
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 1; }
100% { opacity: 0; }
}
</style>
Tell me if it works…
If you don’t mind paying, have a look at this:
Or this:
Beautiful, my friend Is this what controls how long the image stays in view?
#slide-first-element {
Also how can I make the Blue background text line transparent, but the Text white ?
Those two links you showed me are really cool. Thanks so much for your help.
Pealco
September 24, 2019, 11:05am
16
Hello,
Regarding times, you have to change in all slides…
#slide-first-element {
animation: fade-1 10s infinite;
-webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
animation: fade-2 10s infinite;
-webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
animation: fade-3 10s infinite;
-webkit-animation: fade-3 10s infinite;
}
About the text:#0042b1bb (change blue to transparent)
1 Like
I know how busy you are @Pealco , so thanks for putting me at the top of your list.
1 Like
