I'm building an infinite scrolling banner with HTML5 and CSS3. My code works but there are some small lags.. I would like a smooth scrolling effect, it's nicer for user.
There must be some way to make it more smooth, but not sure how to.
Anyway to do add a smooth effect to my animation using CSS? Or with Javascript?
Here is my demo code:
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
.first {
-webkit-animation: bannermove 180s linear infinite;
-moz-animation: bannermove 180s linear infinite;
-ms-animation: bannermove 180s linear infinite;
-o-animation: bannermove 180s linear infinite;
animation: bannermove 180s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
The lagging is caused by a difference in image alignment between start and end of css animation.
It could be tricky to align so when doing this kind of animation I prefer to go with javascript + requestAnimationFrame
const speed = 2; // 2 pixels per frame at 60 frames per second
const banner = document.getElementsByClassName('photobanner')[0];
// build images array
let images = [
...banner.getElementsByTagName('img')
];
// initialize images positions
let rects = images.map((img, index) => {
const style = getComputedStyle(img);
const rect = {
left: index * (350 + 50),
top: 0,
width: 350,
height: parseInt(style.height, 10)
};
return rect;
});
function animate() {
const l = images.length;
for (let i = 0; i < l; i++) {
const img = images[i];
const rect = rects[i];
rect.left -= speed;
if (rect.left + rect.width < 0) {
// this image if fully overflowing left, put it at the end of the image list both in position and in images and rects
const lastRect = rects[rects.length - 1];
rect.left = lastRect.left + lastRect.width + 50;
images = images.slice(1, l);
images.push(img);
rects = rects.slice(1, l);
rects.push(rect);
i--;
}
// change the actual image style according to new rect value
img.style.left = rect.left + 'px';
};
requestAnimationFrame(animate);
}
animate();
.photobanner {
position: relative;
height: 233px;
width: 100%;
margin-bottom: 30px;
}
.photobanner img {
top: 0px;
width: 350px;
box-shadow: 2px 2px 8px #8a8a8a;
position: absolute;
}
<div class="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
you can use JavaScript for better results
var e = document.getElementById("photobanner");
var x = 0;
function moveBanner() {
x--;
e.style.marginLeft = x + "px";
}
setInterval(moveBanner, 60);
.photobanner {
position: relative;
left: -500px;
height: 233px;
width: 4550px;
margin-bottom: 30px;
}
.photobanner img {
margin: 0px 25px;
box-shadow: 2px 2px 8px #8a8a8a;
}
<div class="photobanner" id="photobanner">
<img class="first" src="https://source.unsplash.com/user/erondu/350x233" alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
<img src="https://source.unsplash.com/user/erondu/350x233 " alt="" />
</div>
Related
I have a javascript that changes the IMG every 5 seconds and it works fine. The issue is I tried to add a fade transition effect on it but it is not being applied to it. Where did I go wrong? Any help is appreciated. Thanks in advance.
let images = ['Img2.jpg', 'Img3.jpg', 'Img4.jpg', 'Img5.jpg'];
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
function change() {
imgElement.src = images[index];
index > 1 ? index = 0 : index++;
}
window.onload = function() {
setInterval(change, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.active {
opacity: 1;
z-index: 2;
}
<div class="mainDisplay">
<img id="mainDisplayImg" src="Img1.jpg">
<img class="slide active" src="Img2.jpg" style="display: none">
<img class="slide" src="Img3.jpg" style="display: none">
<img class="slide" src="Img4.jpg" style="display: none">
<img class="slide" src="Img5.jpg" style="display: none">
</div>
First of all, if you want any kind of transitions, don't use display: none it just doesn't play nice. You can "hide" elements by placing them outside of view area instead;
Second since you already have predefined images in the html, you don't have to duplicate them in javascript, you can cycle through html elements instead and set active class:
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
const slides = document.querySelectorAll(".mainDisplay .slide");
function change() {
if (++index >= slides.length)
index = 0;
for(let i = 0; i< slides.length; i++)
slides[i].classList.toggle("active", i == index);
}
window.onload = function() {
setInterval(change, 2000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
top: -100wh; /* hide from view */
}
.active {
opacity: 1;
z-index: 2;
position: initial;
}
<div class="mainDisplay">
<img class="slide active" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
</div>
This should work for you.
const imgElement = document.querySelectorAll('.slide');
let i = 1;
window.onload = function () {
setInterval(function () {
i = i % 5;
imgElement[i].classList.add('active');
imgElement[i].previousElementSibling?.classList.remove('active');
if (i == 0 && imgElement[4].classList.contains('active')) {
imgElement[4].classList.remove('active');
}
i++;
}, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.active {
display: block;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="mainDisplay">
<!-- <img id="mainDisplayImg" src="./Img1.jpg" /> -->
<img class="slide active" src="./Img1.jpg" />
<img class="slide" src="./Img2.jpg" />
<img class="slide" src="./Img3.jpg" />
<img class="slide" src="./Img4.jpg" />
<img class="slide" src="./Img5.jpg" />
</div>
i created an automatic horizontal slider. In my codepen it worked fine, until I realized that if I widen the screen, it no longer works, it is not continuous but leaves a blank space at the end, then it starts all over again brutally. If I insert a fixed and small width to my css everything works fine, but if I remove it and I want it to be full screen, it gives me this problem. How can I solve? thank you
#prodotti {
height:350px;
width:100%;
position:relative;
overflow:hidden;
}
.photo {
position:absolute;
top:0px;
left:0px;
overflow:hidden;
white-space: nowrap;
animation: move 10s linear infinite;
}
.photo img {
margin: 0 0.5em
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
Now if you see here it works as I want it, but if you try to enlarge the screen or insert it in a full screen page for example 1920px, this is no longer infinite, but it leaves white space.
This is how I see it when it comes to an end.
enter image description here
I also accept advice with javascript, like with infinite margins or I don't know.
It works now, also made it responsive
window.onresize = (() => {
var imgWidth = Math.min(
window.innerWidth,
window.innerHeight
);
document.getElementById('photo').innerHTML = '';
for(var i = 0;true;i++) {
if (
(document.querySelectorAll('img').length * imgWidth) <
(window.innerWidth * 2)) {
var img = new Image();
img.src = "https://picsum.photos/200"
document.getElementById('photo').append(img);
document.getElementById('photo').append(img);
document.getElementById('photo').animation =
`move ${document.querySelectorAll('img').length / 6}s linear infinite`
} else {
return -1;
}
}
});
body {
overflow: hidden;
margin: 0px;
}
#prodotti {
height: 350px;
width: 100%;
position: relative;
overflow: hidden;
}
.photo {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
white-space: nowrap;
animation: move 10s linear infinite;
padding: 0.5vh;
margin: 8px 0px 0px 0px;
}
.photo img {
margin: 0 0.5em;
height: calc(100vh - 16px);
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
#media only screen and (orientation: portrait) {
.photo img {
margin-top: calc(50vh - 50vw);
height: calc(100vw - 16px);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
I have tried to do zoom effect using html, css and Javascript but the image goes out of the parent div after zooming the content.
After clicking zoomin button the image will go out of the div and the first image will cut from the beginning.
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
}
<body>
<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="Images/2.jpg" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
</div>
</div>
</div>
It goes out of the containing div because the transform-origin (what transform(scale()) takes as the starting point for the transformation) is set at the center of the images by default.
If you change it to be in the top-middle, the images will be scaled from top to bottom:
.test {
transform-origin: 50% 0%;
}
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
transform-origin: 50% 0%;
}
<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="https://lorempixel.com/300/300/?1" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?2" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?3" alt="image" height="150px" width="150px" />
</div>
</div>
</div>
.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
transform-origin: 50% 0%;
transitions: all 0.5s ease 0s;
}
Your div area/container should have overflow hidden i.e.
.demoCss {
overflow: hidden;
}
I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?
Current html is:
<div class="event_container">
<a href="/index.php?con=events&id=5">
<div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
<p>Kør med de store!</p>
<p>18-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=3">
<div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
<p>Den nye FIAT 500!</p>
<p>24-01-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=1">
<div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
<p>Event 1</p>
<p>30-04-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=2">
<div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
<p>Test kør bughatti!</p>
<p>03-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
<a href="/index.php?con=events&id=4">
<div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
<p>Skal du køre suziki?</p>
<p>30-06-2017</p>
<div style="display: inline-block" class="tile"></div>
</div>
</a>
You can make action animated with jQuery to be more comfortable with moved image. Try example below:
var outer = $('.container');
$('#right').click(function() {
outer.animate({scrollLeft: '+=30px'}, 500);
});
$('#left').click(function() {
outer.animate({scrollLeft: '-=30px'}, 500);
});
$('#top').click(function() {
outer.animate({scrollTop: '-=30px'}, 500);
});
$('#bottom').click(function() {
outer.animate({scrollTop: '+=30px'}, 500);
});
.container {
width: 100px;
height: 100px;
overflow: scroll;
}
.inner {
width: 300px;
background-color: red;
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inner">
A B C D E F G 1 2 3 4 5 6 7 8 9
-------------------------------
9 8 7 6 5 4 3 2 1 A B C D E F G
</div>
</div>
<button id="left"> < </button><button id="right"> > </button>
<button id="top"> ^ </button><button id="bottom"> V </button>
I've made a container around the car pictures, and use overflow-y:
scroll so I can scroll through them. How can I make it so I have two
buttons I can click so I can scroll through them with buttons via
javascript or jquery?
Here are 3 approaches using:
jQuery
plain javascript
CSS and javascript
The last approach which uses CSS Transitions delivers the smoothest and best animation.
Approach 1 (of 3)
You can use jQuery's custom animate({scrollTop: [value]}) method to scroll the images up and down.
Working example in jQuery:
$(document).ready(function(){
$('button').eq(0).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'});
});
$('button').eq(1).click(function(){
$('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'});
});
});
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 2 (of 3)
If you want to skip jQuery, here is an alternative version using plain javascript.
Working example in plain javascript:
var buttons = document.getElementsByTagName('button');
var imageContainer = document.getElementsByTagName('div')[0];
var scrollValue;
var scrollDirection;
function scroll() {
scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1);
scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158);
var startPoint = imageContainer.scrollTop;
var scrollDiv = setInterval(function() {
imageContainer.scrollTop += scrollDirection;
if (imageContainer.scrollTop === (startPoint + scrollValue)) {
scrollDirection = 0;
clearInterval(scrollDiv);
}
}, 1);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 596px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: auto;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Approach 3 (of 3)
As you will have noted, the plain javascript approach immediately above comes across as a bit slow and jerky. So in the end (as with all animations), the optimum approach is to deploy some CSS to handle the animation.
Working example in CSS and plain javascript:
var buttons = document.getElementsByTagName('button');
var images = document.getElementsByTagName('img');
var scrollValue;
function scroll() {
var imageTransformStyle = window.getComputedStyle(images[0]).transform;
var yStart = (imageTransformStyle.lastIndexOf(',') + 2);
var yEnd = imageTransformStyle.lastIndexOf(')');
var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd));
scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158;
var newPosition = currentPosition + scrollValue;
if (newPosition > 0) {newPosition = 0;}
if (newPosition < -316) {newPosition = -316;}
for (var i = 0; i < images.length; i++) {
images[i].style.transform = 'translateY(' + newPosition + 'px)';
}
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', scroll, false);
}
div, img, button {
display: inline-block;
vertical-align: top;
}
div {
width: 578px;
height: 152px;
padding: 12px;
background-color: rgb(63,63,63);
overflow-y: hidden;
}
img {
display: inline-block;
width: 100px;
height: 140px;
margin: 6px 6px 12px;
color: rgb(255,255,255);
background-color: rgb(255,127,0);
transform: translateY(0);
transition: transform 0.5s ease-out;
}
img:last-of-type {
margin-bottom: 24px;
}
<div>
<img alt="image-1" />
<img alt="image-2" />
<img alt="image-3" />
<img alt="image-4" />
<img alt="image-5" />
<img alt="image-6" />
<img alt="image-7" />
<img alt="image-8" />
<img alt="image-9" />
<img alt="image-10" />
<img alt="image-11" />
<img alt="image-12" />
<img alt="image-13" />
<img alt="image-14" />
<img alt="image-15" />
</div>
<button type="button">Scroll Up</button>
<button type="button">Scroll Down</button>
Goal:
To have a slideshow in this frame.
Here's a jsfiddle of it:
https://jsfiddle.net/kf3cqk6y/2/
$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}
<body>
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
</body>
Question:
How do I have the images display in the container?
You need to set the fiddle styling to be scss not css
Here's an updated fiddle
And if you want to include it in your web page, use the code from this fiddle