I'm using animation property CSS to animate the window when the user clicks maximize button. The window is created ONLY when the maximize button was clicked and the animation is working, but the problem is when I click the close button the window is doesn't animate. How can I animate when the close button is click?
JavaScript:
Show project image.
_showProjectImage(e) {
const btn = e.target.closest('.projects__maximize-btn');
if (!btn) return;
const { id } = btn.dataset;
const { image } = this._data.find(image => image.id === +id);
this._projectBox = e.target.closest('.projects__box');
const markup = this._generateProjectImage(image);
this._projectBox.insertAdjacentHTML('afterbegin', markup);
}
Hide project image.
_hideProjectImage(e) {
const btnClose = e.target.closest('.btn__close-window');
if (!btnClose) return;
this._projectBox.removeChild(this._projectBox.firstElementChild);
}
HTML Element:
_generateProjectImage(image) {
return `
<div class="projects__window">
<div class="projects__window-content">
<button class="projects__window-close btn__close-window">
<svg class="projects__window-icon">
<use
xlink:href="${icon}#icon-close"
></use>
</svg>
</button>
<div class="projects__window-box">
<img src="${image}" alt="" class="projects__window-image">
</div>
</div>
</div>
`;
}
CSS:
.projects {
&__window {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
animation: window-animate 300ms linear;
}
}
#keyframes window-animate {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
Related
Please see "box5385.temp.domains/~atelifw5/test/" for reference
I have a div containing a background image that fades on hover. Also, when hovering the background image, a second div image (within the same container) transitions in, positioned on top of the background image.
When you click the top image, it runs JavaScript code that slides in a group of social media icons to the far right. My problem is, when the user hovers over the top image to click it, the background image is no longer faded and it needs to remain faded.
I cannot do this with CSS, because of the order of the divs in the HTML content, will not allow me to do so, and I cannot change the order as the top image will not appear on hover if I change the order. I have tried a number of things with JavaScript and jQuery, but I have been unsuccessful.
Below is my code:
function myFunction() {
var x = document.getElementById("hidden-social");
x.addEventListener("animationend", function(e) {
e.preventDefault();
if (x.style.animationName == "slide-left") {
x.style.display = "none";
}
});
if (x.style.display === "none") {
x.style.display = "block";
x.style.animation = "1s slide-right";
} else {
x.style.animation = "1s slide-left";
}
}
.fading-image {
opacity: 1;
transition: opacity 1s;
}
.fading-image:hover {
opacity: 0.5;
}
.cross-button {
opacity: 0;
transition: opacity 1s;
cursor: pointer;
position: relative;
top: -50px;
left: 325px;
}
.fading-image:hover~.cross-button,
.cross-button:hover {
opacity: 1;
}
.social-icon-2 {
width: 25px;
}
.social-icon-p2 {
width: 15px;
}
#hidden-social-container {
width: 200px;
height: 32px;
position: relative;
top: -80px;
left: 640px;
overflow: hidden;
}
#hidden-social {
width: 145px;
}
#keyframes slide-right {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
#keyframes slide-left {
from {
margin-left: 0%;
}
to {
margin-left: -100%;
}
}
<div class="ev-fade">
<div class="fading-image"><img src="http://box5385.temp.domains/~atelifw5/wp-
content/uploads/2022/12/RO_PIX_EV_03.png">
</div>
<div class="cross-button" onclick="myFunction()"><img src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png">
</div>
</div>
<div id="hidden-social-container">
<div id="hidden-social" style="display:none;">
<a href="https://instagram.com" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Instagram_Black.svg">
</a>
<a href="https://www.facebook.com/sharer/sharer.php?
u=http://box5385.temp.domains/~atelifw5/east-village" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black.svg">
</a>
<a href="https://twitter.com/share?url=http://box5385.temp.domains/~atelifw5/east-village/" target="_blank">
<img class="social-icon-2" src="http://box5385.temp.domains/~atelifw5/wp-
content/uploads/2022/12/Facebook_Black.svg"></a>
<a href="https://www.linkedin.com/shareArticle?url=http://box5385.temp.domains/~atelifw5/east-
village" target="blank"><img class="social-icon-
2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/LinkedIn_Black.svg">
</a>
<a href="https://pinterest.com/pin/create/button/" target="blank"><img class="social-icon-
p2" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg">
</a>
</div>
</div>
I changed the classes to Id's. Not that it was necessary, but it just happened along the way while I was working this out. The only thing I did was added the code below to my JavaScript code.
document.getElementById("cross-button").onmouseover = function() {
mouseOver()
};
document.getElementById("cross-button").onmouseout = function() {
mouseOut()
};
function mouseOver() {
document.getElementById("fading-image").style.opacity = "0.5";
}
function mouseOut() {
document.getElementById("fading-image").style.opacity = "1";
}
document.getElementById("fading-image").onmouseover = function() {
mouseOver()
};
document.getElementById("fading-image").onmouseout = function() {
mouseOut()
};
function mouseOver() {
document.getElementById("fading-image").style.opacity = "0.5";
}
function mouseOut() {
document.getElementById("fading-image").style.opacity = "1";
}
So previously I asked your help to execute a behaviour for when clicking a container div, said div would change height, clicking it again would revert it back to normal, as would clicking a sibling container div.
I also added code for when clicking said div, the img inside would change data-src.
This img div (not the container) has a sibling that is just text. It would change state through css, when the container div is clicked, a bit like the container div itself.
When adding the code for the data-src change, I lost this ability and cant find out why.
Can you help me?
This is my code:
const allImages = document.querySelectorAll('.containertira .imgclasstosize');
const allContainers = document.querySelectorAll('.containertira');
allContainers.forEach(el => {
el.addEventListener('click', function(event) {
const thisImg = el.querySelector('.imgclasstosize');
const thisTxt = el.querySelector('.centered');
const sibling = thisImg.nextElementSibling; // Get the next sibiling
const bigSrc = thisImg.dataset.srcBig;
const allOtherImages = Array.from(allImages).filter(img => {
return img !== thisImg;
});
const isBig = thisImg.classList.contains('big');
1
if (isBig) {
thisImg.classList.remove('big');
thisTxt.classList.remove('left');
// reset to the small image URL
thisImg.src = thisImg.dataset.smallSrc;
} else {
// save the small image URL first:
if (!thisImg.dataset.smallSrc) {
thisImg.dataset.smallSrc = thisImg.src;
}
// change to the big image URL:
thisImg.src = bigSrc;
thisImg.classList.add('big');
thisTxt.classList.add('left');
sibling.classList.remove('hide');
}
allOtherImages.forEach(img => {
img.classList.remove('big');
// reset to the small image URL
if (img.dataset.smallSrc) {
img.src = img.dataset.smallSrc;
}
img.nextElementSibling.classList[isBig ? 'remove' : 'add']("hide");
});
});
}
);
.imgclasstosize{
width: 100%;
object-fit: cover;
position: relative;
}
img.imgclasstosize {
height: 80px;
border: 1px solid gray;
transition : 1.5s all ease;
}
img.imgclasstosize.big {
height: 100%;
transition: 1.5s all ease;
width: 70vw;
margin-left: auto;
}
.containertira {
position: relative;
text-align: center;
color: white;
display: flex;
justify-content: space-between;
}
.imgclasstosize {
transition: all ease 0.5s;
}
.imgclasstosize.big {
/* transform: scale(1.1); */
}
.centered {
opacity: 1;
transition: all ease 0.5s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'blacker_pro_displayregular';
padding-top: 10px;
/* background: linear-gradient(90deg, rgba(33,37,41,1) 0%, rgba(255,255,255,0) 50%); */
color: white;
padding-left: 10px;
padding-bottom: 6.5px;
font-size: 5vh;
display:block;
pointer-events: none;
}
#media screen and (max-width: 960px) {.centered {font-size: 4.6vh;}}
#media screen and (max-width: 500px) {.centered {font-size: 3.5vh;}}
#media screen and (max-width: 375px) {.centered {font-size: 3vh;}}
.centered.left{
top: 0%;
left: 0%;
transform: translate(0%, 0%);
color: black;
padding-left: 10px;
padding-bottom: 6.5px;
transition: all ease 0.5s;
font-size: 7vh;
}
.imgclasstosize.big+.centered.hide {
opacity: 0;
}
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="//images.impresa.pt/expresso/2021-07-23-1---Minho.png-0c586cc8" data-src-big="//images.impresa.pt/expresso/2021-07-23-960px_minho.png-3938db2f">
<div class="centered">Minho</div>
</div>
<br>
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="//images.impresa.pt/expresso/2021-07-23-1---Minho.png-0c586cc8" data-src-big="//images.impresa.pt/expresso/2021-07-23-960px_minho.png-3938db2f">
<div class="centered">Minho</div>
</div>
Best regards everyone.
I can't seem to reproduce your error. Tried copying your code and pasting it on a separated HTML file and everything worked.
If you execute this snippet and look at the console, you will see that the classes and properties are changing accordingly to your code.
Maybe your code is executing before some library causing it to not execute something?
const allImages = document.querySelectorAll('.containertira .imgclasstosize');
const allContainers = document.querySelectorAll('.containertira');
allContainers.forEach(el => {
el.addEventListener('click', function(event) {
const thisImg = el.querySelector('.imgclasstosize');
const thisTxt = el.querySelector('.centered');
const sibling = thisImg.nextElementSibling; // Get the next sibiling
const bigSrc = thisImg.dataset.srcBig;
const allOtherImages = Array.from(allImages).filter(img => {
return img !== thisImg;
});
const isBig = thisImg.classList.contains('big');
1
if (isBig) {
thisImg.classList.remove('big');
thisTxt.classList.remove('left');
// reset to the small image URL
thisImg.src = thisImg.dataset.smallSrc;
} else {
// save the small image URL first:
if (!thisImg.dataset.smallSrc) {
thisImg.dataset.smallSrc = thisImg.src;
}
// change to the big image URL:
thisImg.src = bigSrc;
thisImg.classList.add('big');
thisTxt.classList.add('left');
sibling.classList.remove('hide');
}
allOtherImages.forEach(img => {
img.classList.remove('big');
// reset to the small image URL
if (img.dataset.smallSrc) {
img.src = img.dataset.smallSrc;
}
img.nextElementSibling.classList[isBig ? 'remove' : 'add']("hide");
});
});
}
);
.containertira {border:1px black solid;}
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png">
<div class="centered">Minho</div>
</div>
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png">
<div class="centered">Minho2</div>
</div>
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png">
<div class="centered">Minho3</div>
</div>
<div class="containertira">
<img id="primeiraimagem" class="imgclasstosize" src="img/Tiras/1 - Minho.png" data-src-big="img/INFO joao/joao 2/joao 2/960 px/960px_minho.png">
<div class="centered">Minho4</div>
</div>
I'm using vanilla JavaScript and would like to figure out a way where a div container is hidden, but when the user scrolls to 50% of the div container, that's when the div is fully visible. Kind of like a fading-in effect. This is what I have so far:
// delays scroll affects
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// adds animation for section cards
function cardActive(e) {
const cards = document.querySelectorAll('.slide-in');
// checks if image is half shown from bottom
cards.forEach(card => {
const slideInAt = (window.scrollY + window.innerHeight) - card.height / 2;
if (slideInAt > card.offsetTop) {
card.classList.add('active')
} else {
card.classList.remove('active');
}
})
};
window.addEventListener('scroll', debounce(cardActive));
.slide-in {
opacity: 50%;
transition: opacity 0.8s;
}
.slide-in.active {
transition: opacity 0.8s;
opacity: 100%;
visibility: visible !important;
}
.placeholder {
margin-top: 400px;
}
.icon {
width: 100px;
}
<div class="placeholder"></div>
<div class="mission-1 slide-in">
<div class="section-card">
<img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon">
<h6 class="mission-card-title">Title 1</h6>
<p class="p-special">Lorem Ipsum.</p>
</div>
</div>
<div class="placeholder"></div>
You need to make two small changes:
You need to replace card.height with card.offsetHeight in your JS file.
Use transition in your CSS file, you do not need animation for a fade in effect:
.slide-in {
opacity: 0%;
transition: opacity 0.8s;
}
.active {
transition: opacity 0.8s;
opacity: 100%;
visibility: visible !important;
}
Here the image is already shown with opacity 1 and then once scrolled over it it will fade using just JS.
// adds animation for section cards
window.addEventListener('scroll', (e) => {
last_known_scroll_position = window.scrollY;
let img = document.getElementById("img-1");
if(img.offsetTop < last_known_scroll_position){
img.style.opacity= 0.1;
}else{
img.style.opacity= 1;
}
});
.slide-in {
opacity: 50%;
}
.slide-in.active {
opacity: 100%;
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}
.lorem {
margin-bottom: 500px;
}
img {
width: 500px;
}
<section class="space">
<p class="lorem">lorem ipsum</p>
<div class="slide-in">
<img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti">
</div>
<p class="lorem">lorem ipsum</p>
</section>
Okay okay, so before marking this post as repeated. Let me explain to you:
I made a slideshow in javascript(Vue) and it works by changing its src in an object every time I press a button(next)
It works and all but the problem is that it doesn't get animated no matter what I do, I made a transition on them, set timeout function on it...etc and nothing even the smallest worked.
I could have made another idea which works by the position absolute but I don't want to do that because it will take a loot of time and it will be extremely buggy as position absolute ruins it. So any help on this please?
<template>
<main>
<div id="slideshow">
<figure id="pics">
<img id="slidepic" v-bind:src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
Javascript:
methods: {
move: function(num) {
let slideimg = document.querySelector("#slidepic");
slideimg.classList.add("fadeOut");
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
setTimeout(function() {
slideimg.src = this.pictures[1].src;
}, 1000);
}
}
CSS:
#pics {
opacity: 0.5s;
transition: 0.5s;
}
#pics.fadeOut {
opacity: 1;
}
I didn't include the object(that is in data object, something in Vue) because it would be useless in this situation.
First off all it's transition: <property-name> 0.5s linear; and not transition: 0.5s;. See the transition documentation.
There is no animation for changing the src of an image (see list of animatable css properties).
To do something like this, you can stack all your images into one element and then use css animations and the transform property to create a carousel
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var slideshow = document.getElementById('slideshow');
next.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var firstChild = slideshow.children[0];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
activeEle.classList.remove('active');
activeEle.classList.add('prev');
nextEle.classList.add('active');
nextEle.classList.remove('next');
prevEle.classList.remove('prev');
if (nextEle.nextElementSibling) {
nextEle.nextElementSibling.classList.add('next');
} else {
firstChild.classList.add('next');
}
};
prev.onclick = function() {
var lastChild = slideshow.children[slideshow.children.length - 1];
var activeEle = document.querySelector('.item.active');
var nextEle = document.querySelector('.item.next');
var prevEle = document.querySelector('.item.prev');
// Move the .active class to the previous element
activeEle.classList.remove('active');
activeEle.classList.add('next');
prevEle.classList.add('active');
prevEle.classList.remove('prev');
nextEle.classList.remove('next');
if (prevEle.nextElementSibling) {
prevEle.nextElementSibling.classList.add('prev');
} else {
lastChild.classList.add('prev');
}
};
#slideshow {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.item {
width: 100%;
height: 100%;
color: white;
background-color: blue;
position: absolute;
/*display: none;*/
top: 0;
left: 0;
z-index: -100;
transition: translateX(-100%);
transition: transform .5s ease-in-out;
opacity: 0;
}
.active {
opacity: 1;
display: block;
z-index: 1;
transform: translateX(0);
}
.next {
transform: translateX(200%);
z-index: 1;
}
.prev {
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
<div id="slideshow">
<div class="item active">1</div>
<div class="item next">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item prev">7</div>
</div>
<button type="button" id="prev">Prev</button><button type="button" id="next">Next</button>
As you mention you want to build a slideshow on Vue JS, and because jQuery on top of Vue is not recommended, I suggest that you try Vueper Slides, available on NPM. Unless it is for a learning purpose.
I have created two solutions.
First of all. You've a typo.
#pics {
opacity: 0.5s; // <--- remove "s"
transition: 0.5s; // <--- and forgot the property-name (all, opacity ...)
}
#pics.fadeOut {
opacity: 1;
}
I commented all lines I've changed.
Solution
<template>
<main>
<div id="slideshow">
<!--
I recommend to you ref inestad of querySelector.
https://vuejs.org/v2/api/#ref
I've used the v-bind shorthand.
-->
<figure id="pics1" ref="pics1">
<img id="slidepic" :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
<!--
VueJS build-in transition element.
You have to add a key attribute to detect that the content has changed.
I recommend to use this instead of your solution.
It's easier to implement, no class add/remove struggle, its a part of vue, you can add hooks etc.
https://vuejs.org/v2/guide/transitions.html
-->
<transition tag="figure" name="fade" ref="pics2">
<figure id="pics2" :key="`figure-${count}`">
<img :src="pictures[count].src">
<figcaption>{{pictures[count].alt}}</figcaption>
</figure>
</transition>
</div>
<p>{{count+1}}/{{pictures.length}}</p>
<div id="controls">
<div #click="move(-1)">Previous</div>
<div #click="move(1)">Next</div>
</div>
</main>
</template>
<script>
export default {
name: 'teams',
data() {
return {
count: 0,
pictures: [
{
src: 'https://picsum.photos/200/300',
alt: 'test'
},
{
src: 'https://picsum.photos/200/400',
alt: 'test2'
}
]
};
},
methods: {
// instead of move: function(num) {} you can also write move() {}
move(num) {
this.count += num;
if (this.count < 0) {
this.count = this.pictures.length - 1;
} else if (this.count >= this.pictures.length) {
this.count = 0;
}
}
},
// Watch "count" changes and add or remove classes
// you can also add this to your "move" method
watch: {
count() {
// access the reference
const element = this.$refs.pics1;
element.classList.add('fadeOut');
element.classList.remove('fadeIn');
setTimeout(() => {
element.classList.remove('fadeOut');
element.classList.add('fadeIn');
}, 500); // same duration as css transition
}
}
};
</script>
<style scoped lang="scss">
#pics1 {
opacity: 1;
transition: opacity 0.5s;
}
#pics1.fadeIn {
opacity: 1;
}
#pics1.fadeOut {
opacity: 0;
}
// All classes for <transition>
// There are all automatically used by vue
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-leave {
display: none;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
I am using swiper slider in my project, and I am wondering how can I have some smooth transition from image placeholders that I would replace with real images when they are loaded. So, in my case I have made a slider that looks like this:
<div class="swiper-slide">
<a href="/player/{{ $player->id }}/{{ $player->fullName }}">
<div class="mdc-card player-slider-card">
<img data-src="https://placeimg.com/250/300/any" class="player-images"/>
<div class="card-img-overlay">
<section class="mdc-card__media">
<i class="material-icons player-icon">person_outline</i>
<h3 class="mdc-card__title mdc-card__title--large">{{ $player->first_name }} {{ $player->last_name }}</h3>
</section>
<div class="mdc-card__primary">
<h4 class="mdc-card__subtitle">
{{ $player->nationality }}
#if($player->position != '')
| {{ $player->position }}
#endif
</h4>
</div>
</div>
</div>
</a>
</div>
I have made img tags with data-src attribute that I am later removing and adding the src attribute, when the images are loaded and I am at the same time removing the icon person_outline that I have as an image placeholder. This is the scss file:
app.scss
$white: #fff;
#mixin pulse {
-webkit-animation: pulse .65s infinite alternate;
animation: pulse .65s infinite alternate;
}
#keyframes pulse {
0%{opacity:.5}100%{opacity:1}
}
.slider-section {
position: relative;
.arrow-left, .arrow-right {
position: absolute;
top: 40%;
z-index: 10;
}
.arrow-left {
left: 5px;
}
.arrow-right {
right: 5px;
}
.swiper-slide {
a {
text-decoration: none;
}
}
.player-slider-card {
background: #E1E9EE;
color: $white;
width: 250px;
#include pulse;
h3, h4 {
#include pulse;
color: $white;
}
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
.mdc-card__media {
height: 300px;
}
.player-icon {
margin: auto;
font-size: 78px;
margin-bottom: 50px;
margin-top: 50px;
}
}
}
And this is the js file:
app.js
import Swiper from 'swiper';
const removePlaceholder = (item) => {
setTimeout(() => {
let slides = document.querySelectorAll(`.${item}-slider-card`);
let images = document.querySelectorAll(`.${item}-images`);
let placeholders = document.querySelectorAll(`.${item}-icon`);
slides.forEach(el => {
el.classList.remove(`${item}-slider-card`);
});
images.forEach(el => {
el.setAttribute('src', el.getAttribute('data-src'));
el.removeAttribute('data-src');
})
placeholders.forEach(el => {
el.remove();
})
}, 3000);
}
const sliderOptions = (nextEl, prevEl) => {
return {
direction: 'horizontal',
slidesPerView: 5,
simulateTouch: false,
spaceBetween: 1,
navigation: {
nextEl,
prevEl,
},
on: {
imagesReady:() => {
removePlaceholder('player');
},
},
breakpoints: {
1181: {
slidesPerView: 5
},
1180: {
slidesPerView: 4
},
1020: {
slidesPerView: 3
},
700: {
slidesPerView: 2
}
}
}
}
let videoOptions = sliderOptions('.js-arrow-videos-right', '.js-arrow-videos-left');
let playerOptions = sliderOptions('.js-arrow-players-right', '.js-arrow-players-left');
let swiperVideos = new Swiper('.js-videos-slider', videoOptions);
let swiperPlayers = new Swiper('.js-players-slider', playerOptions);
I have made a jsfiddle here. What I am wondering is how can I make a smooth transition when the images are being loaded. I thought I would maybe solve this with just a simple transition:
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
But, that didn't help, how can I achieve the similar effect to images on for example on themedium site or facebook.