Sorry if I messed up the title. I am not really sure how to correctly describe my case. I am still a beginner.
Anyway, I am trying to create a simple hover effect over the images that will display a word out of unique Array, change it to another and repeat every .12s - sort of flashing effect.
I will have 8 images at start, which means I will have to create 8 unique arrays.
The problem is that, to make everything work, I had to multiply same function for every individual image/unique class, which to me, seems a little messy, even though it works.
Here is a little example for two containers - hover over the grey areas:
$(window).on("load", function() {
var LP1 = [
'ui',
'ux',
'webdesign',
'logo',
'responsive',
'personal'
], i = 0;
setInterval(function(){
$('.left-title').fadeOut(0, function(){
$(this).html(LP1[i=(i+1)%LP1.length]).fadeIn(0);
});
}, 120);
var LP2 = [
'cover',
'art',
'music',
'print',
'personal'
], i = 0;
setInterval(function(){
$('.right-title').fadeOut(0, function(){
$(this).html(LP2[i=(i+1)%LP2.length]).fadeIn(0);
});
}, 120);
});* {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
}
.wrap-fixed-real {
width: calc(100% - 32px);
height: calc(100% - 32px);
position: fixed;
top: 16px;
left: 16px;
z-index: 1;
}
.left {
top: 0;
position: absolute;
left: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.right{
top: 0px;
position: absolute;
right: 0px;
height: 100%;
width: calc(50% - 8px);
background-color: #292929;
}
.dimming {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
background-color: #000000;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.left:hover .dimming {
opacity: .4;
}
.left:hover .left-title {
opacity: 1;
}
.right-title {
position: absolute;
display: block;
width: calc(100% - 32px);
top: 50%;
transform: translateY(-50%);
left: 16px;
z-index: 3;
opacity: 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 32px;
text-align: center;
line-height: 48px;
color: #ffffff;
mix-blend-mode: difference;
transition: opacity .24s 0s cubic-bezier(.64,0,.36,1);
}
.right:hover .dimming {
opacity: .4;
}
.right:hover .right-title {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrap-fixed-real">
<div class="left">
<div class="left-title">LP1</div>
<div class="dimming"></div>
</div>
<div class="right">
<div class="right-title">LP2</div>
<div class="dimming"></div>
</div>
</div>
</body>Sorry for the messy code. If it comes to css, I guess I could create 8 different subclasses and 1 unique that will share same styles but I have no clue how to force single function to use different array for every image/unique class. I was doing some research on the internet but I couldn't find an answer. Maybe I am just using wrrong keywords in google, so if anyone could point me in the right direction, it would be nice. Or maybe creating what I want is possible, only by multiplying a function? I am not sure.
Summary: I want every unique Array to be connected with unique class and single function that will make "flashing inscription" effect happen.
There is also one more thing that I am not sure about. The effect that changes text every .12s will be played for 8 different images at a time. Is it going to slow down my website? Maybe in addition I should hide this effect at start, instead of just setting opacity to 0?
