This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>
Related
How to apply classList.toggle("active") in reactjs.
i create a two buttons and give onclick function togglePopup and define it at top. but i'm confused how to apply document.getElementById('popup-1').classList.toggle("active")in react. i apply this method in javaScript and i don't know how it is work in react?
Popup.jsx
const Filter = () => {
const togglePopup = () => {
document.getElementById('popup-1').classList.toggle("active")
}
return (
<>
<button className='p-3 border bg-blue-400'>click</button>
<div className="popup" id="popup-1">
<div className="overlay"></div>
<div className="content">
<div className="close-btn" onClick={togglePopup}>Ă—</div>
<h1 className='text-2xl font-bold'>title</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non debitis officia neque nostrum, perspiciatis sed quaerat veritatis numquam, explicabo dolorum aliquam illo dolor at nemo maxime consequatur facilis magni laudantium! Ipsa eveniet quam, illum quos laudantium a placeat temporibus dolores libero pariatur quibusdam atque impedit magnam nam ipsum, rerum sapiente?</p>
</div>
</div>
Popup.css
.popup .overlay{
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background:rgba(0, 0, 0, 0.7);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: 450px;
height: fit-content;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn{
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height:30px;
text-align:center;
border-radius: 50%;
cursor: pointer;
}
.popup:active .overlay{
display: block;
}
.popup:active .content{
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
You should not be querying or manipulating the DOM from React. If you want to toggle a class have your button update your component’s state and then render the markup according to that state.
function MyComponent () {
const [active, setActive] = useState(false);
return (
<div className={active ? 'active' : ''}>
<button onClick={() => setActive(!active)}>Toggle</button>
</div>
)
}
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
pointer-events: none;
}
<body>
<div id="overlay"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">Ă—</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
From the above code if you click on the button it makes a modal appear by setting it's display to block, now what i want is that when you click outside the modal the modal will disappear, can anyone help with a code for that. i have tried
var modal = document.getElementById('modal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
but that doesn't work
i have checked other question on stack overflow about this but none of them work
You already have all the pieces, you just need to put it all together. Remove the pointer-events: none; from the overlay CSS so we can click on it. Then add the onclick="modalclose()" to your overlay. Thats it.
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
<body>
<div id="overlay" onclick="modalclose()"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">Ă—</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
You can find where is the click happem, like this
window.addEventListener("click", function(e) {
if (document.getElementById("modalWindow").contains(e.target)) {
alert("clicked inside");
} else {
alert("clicked outside");
}
});
Modals are pretty simple in nature. Most basic example would be consisting of modal itself, close button inside (or sometimes outside modal) and backdrop.
basic modal setup
Now what you want to do is close modal whenever backdrop or close button is clicked. Now there is a design decision to be made, you can include modal inside a backdrop, or keep them on the same level in DOM. From your example I can see that you went with second option. In this case all you need to do is add onClick event to backdrop.
<div id="overlay" onclick="modalclose()"></div>
In case you would have modal inside backdrop you would additionally need to stop event propagation, because any click inside modal would trigger it's parents (including backdrop) onClick events.
var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){
event.stopPropagation();
});
I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>
I already made a long search here for the solution, but can't find anything...
I'm using the code from this pen: https://codepen.io/digistate/pen/MvapbE
I changed the videos for youtube, the autoplay works nice, but the slider is not automated, I would like the slide change to another item automatically, image or video, and when this item is video, it autoplay until the end, and after that change for the next item...
It can be done?
Thanks!
var slideWrapper = $(".main-slider"),
iframes = slideWrapper.find('.embed-player'),
lazyImages = slideWrapper.find('.slide-image'),
lazyCounter = 0;
// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command){
if (player == null || command == null) return;
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
// When the slide is changing
function playPauseVideo(slick, control){
var currentSlide, slideType, startTime, player, video;
currentSlide = slick.find(".slick-current");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
startTime = currentSlide.data("video-start");
if (slideType === "vimeo") {
switch (control) {
case "play":
if ((startTime != null && startTime > 0 ) && !currentSlide.hasClass('started')) {
currentSlide.addClass('started');
postMessageToPlayer(player, {
"method": "setCurrentTime",
"value" : startTime
});
}
postMessageToPlayer(player, {
"method": "play",
"value" : 1
});
break;
case "pause":
postMessageToPlayer(player, {
"method": "pause",
"value": 1
});
break;
}
} else if (slideType === "youtube") {
switch (control) {
case "play":
postMessageToPlayer(player, {
"event": "command",
"func": "mute"
});
postMessageToPlayer(player, {
"event": "command",
"func": "playVideo"
});
break;
case "pause":
postMessageToPlayer(player, {
"event": "command",
"func": "pauseVideo"
});
break;
}
} else if (slideType === "video") {
video = currentSlide.children("video").get(0);
if (video != null) {
if (control === "play"){
video.play();
} else {
video.pause();
}
}
}
}
// Resize player
function resizePlayer(iframes, ratio) {
if (!iframes[0]) return;
var win = $(".main-slider"),
width = win.width(),
playerWidth,
height = win.height(),
playerHeight,
ratio = ratio || 16/9;
iframes.each(function(){
var current = $(this);
if (width / ratio < height) {
playerWidth = Math.ceil(height * ratio);
current.width(playerWidth).height(height).css({
left: (width - playerWidth) / 2,
top: 0
});
} else {
playerHeight = Math.ceil(width / ratio);
current.width(width).height(playerHeight).css({
left: 0,
top: (height - playerHeight) / 2
});
}
});
}
// DOM Ready
$(function() {
// Initialize
slideWrapper.on("init", function(slick){
slick = $(slick.currentTarget);
setTimeout(function(){
playPauseVideo(slick,"play");
}, 1000);
resizePlayer(iframes, 16/9);
});
slideWrapper.on("beforeChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick,"pause");
});
slideWrapper.on("afterChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick,"play");
});
slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
lazyCounter++;
if (lazyCounter === lazyImages.length){
lazyImages.addClass('show');
// slideWrapper.slick("slickPlay");
}
});
//start the slider
slideWrapper.slick({
// fade:true,
autoplaySpeed:4000,
lazyLoad:"progressive",
speed:600,
arrows:false,
dots:true,
cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
});
});
// Resize event
$(window).on("resize.slickVideoPlayer", function(){
resizePlayer(iframes, 16/9);
});
$fonts: Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
$bg_color: #2d3042;
$font_color: #efefef;
$link_color: #efefef;
$link_hover_color: #fff;
*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: $fonts;
background-color: $bg_color;
position: relative;
color: $font_color;
text-align: center;
a, a:visited {
color: $link_color;
text-decoration: none;
}
a:hover {
color: $link_hover_color;
}
}
%bv_hidden {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
%filled_obj {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 0 5%;
text-align: left;
z-index: 1;
h1 {
display: inline-block;
font-size: 22px;
font-weight: bold;
padding-top: 18px;
}
nav {
display: inline-block;
float: right;
ul {
li {
display: inline-block;
vertical-align: top;
font-size: 13px;
a {
display: block;
padding: 24px 15px;
&:hover {
background-color: rgba(#fff, .18);
}
}
}
}
}
}
.main-slider {
position: relative;
width: 100%;
height: 38vw;
min-height: 8vw;
margin-bottom: 50px;
opacity: 0;
visibility: hidden;
transition:all 1.2s ease;
&.slick-initialized {
opacity: 1;
visibility: visible;
}
}
.slick-slide {
position: relative;
height: 38vw;
#extend %bv_hidden;
&::before {
#extend %filled_obj;
#extend %bv_hidden;
background-color: #000;
opacity: .3;
z-index: 1;
}
video {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform:translate(-50%, -50%);
}
iframe {
position: relative;
pointer-events: none;
}
figure {
position: relative;
height: 100%;
}
.slide-image {
opacity: 0;
height: 100%;
background-size: cover;
background-position: center;
// background-color:rgba(#c46897,.38);
// background-blend-mode:overlay;
transition:all .8s ease;
&.show {
opacity: 1;
}
}
.image-entity {
width: 100%;
opacity: 0;
visibility: hidden;
}
.loading {
position: absolute;
top: 44%;
left: 0;
width: 100%;
}
.slide-media {
animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
&.slick-active {
z-index: 1;
.slide-media {
animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
.caption {
opacity: 1;
transform:translateY(0);
transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
}
}
}
.caption {
position: absolute;
top: 44%;
left: 5%;
text-align: center;
padding: 20px;
border: 3px solid;
color: #fff;
margin: 0;
font-size: 40px;
font-weight: bold;
letter-spacing: .02em;
opacity: 0;
z-index: 1;
transition:all .3s ease;
transform:translateY(100px);
#extend %bv_hidden;
}
.slick-dots {
text-align: center;
padding-top: 15px;
li {
display: inline-block;
vertical-align: top;
margin: 0 8px;
button {
width: 16px;
height: 16px;
border: none;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 0 transparent;
vertical-align: middle;
color: #fff;
background-color: #fff;
transition:all .3s ease;
opacity: .4;
&:focus {
outline: none;
}
&:hover {
opacity: 1;
}
}
&.slick-active {
button {
border-color: $bg_color;
box-shadow: 0 0 0 2px #fff;
opacity: 1;
}
}
}
}
.container {
background-color: #f2f2f2;
color: #444;
line-height: 1.6;
padding: 40px 0;
.content {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
p {
margin-bottom: 40px;
}
}
#keyframes slideIn {
from {
filter:blur(15px);
}
to {
filter:blur(0);
}
}
#keyframes slideOut {
from {
filter:blur(0);
}
to {
filter:blur(15px);
}
}
<header>
<h1>SITE TITLE</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section class="main-slider">
<div class="item image">
<span class="loading">Loading...</span>
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item vimeo" data-video-start="4">
<iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=1&autoplay=0&id=217885864" width="980" height="520" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p class="caption">Vimeo</p>
</div>
<div class="item image">
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item youtube">
<iframe class="embed-player slide-media" width="980" height="520" src="https://www.youtube.com/embed/QV5EXOFcdrQ?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&playlist=QV5EXOFcdrQ&start=1" frameborder="0" allowfullscreen></iframe>
<p class="caption">YouTube</p>
</div>
<div class="item image">
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item video">
<video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00">
<source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
</video>
<p class="caption">HTML 5 Video</p>
</div>
</section>
<section class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>
</div>
</section>
Have you tried adding autoplay:true option in your slick initializing function? It works just fine for me.
https://codepen.io/anon/pen/qzydop
Also if you want to loop through slides you can add infinite: true option.
I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.
The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.
If it helps, here's the fiddle.
HTML:
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
Javascript:
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});
This your problem
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
You add transition css to slide element, it make slide effect not working correctly, you must remove it
you can try this jsfiddle
I was able to achieve the desired effect using CSS, instead of jquery. I used max-height transitions to make the tabs slide both up and down smoothly.
Here's the updated fiddle.
And here's the new CSS:
///// RESPONSIVE ACCORDION TO TABS
.project-container {
display: block;
}
.project-nav {
list-style: none;
position: relative;
}
.project-nav a:active{
opacity:1;
}
.project-nav .project-tab {
display: inline;
}
.project-nav > .project-tab > a {
display: inline-block;
padding: 10px 15px;
background-color: #00A88C;
border: solid 1px #00A88C;
border-radius: 0px 10px;
text-decoration: none;
color: #fff;
width:40%;
font-size: 30pt;
clear: both;
text-align: center;
}
#project-tab-1 {
margin-right: 2%;
margin-left: 7%;
}
#project-tab-2 {
margin-left: 2%;
}
#project-tab-link:hover {
background-color: #13ebc7;
border-color: #13ebc7;
}
#project-tab-link.active {
color: #00A88C!important;
background-color: rgba(19, 235, 199, 0)!important;
}
#project-tab-link.active:hover {
border-color: #00A88C;
}
.project-nav section {
position: absolute;
top: -9999px;
left: -9999px;
float: left;
color:#5c5c5c;
overflow: hidden;
border: solid 1px #00A88C;
width:100%;
margin-top:10px;
padding-bottom: 15px;
opacity: 0;
}
.project-nav section.is-open {
position: static;
opacity: 100;
}
.project-tab section p {
font-family:'century gothic';
padding: 0px 30px;
}
.project-tab section p:empty {
display: none;
}
#current-project-title{
font-size: 16pt;
}
#current-project-link {
float: right;
padding: 5px;
background: #00A88C;
color:#fff;
margin-right: 30px;
width: auto;
}
#current-project-link:hover {
background: #13ebc7;
}
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#media only screen and (max-width: 730px) {
#front-page-textbox{
background: #0f2347;
color: #fff;
}
.project-container {
margin-bottom: 10px;
}
.project-nav .project-tab a {
display: block;
width:100%;
border-radius: 0px;
}
#project-tab-1, #project-tab-2 {
margin-left: 0;
margin-right: 0;
}
.project-nav .project-tab a.active {
border: solid 1px #13ebc7;
}
.project-nav section {
margin:0;
position: relative;
top: auto;
left: auto;
float: none;
max-height:0;
padding-bottom: 0px;
opacity: 100;
}
.project-nav section.is-open {
border-radius: 0px;
border-top: none;
max-height: 1200px;
}
.project-tab > a:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
float: right;
font-size: 20pt;
margin-top: 10px;
}
.project-tab > a.active:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float:right;
font-size: 20pt;
margin-top: 10px;
}
/// TOGGLE BUTTON
.toggle-info {
display: block;
width: 100%;
color: #f5f5f5;
padding: 10px 15px;
background-color: #00A88C;
font-size: 30pt;
}
.toggle-info i{
font-size: 10pt;
margin-top: 10px;
float: right;
display: block;
}
.toggle-info:hover {
background-color: #13ebc7;
}
.toggle-info, .toggle-info:hover {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.info-container{
padding: 10px 15px;
border: solid 1px #00A88C;
}