Develop Reference

Do Intersection Observer Animation and Hover effects not work together?

I'm working on a project that is using Intersection Observer to add animation to an element's style upon entry. However, what I'm noticing is that the : hover attribute no longer works when I apply the style. Am I doing this wrong, or, are these two not compatible? On the JS Fiddle, I've commented out the hover attribute by default. Try uncommenting it and see what happens.
I've tried banner.classList.add(/new class in here/) but that method also took away the :hover as well.
DEMO:
Demo

disable animation on hover because animations has a higher specificity
const options = {
root: null,
threshold: 1,
};
const banner = document.querySelector('.product-banner');
const observerAnim = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
banner.style.animation = '1s ease-in-out home-page-fade';
banner.style.animationFillMode = 'forwards';
observer.unobserve(banner);
});
}, options);
observerAnim.observe(banner);
body {
background-color: #fff;
min-height: 2000px;
}
img.product-banner {
opacity:0;
position: relative;
top: 1000px;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#keyframes home-page-fade {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
img.product-banner:hover {
animation: none !important;
opacity: 0.8;
transform: scale(0.9);
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
<h1>
Scroll Effect
</h1>
<img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">

Make a hamburger ID work in two headers

I am creating a clone of the header and when the scroll reach a certain height, the clone version will display. This works, as I want. The problem is that I am trying to get the “hamburger” action to work in both headers. Now it only works in first section. I need to get it working in section two also. I know I have used an ID (“trigger-overlay”), which should only be used one time and be unique.
Is this correct and the reason why it is not working? Do you guys know a workaround to fix this problem?
I need it to be an ID because of a more complex code in another script, but if it’s not possible to keep it I will do it in another way. I appreciate any help here. See JSFiddle
HTML
<section id="one">
<header class=""> <a id="trigger-overlay" class=""><span class="hamburger"></span></a>
</header>
</section>
<section id="two"></section>
CSS
section {
height:100vh;
}
#one{
background-color:#0097a7;
}
#two{
background-color:#00bcd4;
}
.hamburger, #trigger-overlay .hamburger:before, #trigger-overlay .hamburger:after {
cursor: pointer;
background-color:#80deea;
width:25px;
height:3px;
display:block;
border-radius:6px;
-webkit-transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}
#trigger-overlay {
float: left;
margin-left:15px;
}
.hamburger:before, .hamburger:after {
content:"";
position:absolute;
}
.hamburger {
position:relative;
top:19px;
}
.hamburger:before {
top:-7px;
}
.hamburger:after {
bottom:-7px;
}
/*Hamburger hover*/
#trigger-overlay .hamburger:hover, #trigger-overlay .hamburger:hover:before, #trigger-overlay .hamburger:hover:after {
background-color: #00838f;
}
header {
position: relative;
width: 100%;
height: 60px;
background-color:#00acc1;
}
header.clone {
position: fixed;
background-color: #00acc1;
top: 0px;
left: 0;
right: 0;
transform: translateY(-100%);
transition: 0.2s transform cubic-bezier(.3, .73, .3, .74);
}
body.down header.clone {
transform: translateY(0);
}
Vanilla JS
var triggerBttn = document.getElementById( 'trigger-overlay' );
var sticky = {
sticky_after: 200,
init: function () {
this.header = document.getElementsByTagName("header")[0];
this.clone = this.header.cloneNode(true);
this.clone.classList.add("clone");
this.header.insertBefore(this.clone, this.header.childNodes[1]);
this.scroll();
this.events();
},
scroll: function () {
if (window.scrollY > this.sticky_after) {
document.body.classList.add("down");
} else {
document.body.classList.remove("down");
}
},
events: function () {
window.addEventListener("scroll", this.scroll.bind(this));
}
};
function toggleOverlay() {
alert("I want to be active in both headers ");
}
triggerBttn.addEventListener( 'click', toggleOverlay );
document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

Unfortunately just using the same ID won't give you the same EventListeners. But, it's easy to get around your problem by simply adding the same EventListeners to the newly created clone:
document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
See a working version of your Fiddle here: http://jsfiddle.net/qfbq2b0k/4/

Sliding and fading a div element

I am trying to animate a div element (slide and fade) with a button click. At first, the element is not visible to a user. When the button is clicked, it will slide to right and fade in. Once the button is clicked again, it will slide to left and fade out. I come up with two solutions, with css and with JQuery.
In the first one, I used JQuery. You can find the example in this JSFiddle 1.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 1;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.stop(true, true).animate({
left: "toggle",
opacity: "toggle"
}, 1000);
});
Here, everything seems working but it does directly opposite of what I want. It first fades out, and with the second click, it fades in. It is because that the opacity of the element is 1, but if I turn it to 0, nothing happens.
Secondly, I tried to do that with css animation by using key-frames (changing opacity from 0 to 1) but it has also problem. It starts the animation exactly the way I want. However, when I click the button again, it disappears immediately. Here is the JSFiddle 2.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.move-my-modal {
-moz-transform: translate(250px, 0px);
-webkit-transform: translate(250px, 0px);
-ms-transform: translate(250px, 0px);
-o-transform: translate(250px, 0px);
}
.animate-opacity {
-webkit-animation: toggle-opacity 1s ease;
-moz-animation: toggle-opacity 1s ease;
-o-animation: toggle-opacity 1s ease;
animation: toggle-opacity 1s ease;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.toggleClass("move-my-modal");
$modal.toggleClass("animate-opacity");
});
To this end, I have these questions;
1) What are the problems with these two approaches? Is there something that I missed or forgot to use? How can I correct them to meet the requirements that I mentioned at the beginning.
2) Which one is the better way to make this action? Is there any cons or pros of these approaches?
3) Is there any other way to make this action? I am new on this area and I might not notice a simpler way.

You can toggle an .active class to the element and use CSS transitions.
This way, if the browser is old enough to not support animations, it will still work but it won't slow down computers that do not handle animations well.
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal.active {
opacity: 1;
left: 0;
}
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
transition: all 1s linear;
}
#my-modal.active {
opacity: 1;
left: 0;
}
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide menu sidebar when clicking outside the bar or the button

I am trying to make a menu like the semantic UI but I only achieved to click the menu button and open the menu and vice versa. I use toggle class to show the sidebar but I dont know if this way is completely right:
<div class="menu-button" id="menu-button"></div>
$('#menu-button').click(function(event) {
$('#hide-menu').toggleClass('show-menu');
});
.hide-menu {
background-color:#336ca6;
position: absolute;
top:0;
right:0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.show-menu {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I've tried the event propagation but I can't manage to make it play.

Edit your js code to following
$('#menu-button').click(function(e){
e.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('#hide-menu').click(function(e){
e.stopPropagation();
});
$('body,html').click(function(e){
$('#hide-menu').removeClass('show-menu');
});
Hope this will work.
Here is fiddle.
http://jsfiddle.net/ex8ddv5q/1/

For a different take on it check this Fiddle
$('#menu-button').click(function (evt) {
evt.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('body,html').click(function (e) {
var container = $("#hide-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('show-menu');
}
});

In case somebody comes here and is using Angular instead of JQuery, we got this to work with something similar to the above like this:
public toggleSideNav() {
this.showSideNav = !this.showSideNav;
console.log('show side nav', this.showSideNav);
event.stopPropagation();
}
public hideSideNav() {
this.showSideNav = false;
console.log('hide side nav');
}
And this in the template:
<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
<router-outlet></router-outlet>
</div>

Suppose if your sidebar width is 270px,check the mouse click coordinate.If it's greater give its style left attribute as -270px;
function handleMousePos(event) {
var mouseClickWidth = event.clientX;
if(mouseClickWidth>=270){
document.getElementById("mySidenav").style.left='-270px'
}
}
document.addEventListener("click", handleMousePos);
Here is my sample:https://codepen.io/johncy/pen/oMyzZr

$('body').click(function(){
$('#hide-menu').removeClass('show-menu');
});

Page elements flying in

My purpose is to modify my page to load elements by "flying in". I found this JSFiddle example, and I should now make it to happen on page load, without clicking anything. So it triggers on page load.
$(function() {
$("#add-sidebar-module").on("click", function() {
$("<div />", {
'class': "module",
text: "I'm new here."
}).prependTo("#sidebar");
});
$("#add-article").on("click", function() {
$("<div />", {
'class': "module",
html: "<h1>Title</h1><p>text text text.</p>"
}).prependTo("#main");
});
});
I'm also afraid that there is some kind of issues in what comes to the page loading and the animation. Tips and tricks to make sure it's as smooth as possible would be welcome!

http://jsfiddle.net/PJN6r/
<div class="animate-on-load">
This is animated
</div>
$('.animate-on-load').addClass('module');
As per your request.
I would not suggest triggering a click on page load. Just add the class on load.

This is more smooth effect: enter link description here
.module {
-webkit-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-moz-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-o-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-ms-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
}
#-webkit-keyframes flyin {
from {
opacity: 0;
-webkit-transform: scale(1.4);
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
#-moz-keyframes flyin {
from {
opacity: 0;
-moz-transform: scale(1.4);
}
to {
-moz-transform: scale(1);
opacity: 1;
}
}
#-o-keyframes flyin {
from {
opacity: 0;
-o-transform: scale(1.4);
}
to {
-o-transform: scale(1);
opacity: 1;
}
}
#-ms-keyframes flyin {
from {
opacity: 0;
-ms-transform: scale(1.4);
}
to {
-ms-transform: scale(1);
opacity: 1;
}
}
#keyframes flyin {
from {
opacity: 0;
transform: scale(1.4);
}
to {
transform: scale(1);
opacity: 1;
}
}
body {
padding: 50px;
}
.main, .sidebar {
padding: 1em;
}
.main {
float: left;
width: 60%;
}
.sidebar {
float: right;
width: 20%;
}
.module {
border: 0.5em solid #ccc;
background: #eee;
padding: 1.5em;
margin: 0 0 2em 0;
}
h1 {
margin-top: 0;
}

Check out this jQuery plugin. It animates any element you want when the page loads, so that you don't have to click anything.
Here is a demo of it.
To use this plugin, make sure you first include jQuery on any pages that use it, and include the JavaScript file as well.
Then wrap this tag around all elements you want to fly-in.
<div class="runway">
... fly-in elements go here ...
</div
Finally add either fly-in-right or fly-in-left class to the DOM element you wish to animate.
<img class="fly-in-left" src="..." />
And that should do it! When the element if visible on the page, it will animate a 'fly-in'!