Develop Reference

How do transitions work when fading in and out using css classes and javascript

I am trying to find out how transitions work. I am trying to make a thumbs up appear using a fade in fade out transition for a recycling simulator program, however, I do not know how understand how transitions work.
Here is a snippet of my html
<div class="thumbs-up-bg">
<i class="fas fa-thumbs-up" id="thumbs-up"></i>
</div>
<div class="thumbs-down-bg">
<i class="fas fa-thumbs-down" id="thumbs-down"></i>
</div>
Here is the CSS
.thumbs-up-bg {
position: absolute;
visibility: hidden;
background-color: green;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-up-bg.visible {
opacity: 1;
}
#thumbs-up {
font-size: 50px;
color: white;
}
.thumbs-down-bg {
position: absolute;
visibility: hidden;
background-color: red;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-down {
font-size: 50px;
color: white;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
opacity: 0;
transition: visibility 5s, opacity 2s linear;
}
Are transitions supposed to be set on the selector that is going to be changed? Is there a simpler way to complete this task?
Here is the Javascript
if (drop === trashDropZone){
if(!isRecyclable(draggable)){
alert("Success, it is garbage");
thumbsUp.classList.toggle("visible");
setTimeout(() =>{
thumbsUp.classList.toggle("visible");
thumbsUp.classList.toggle("hidden");
}, 1000);
makeInvisible(draggable);
} else{
//show thumbs down
alert("Thumbs down");
thumbsDown.classList.toggle("visible");
setTimeout(() =>{
thumbsDown.classList.toggle("visible");
thumbsDown.classList.toggle("hidden");
}, 1000);

Event listener not firing for some reason

I've adapted the code from Simply-Nav (great lightweight mobile nav – thanks obscuredetour) so that the background semi-transparent overlay fades in as opposed to sliding in with the nav.
Got that working fine, but what I've lost now is the ability to click/tap the semi-transparent overlay (on the right hand side) to close the whole nav.
The event listener is still there – pageOverlay.addEventListener('click', toggleNav); – but it's not firing pageOverlay.classList.remove('-open');.
The overlay div is no longer a child of the parent <ul class="nav-list">, so I don't know if that has something to do with it.
I've tried creating a transparent overlay over the overlay div, and add an eventlistener to that, but that hasn't worked.
Here's the code, if anyone has any ideas, I'd be really grateful for any help. I'm still a novice, so no doubt it's something obvious. Thanks so much.
/*
simply-nav.js - v1.2.1
https://github.com/obscuredetour/simply-nav
Licensed MIT © Jeffrey Summers
*/
// This anonymous function can be inserted anywhere
// (eg. within a <script> tag or anywhere in an existing .js file)
(simplyNavDuty => {
const sideNav = document.querySelector('.nav-list'),
toggleNavBtn = document.querySelector('.toggle-nav'),
burger = document.querySelector('.burger'),
pageOverlay = document.querySelector('.overlay'),
navLinks = document.querySelectorAll(".link"),
body = document.querySelector('body'),
html = document.querySelector('html');
// Disable page scroll
function disablePageScroll() {
if (sideNav.classList.contains('-open')) {
body.classList.add('_disableScroll');
html.classList.add('_disableScroll');
} else {
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
};
// Nav funtion (toggle)
function toggleNav() {
sideNav.classList.toggle('-open');
pageOverlay.classList.toggle('-open');
burger.classList.toggle('open');
disablePageScroll();
};
// To default
toDefaults = () => {
// Close nav menu
sideNav.classList.remove('-open');
pageOverlay.classList.remove('-open');
burger.classList.remove('open');
// Make sure scrolling is enabled
body.classList.remove('_disableScroll');
html.classList.remove('_disableScroll');
}
// Event listeners
toggleNavBtn.addEventListener('click', toggleNav);
pageOverlay.addEventListener('click', toggleNav);
// (on mobile) close nav menu when link is clicked
// this is useful on mobile when clicking an anchor tag on the current page (eg. index.html#last-section)
navLinks.forEach(el => {
el.addEventListener('click', (event) => {
toDefaults();
});
});
// when browser is resized (past breakpoint) reset to defaults
(function() {
window.addEventListener("resize", resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
function actualResizeHandler() {
// handle the resize event
// Window resized width
let width = window.innerWidth;
// If resized greater than BREAKPOINT (default: 800px), then reset nav functions
if (width >= 800) {
toDefaults();
}
}
}());
})();
/*******HAMBURGER TOGGLE*******/
.toggle-nav {
background-color: transparent;
cursor: pointer;
box-shadow: none;
border: 0;
outline: none;
margin: 0;
padding: 3vh;
}
.logo-link {
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
}
.logo-link>.logo {
max-width: 60px;
width: 100%;
height: auto;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: max-height 0.2s ease-in-out;
-webkit-transition: max-height 0.2s ease-in-out;
}
/*******HAMBURGER TOGGLE*******/
.nav-list {
background-color: transparent;
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 10vh;
bottom: 0;
left: -50rem;
width: 60%;
min-height: 100vh;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
z-index: 6;
}
.nav-list.-open {
width: 100%;
left: 0;
padding-bottom: 4.5rem;
}
.nav-list.-open>.list.-left {
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-list>.list.-left {
background: rgba(50, 31, 101, 0.95);
position: relative;
width: 60%;
height: 100%;
}
.overlay {
margin: 0;
padding: 0;
display: block;
min-height: 100vh;
background: rgb(0 0 0 / 65%);
position: absolute;
bottom: 0;
width: 100%;
top: 10vh;
cursor: pointer;
z-index: 5;
-webkit-overflow-scrolling: touch;
transition: all 0.3s ease-in-out;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
}
.toggle-overlay {}
.overlay.-open {
visibility: visible;
opacity: 1;
}
/****** LIST ITEMS ******/
.nav-list>.list>.item {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(176, 176, 176, 0.5);
}
.nav-list>.list>.item:last-child {
border-bottom: 0;
}
.nav-list>.list>.item>.link {
border-color: transparent;
text-decoration: none;
padding: 1.5rem 1rem 1.5rem 1rem;
flex-basis: 100%;
display: block;
background: transparent;
font-size: 1.5rem;
padding-left: 1.5rem;
color: #e0e0e0;
transition: all 0.3s ease-in-out;
}
.nav-list>.list>.item>.link:hover,
.nav-list>.list>.item>.link.-active {
color: #e90052;
}
._disableScroll {
overflow-y: hidden !important;
}
/***********BURGER BUTTON STYLES***********/
.burger {
height: 3em;
width: 3em;
position: relative;
font-size: 10px;
cursor: pointer;
-webkit-transition: .2s all;
-o-transition: .2s all;
transition: .2s all;
}
.burger:after {
content: '';
display: block;
position: absolute;
height: 150%;
width: 150%;
top: -25%;
left: -25%;
}
.burger>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger>.burger-lines:before {
left: 0;
top: 1em;
}
.burger>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-offset>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines,
.burger.-squeeze .burger-lines:before,
.burger.-squeeze .burger-lines:after {
-webkit-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
-o-transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze .burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset .burger-lines:before,
.burger.-squeeze.-offset .burger-lines:after {
width: 2em;
}
.burger.-squeeze.-offset .burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset .burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open .burger-lines,
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
-webkit-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
-o-transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open .burger-lines {
background-color: transparent;
}
.burger.-squeeze.open .burger-lines:before,
.burger.-squeeze.open .burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open .burger-lines:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger.-squeeze.open .burger-lines:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.burger-lines,
.burger-lines:after,
.burger-lines:before {
pointer-events: none;
display: block;
content: '';
width: 100%;
border-radius: 0.25em;
background-color: #e0e0e0;
height: 0.25em;
position: absolute;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.burger.-squeeze>.burger-lines {
top: 50%;
margin-top: -0.125em;
}
.burger.-squeeze>.burger-lines,
.burger.-squeeze>.burger-lines:after,
.burger.-squeeze>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze>.burger-lines:before {
left: 0;
top: 1em;
}
.burger.-squeeze.-offset>.burger-lines,
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
transition: .2s top .2s, .1s left, .2s transform, .4s background-color .2s;
}
.burger.-squeeze.-offset>.burger-lines:after,
.burger.-squeeze.-offset>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.-offset>.burger-lines:after {
left: 0;
top: -1em;
}
.burger.-squeeze.-offset>.burger-lines:before {
left: 1em;
top: 1em;
}
.burger.-squeeze.open>.burger-lines,
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
transition: .2s background-color, .2s top, .2s left, .2s transform .15s;
}
.burger.-squeeze.open>.burger-lines:after,
.burger.-squeeze.open>.burger-lines:before {
width: 2em;
}
.burger.-squeeze.open>.burger-lines {
background-color: transparent;
}
.burger.-squeeze.open>.burger-lines:before,
.burger.-squeeze.open>.burger-lines:after {
left: 0.5em;
top: 0px;
}
.burger.-squeeze.open>.burger-lines:before {
transform: rotate(-45deg);
}
.burger.-squeeze.open>.burger-lines:after {
transform: rotate(45deg);
}
<header>
<button class="toggle-nav" type="button">
<div class="burger -squeeze -offset" type="button">
<span class="burger-lines"></span>
</div>
</button>
<ul class="nav-list" role="navigation">
<div class="list -left">
<li class="item">
<a class="link" href="#">Menu item 1</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 2</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 3</a>
</li>
<li class="item">
<a class="link" href="#">Menu item 4</a>
</li>
</div>
</ul>
<div class="overlay"></div>
</header>

That actually looks like a css problem. The tag <ul class="nav-list -open"> has a width of 100%, and for that reason it fills up the whole screen, not allowing the mouse click to get to the overlay element. You should:
remove width: 100% on the -open class (the source of the problems)
remove width: 60% on the .list.-left (The child of the nav doesn't fill it, it doesn't make too much sense...)
set left: -80rem instead of 50rem in .nav-list (to fully hide it)
That would make it work.

Smooth scrolling effect for > Height (parallax effect)

I'm looking for parallax effect. Like this scroll effect.
All I got is this
HTML
<nav class="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
jQuery
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 80) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I want a more smooth effect, when I'm > 80px, like the scroll effect mentioned.

I have done a similar prototype using CSS Transitions and jQuery for a better smooth effect. Kindly check this out. CSS transitions are carried out by GPU, while jQuery transitions are made using CPU and mathematical calculations. So definitely it would look sluggish.
Also, I have used the same jQuery version (more or less) so that you don't need to mess up with the versions. :)
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 20)
$(".scrolled").addClass("show");
else
$(".scrolled").removeClass("show");
});
});
* {margin: 0; padding: 0; list-style: none; line-height: 1;}
body {font-family: 'Segoe UI';}
header {line-height: 5; text-align: center; -webkit-transition: all 0.5s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear;}
header.scrolled {line-height: 3; border-bottom: 2px solid #ccc; background-color: #fff; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 999;}
header.scrolled.show {height: 3em;}
.first {background-color: #ccf; position: relative; top: 0; left: 0; right: 0; height: 100%; margin-bottom: 1300px; z-index: 1;}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<header class="scrolled">
Scrolled Header
</header>
<div class="first">
<header class="normal">
Normal Header
</header>
</div>

Trouble getting Mobile Navigation menu working

I am attempting to create this mobile menu.
https://anythinggraphic.net/responsive-mobile-navigation-menu/
I have added all of the code and when I get the page into a mobile viewport, the page does nothing but show the two sets of periods "...". Unlike in the snippet, the page actually shows the list, just when it gets to the listed viewport, it shows the periods. I have the meta viewport code implemented and the Jquery vocab.
What am I doing wrong?
$(document).ready(function(){
$(function() {
// Insert Responsive Navigation Icon, Close Icon, and Overlay
// If you have access to your HTML, you should put this directly into your markup.
$('<div class="responsive-nav-icon" />').appendTo('.row.one');
$('<div class="responsive-nav-close" />').appendTo('nav');
$('<div id="overlay" />').insertAfter('footer');
// Navigation Slide In
$('.responsive-nav-icon').click(function() {
$('nav').addClass('slide-in');
$('html').css("overflow", "hidden");
$('#overlay').show();
return false;
});
// Navigation Slide Out
$('#overlay, .responsive-nav-close').click(function() {
$('nav').removeClass('slide-in');
$('html').css("overflow", "auto");
$('#overlay').hide();
return false;
});
});
});
.responsive-nav-icon::before,
.responsive-nav-close::before {
color: #93a748;
content: "\f0c9";
font-family: FontAwesome;
font-size: 22px;
position: relative;
}
.responsive-nav-close::before {
color: #93a748;
content: "\f00d";
font-size: 18px;
}
.responsive-nav-icon {
background: #fff;
line-height: normal;
padding: 5px 8px 4px;
top: 5%; left: 5%;
}
.responsive-nav-icon:hover,
.responsive-nav-close:hover {
opacity: .7;
}
.responsive-nav-close {
top: 10px; right: 10px;
}
.responsive-nav-icon,
.responsive-nav-close {
cursor: pointer;
display: none;
}
#overlay {
background: 0 0 rgba(0, 0, 0, 0.8);
display: none;
height: 100%;
position: fixed;
top: 0; left: 0;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 100%;
z-index: 90;
}
#media only screen and (max-width: 960px) {
.responsive-nav-icon,
.responsive-nav-close {
display: block;
position: absolute;
z-index: 1;
}
nav {
height: 100%;
padding: 20px;
position: fixed;
top: 0; left: -400px;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
width: 0;
}
nav.slide-in {
left: 0;
overflow-y: scroll;
width: 280px;
z-index: 100;
}
nav .menu-item {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div class="wrap">
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
<ul class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Login
</li>
</ul>
</nav>
</div>
</header>
<main class="content" itemprop="mainContentOfPage" role="main">
...
</main>
<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
...
</footer>

Looks like you are not linking the responsive jquery file ... css-jquery-responsive-mobile-navigation-menu.js

css opacity ease in out affecting other elements too

My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}

I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/

+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>