Fading element in the center of window by scrolling - javascript

I use a script in which elements fade in from the left and right as soon as the respective element has been scrolled completely into view. The problem is, the fade-in remains until the element has completely disappeared from the field of view. I try to implement it in such a way that it fades out as soon as it is no longer completely in sight. Otherwise, all elements are shown at the same time when scrolling.
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), false);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 300px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>

Use the deltaY attribute in the wheel event to detect scrolling up vs down.
window.onwheel = function(event) {
let div = document.querySelector('div');
let opacity = getComputedStyle(div).opacity;
(event.deltaY <= 0) ? (div.style.opacity = +opacity-0.1) : (div.style.opacity = +opacity+0.1);
document.querySelector('p').innerHTML = 'deltaY: ' + event.deltaY;
};
div {
position: absolute;
top: 50%;
left: 50%;
height: 10em;
width: 10em;
transform: translate(-50%,-50%);
border-radius: 50%;
background: black;
transition: opacity 0.2s;
}
<div></div>
<p>deltaY: 0</p>
To try the example above, enter the full page mode for the snippet. Otherwise it will work, but still scroll on the page causing a not ideal effect. Scroll up for a higher opacity and scroll down for a lower opacity.

You can use Animate On Scroll Library
Its easy to use and its more efficient, hope this helped you

I've updated your code, will need some major cleanup but it demonstrates the solution: (i've changed the #loc containers height to 150px to make my solution reproducable in the small 'run code' preview here)
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), true);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 150px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.fadedbox{
transition:all 1s;
transform:translateX(-100%);
}
#locations-mobile>div:nth-child(even)>.fadedbox{
transform:translateX(100%);
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.old_fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
.fadeInRight{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.old_fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
.fadeInLeft{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>
Most relevant change is switching from css animations to css transitions, making it easier to fade elements in once the are fully in view, and out once they leave.
Come back to me in case you need further explanation here.

Related

Animation delay with html/css/js animation

I have an animation which makes text change by sliding vertically (similar to the one on groupebouchersports.com's homepage). The problem is, I want the text to stop longer (delay) before sliding out, but I cant seem to find how to do it. Here is my html / css / javascript code. Thanks in advance.
document.addEventListener('DOMContentLoaded', initTextAnimSlider);
function initTextAnimSlider() {
var textAnimHolder = document.querySelector('[data-words]');
var textAnimItem = document.querySelectorAll('.text-anim-item');
var textAnimItems = document.querySelector('.text-anim-items');
var animIn = 'anim-in';
var animOut = 'anim-out';
var lineActiveClass = 'line-active';
var animNextItem = null;
var animPrevItem = null;
var animFirstLoad = false;
var animDuration = textAnimHolder.getAttribute('data-delay');
var animCounter = 0;
var setTimeAnim;
var setTimeAnimResize;
animFunc();
getHolderWidth();
function animFunc() {
clearTimeout(setTimeAnim);
setTimeAnim = setTimeout(function () {
animFirstLoad = true;
if (animPrevItem !== null) {
animPrevItem.classList.add(animOut);
}
animNextItem = textAnimItems.children[animCounter];
animNextItem.classList.remove(animOut);
animNextItem.classList.add(animIn);
animPrevItem = animNextItem;
if (animCounter === textAnimItem.length - 1) {
animCounter = 0;
} else {
animCounter++;
}
animFunc();
}, animFirstLoad ? animDuration : 100);
}
function getHolderWidth() {
var itemsWidth = [];
for(var i =0; i < textAnimItem.length; i++) {
itemsWidth.push(textAnimItem[i].clientWidth);
console.log(textAnimItem[i].clientWidth);
}
textAnimHolder.style.width = '450px';
}
function resizeHandler() {
clearTimeout(setTimeAnim);
clearTimeout(setTimeAnimResize);
getHolderWidth();
setTimeAnimResize = setTimeout(function() {
animFunc();
}, 50);
}
window.addEventListener('resize', resizeHandler);
window.addEventListener('orientationchange', resizeHandler);
}
.text-anim-item {
white-space: nowrap;
position: absolute;
left: 0;
right:auto;
bottom: 0;
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
.text-anim-item.anim-in {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
-webkit-animation: textAnimIn .6s .3s forwards;
animation: textAnimIn .6s .3s forwards;
}
.text-anim-item.anim-out {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
-webkit-animation: textAnimOut .6s .3s forwards;
animation: textAnimOut .6s .3s forwards;
}
#-webkit-keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#-webkit-keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#-webkit-keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#-webkit-keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
#keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
<section class="bg-img intro-module">
<div class="block-center">
<div class="block-caption py-4 text-center text-md-left">
<h1 style="text-align:left;" class="display-1 mb-0">
<u class="mb-0" data-delay="1200" data-words>
<span style="text-align:left;" class="text-anim-items">
<span class="text-anim-item"><span>text</span></span>
<span class="text-anim-item"><span>text 2</span></span>
<span class="text-anim-item"><span>text 3</span></span>
</span>
<span class="anim-line"></span>
</u>
<br>
<span>lorem</span>
<br>
<span>ipsum</span>
<br>
<br>
<span><p>caption text</p></span>
</h1>
</div>
</div>
</section>
Adding a snippet to explain what I was referring to in the comments. The block id is only to have something for the text to hide behind as I think your intention is to have them scroll off screen.
span {
position: absolute;
left: 0;
right:auto;
top: 0;
font-size: 15pt;
}
#block {
position:absolute;
top: 100px;
left:0;
width: 300px;
height: 300px;
background: white;
}
#one {
animation: move 6s linear infinite;
color: red;
}
#two {
animation: move 6s linear -2s infinite;
color: blue;
}
#three {
animation: move 6s linear -4s infinite;
color: green;
}
#keyframes move {
0% {transform: translate(0, 0)}
33% {transform: translate(0, 0)}
66% {transform: translate(0, 200px)}
100% {transform: translate(0, 200px)}
}
<span id="one">Hello World</span>
<span id="two">World Hello</span>
<span id="three">No No No</span>
<div id="block"></div>

Slide element in when opening page, and slide it out when closing page

I went through dozens of questions here, but nothing answers my problem.
Basically I want to have the same feature as on this website: http://madebyheart.co.uk/work/thrively/ - when you load the page the [X] and MENU buttons slide from top, and when you click [X] to close the page they slide back up...
I tried looking at their code but it gives me headache.
I assume that's done with CSS + JS, but I have no clue where to start.
Check this out.
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.site__title.mega {
text-align: center;
font-size: 60px;
}
.ji:hover {
cursor: pointer;
}
.ji {
padding: 2px 14px;
border: 1px solid black;
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ji").click(function(){
$("#animationSandbox").removeClass("fadeInDown");
$("#animationSandbox").addClass("fadeInUp");
});
});
</script>
</head>
<body>
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
<h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>
EDIT:
For achieving fadein animation with display:inline-block; , you have to use fadein classes in inner divs as shown below.
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
body {
background: #f9f9f9;
margin: 0;
}
a {
text-decoration:underline;
color:#000;
position: relative;
}
/* ABOUT + CONTACT */
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 15px;
display: inline;
color: #000;
font-size: 13px;
}
.hlinks2 {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 100px;
display: inline;
color: #000;
font-size: 13px;
}
<span style="display: inline-block;" >
<div id="animationSandbox" class="hlinks fadeInLeft animated">
<span>
ABOUT —
CONTACT
</span>
</div>
</span>
animate.css is good library , Should meet your needs
DEMO:
https://daneden.github.io/animate.css/

I want that "mousewheel event delay"

I want that..
mousewheel event delay
example...I run wheeldown..so change "bg_02".
but change bg_05..
so i want delay
one wheeldown and change bg_01 -> bg_02
one wheeldown and change bg_02 -> bg_03
...
now wheeldown than change bg_01 -> bg_04 or wheeldown count ++
sorry my english is little
script
// Wheel
function wheel(){
if (event.wheelDelta >= 120){
wheelUp();
return;
}
else if (event.wheelDelta <= -120){
wheelDown();
}
}
var bgSpot = $('.bg_spot');
var bgSpot_Cnt = bgSpot.length;
bgSpot.eq(0).addClass('spot_on').css('top','0');
// Down
function wheelDown(i){
$('.spot_on').addClass('move_top');
$('.spot_on').next().css('top','0');
$('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
}
CSS
.bg_spot{position:fixed;top:100%;right:0;bottom:0;left:0;z-index:10;width:100%;height:100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;}
.move_top{
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);}
.move_stage{
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}
.top_0{top:0}
.bg_01{background:#ccc;}
.bg_02{background:#000;}
.bg_03{background:olive;}
.bg_04{background:green}
HTML
<body onmousewheel="wheel();">
<div class="bg_spot bg_01"> </div>
<div class="bg_spot bg_02"> </div>
<div class="bg_spot bg_03"> </div>
<div class="bg_spot bg_04"> </div>
</body>
changed your css and javascript. check the snippet
function wheel() {
if (event.wheelDelta >= 120) {
// wheelUp();
return;
} else if (event.wheelDelta <= -120) {
wheelDown();
}
}
// var bgSpot = $('.bg_spot');
// var bgSpot_Cnt = bgSpot.length;
// bgSpot.eq(0).addClass('spot_on').css('top', '0');
// Down
var i = 1,
j = 0;
function wheelDown() {
$('.bg_spot').hide();
$('.bg_0' + i).show();
// $('.spot_on').addClass('move_top');
// $('.spot_on').next().css('top', '0');
// $('.spot_on').next().addClass('spot_on').prev().removeClass('spot_on');
i++;
if (i > 4)
i = 1;
}
.bg_spot {
overflow: hidden;
position: absolute;
right: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
-webkit-transition: 0.6s ease;
-moz-transition: 0.6s ease;
-o-transition: 0.6s ease;
transition: 0.6s ease;
display: none;
}
.move_top {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.move_stage {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.top_0 {
top: 0
}
.bg_01 {
background: #ccc;
}
.bg_02 {
background: #000;
}
.bg_03 {
background: olive;
}
.bg_04 {
background: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onmousewheel="wheel();">
<div class="bg_spot bg_01" style="display:block;">
</div>
<div class="bg_spot bg_02">
</div>
<div class="bg_spot bg_03">
</div>
<div class="bg_spot bg_04">
</div>
</body>

Remove -webkit transform/transform class with JavaScript

I'm trying to create an expanding column layout: when you hover over the pictures it blurs and zooms and when you click on it it expands.
I'm trying to remove the blur and zoom effect once the image has expanded.
I've tried removeProp() and document.getElementById('').style.setProperty("webkit-filter", "none") but neither of them worked.
Any insights or tips would be greatly appreciated!!!
Thank you :)
Here's my JS:
var Expand = (function() {
var tile = $('.photo');
var tileLink = $('.photo > .photo-content');
var tileText = tileLink.find('.photo-inner-text');
var stripClose = $('.photo-close');
var tileAnimate = ('.photo:hover');
var expanded = false;
var open = function() {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('photo__expanded');
// add delay to inner text
tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('photo-close__show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
tileAnimate.removeProp('filter', '-webkit-filter');
expanded = true;
}
};
var close = function() {
if (expanded) {
tile.removeClass('photo__expanded');
// remove delay from inner text
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('photo-close__show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
expanded = false;
}
}
var bindActions = function() {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Expand.init();
My CSS (a little messy, I apologize):
#import url(https://fonts.googleapis.com/css?family=Oswald);
body {
margin: 0;
padding: 0;
background-color: #000;
}
div {
margin: 0;
padding: 0;
}
.main-container {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.photo {
background-color: #0c2d50;
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: 1s;
}
.photo:nth-child(1) {
left: 0;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:nth-child(2) {
left: 20vw;
background: url("../images/image2.jpg");
background-size: cover;
}
.photo:nth-child(3) {
left: 40vw;
background: url("../images/image3.jpg");
background-size: cover;
}
.photo:nth-child(4) {
left: 60vw;
background: url("../images/image4.jpg");
background-size: cover;
}
.photo:nth-child(5) {
left: 80vw;
background: url("../images/image1.jpg");
background-size: cover;
}
.photo:active,
.photo:hover {
opacity: 1;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome */
-moz-transform:scale(1.15); /* Firefox */
-ms-transform:scale(1.15); /* IE 9 */
-o-transform:scale(1.15); /* Opera */
transform:scale(1.15);
}
.photo {
background-color: #000;
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
.photo:nth-child(1) .photo-content {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-animation-name: photo1;
animation-name: photo1;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.photo:nth-child(2) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo2;
animation-name: photo2;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.photo:nth-child(3) .photo-content {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-animation-name: photo3;
animation-name: photo3;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.photo:nth-child(4) .photo-content {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-animation-name: photo4;
animation-name: photo4;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.photo:nth-child(5) .photo-content {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-animation-name: photo5;
animation-name: photo5;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
/*******************************************************
.photo a:active img,
.photo a:hover img {
opacity: .6;
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transform:scale(1.15); /* Safari and Chrome
-moz-transform:scale(1.15); /* Firefox
-ms-transform:scale(1.15); /* IE 9
-o-transform:scale(1.15); /* Opera
transform:scale(1.15);
}
.photo img {
height: 100vh;
-webkit-transition: all .5s ease; /* Safari and Chrome
-moz-transition: all .5s ease; /* Firefox
-o-transition: all .5s ease; /* IE 9
-ms-transition: all .5s ease; /* Opera
transition: all .5s ease;
}
****************************************************/
.photo-content {
position:relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* text hidden */
.photo-title {
color: #ffffff;
text-align: center;
font-family: 'Oswald';
font-size: 4em;
line-height: 1.2em;
z-index: 1000;
width: 100%;
position: absolute;
top: 60px;
left: 10px;
opacity: 0;
-webkit-transition: all .5s ease; /* Safari and Chrome */
-moz-transition: all .5s ease; /* Firefox */
-o-transition: all .5s ease; /* IE 9 */
-ms-transition: all .5s ease; /* Opera */
transition: all .5s ease;
}
/* text shown on hover */
.photo a:active .photo-title,
.photo a:hover .photo-title {
opacity: 1;
-webkit-animation: flicker 2s infinite; /* Flicker effect */
-webkit-transition: all 1.5s ease; /* Safari and Chrome */
-moz-transition: all 1.5s ease; /* Firefox */
-o-transition: all 1.5s ease; /* IE 9 */
-ms-transition: all 1.5s ease; /* Opera */
transition: all 1.5s ease;
}
#-webkit-keyframes flicker {
0% {opacity:0;}
9% {opacity:0;}
10% {opacity:.5;}
13% {opacity:0;}
20% {opacity:.5;}
25% {opacity:1;}
}
/* added for slider */
.main-container .photo-content {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.main-container .photo-content:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.05;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.main-container .photo-inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
-webkit-transform: translate(-50%, -50%) scale(0.5);
-ms-transform: translate(-50%, -50%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.photo__expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
min-height: 100vh;
}
.photo__expanded .photo-title {
opacity: 0;
}
.photo__expanded .photo-inner-text {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.photo-close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.photo-close__show {
opacity: 1;
}
#-webkit-keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo1 {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo2 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo3 {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo4 {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes photo5 {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fa {
font-size: 30px;
color: white;
}
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abtin Animation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootloader.css">
</head>
<body>
<section class="main-container">
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">DREAM</div>
<div class="photo-inner-text"><h1>hey</h1><p>testing</p></div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LIVE</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">PLAY</div>
</div>
</article>
<article class="photo">
<div class="photo-content">
<div class="photo-title">LAUGH</div>
</div>
</article>
<i class="fa fa-close photo-close"></i>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

slider jquery class not being applied until too late

so simply put ... the simple slider you use the right arrow to go to the next slide and it should immediately apply a class called bounceInUp .... it does this but not until about 1 second after so you have static text , then the effect and I just want to have the text effect from slide start, ...nothing seems to rectify the problem...
I think it may pertain to the transitionend not actually ending until the next slide so was thinking maybe an onclick event for the button itself but i am not sure how to do that...
anyway here is a jsfiddle enter link description here
and here is the jquery , (all is included in the fiddle)
the main jquery code
$(document).ready(function() {
//Store a ref to slides
var $slides = $(".slides");
//Bind event to the contianed that gets animated
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// Remove classes from all the elements within the active container that starts with the class 'add-anim'
$slides.find(".slide-container [class^='add-anin']").removeClass("animated bounceInUp");
//Add appropriate classes to the matched elements within the active container
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-up-late").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft");
});
});
The button click event is where its at.
You will need to style it the way you want it but I think it does what you want.
Fiddle:http://jsfiddle.net/3hr4ua79/
$(document).ready(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active animated bounceInUp');
} else {
$('.oldActive').next().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active animated bounceInUp');
} else {
$('.oldActive').prev().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
#slider-wrapper {
width: 100%;
height: 200px;
}
#slider {
width: 100%;
height: 200px;
position: relative;
}
.sp {
width: 100%;
height: 200px;
position: absolute;
}
#nav {
margin-top: 20px;
width: 100%;
}
#button-previous {
position: relative;
top: -100px;
}
#button-next {
position: relative;
top: -100px;
float: right;
}
body {
overflow: hidden;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;">akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<input type="button" id="button-previous" value="Previous">
<input type="button" id="button-next" value="Next">

Categories