slides carousel with parallex effect the work on scroll

slides carousel with parallex effect the work on scroll - javascript

I am trying to make a carousel that change slides on scroll, every slide contains 4 layers (background, flower , and a shape) what i want is on scroll the carousel change to the next slide but every layers should slides in efferent timing , exactly like this demo
i have create the carousel and its working on scroll, but i don't know how to make efferent layers and animate their slide effect like the link above.
my code:-
<div id="sec-4" class="section">
<div class="carousel">
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
<div class="message">1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt=""> </div>
<div class="message">2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
<div class="message">3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
</div>
</div>
#sec-4{
height: 100vh;
font-size: 3rem;
padding: 0%;
display: flex;
justify-content: center;
align-content: center;
}
#sec-4::before{
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-color: firebrick;
}
.rounded-circle{
border-radius: 50%;
}
.carousel{
background-color: firebrick;
height: 500px;
width: 80%;
}
.message{
width: 50%;
position: relative;
left: 30%;
color: white;
}
.question{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
}
$(document).ready(function(){
$('.carousel').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
arrows: true,
adaptiveHeight: true,
});
var $questionAvatar = $('.question .avatar');
var $questionMessagge = $('.question .message');
var tlQuestions = new TimelineMax({paused: true, delay: 0.4});
TweenMax.set($questionAvatar, {autoAlpha: 0, scale: 0.6})
TweenMax.set($questionMessagge, {autoAlpha: 0, scale: 0.6})
tlQuestions
.set($questionAvatar, {autoAlpha: 0, scale: 0.6})
.set($questionMessagge, {autoAlpha: 0, scale: 0.6})
.to($questionAvatar, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1)})
.to($questionMessagge, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1), transformOrigin: 'bottom bottom'}, '+=0.1')
tlQuestions.play();
$('.carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
// var currentSlide = $(slick.$slides.get(currentSlide));
tlQuestions.play();
});
$('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
tlQuestions.restart();
});
$('.carousel').on('wheel', (function(e) {
e.preventDefault();
clearTimeout(scroll);
scroll = setTimeout(function(){scrollCount=0;}, 200);
if(scrollCount) return 0;
scrollCount=1;
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
}));
});
my pen:-
Codepen

I have tried to use Swiper.js, Slick and all the possible sliders. but the main problem was that there was 4 layers and the top layer was covering the Swiper so it wont work because its covered.
Then I solved this issue by GSAP scroll Trigger which I triggered the layers moments by mouse scrolling without the need to use any carousel plugin.

Related

how to change making same data-link="n" for all div slides content or completely remove data-link="n" option from <div class="gallery-slide"

Here is a JS CSS slider that is working correctly but i need to make a little change to this slider.
that is in my slider i want to remove all data-link="n" option from <div class="gallery-slide" ...> </div> or Make same data-link="n" for all div slides classes
at this time my slider HTML structure is like that
<!--slide 1-->
<div class="gallery-slide" data-link="1">
<div class="slide-content">
<h2>Slide 1 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 2-->
<div class="gallery-slide" data-link="2">
<div class="slide-content">
<h2>Slide 2 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 3-->
<div class="gallery-slide" data-link="3">
<div class="slide-content">
<h2>Slide 3 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 4-->
<div class="gallery-slide" data-link="4">
<div class="slide-content">
<h2>Slide 4 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
But i want to remove all <... data-link="n"> option from my HTML Structure ,
just like many JS CSS slider have this feature :
for ex. https://codepen.io/MrsColombo/pen/jqxVBg?editors=1010 (this slider's all slides have same class but still working fine.)
Like from
<div class="gallery-slide" data-link="1">
.....
</div>
<div class="gallery-slide" data-link="2">
.....
</div>
<div class="gallery-slide" data-link="3">
.....
</div>
<div class="gallery-slide" data-link="4">
.....
</div>
To want change like this
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
<div class="gallery-slide">
.....
</div>
is it possible ?
plz make it solve
my Complete Slider Code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.gallery {
position: relative;
width: 100%;
overflow: hidden;
padding: 2em 0;
}
.gallery-slides {
position: relative;
max-width: 1280px;
width: 100%;
height: 100vh;
margin: 0 auto;
}
.gallery-slide {
position: absolute;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* ease-in-out */
}
.gallery-slide.is-active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-box-ordinal-group: 2;
order: 1;
}
.gallery-slide.is-active~* {
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
}
.gallery-selectors {
width: 5%;
height: 100%;
position: absolute;
top: 0;
right: 2.5%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: end;
align-items: flex-end;
}
.gallery-selector {
border: 1px solid #343434;
border-radius: 50%;
padding: 1.2em 1.5em;
margin-bottom: 0.5em;
text-decoration: none;
color: #343434;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.gallery-selector:hover {
background-color: #343434;
color: #e2e2e2;
}
.gallery-selector.is-active {
background-color: #343434;
color: #e2e2e2;
}
.slide-img {
-webkit-box-flex: 0;
flex: 0 0 50%;
}
.slide-img img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.slide-content {
-webkit-box-flex: 0;
flex: 0 1 50%;
padding-top: 2em;
padding-bottom: 2em;
padding-left: 2em;
padding-right: 10%;
}
.slide-content h2 {
color: #fff;
font-size: 2.2em;
line-height: 1;
margin-top: 0;
}
.slide-content p {
color: #343434;
font-size: 1.2em;
line-height: 1.5em;
}
/* Background mapColor */
.background-teal {
background-color: #54b3a6;
}
.background-red {
background-color: #e72b1e;
}
#media only screen and (max-width: 960px) {
.gallery-slide {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.slide-img {
padding-left: 2em;
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.slide-content {
padding-right: 15%;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
}
#media only screen and (max-width: 640px) {
.gallery-selectors {
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
right: 0;
bottom: 0;
}
.gallery-selector {
padding: 0.5em 0.8em;
margin-right: 0.5em;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="gallery background-teal">
<button data-btn="prev" class="slider-pagination">Pre.❮</button>
<button data-btn="next" class="slider-pagination">Next ❯</button>
<div class="gallery-slides">
<div class="gallery-slide" data-link="1">
<!--slide 1-->
<div class="slide-content">
<h2>Slide 1 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 2-->
<div class="gallery-slide" data-link="2">
<div class="slide-content">
<h2>Slide 2 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 3-->
<div class="gallery-slide" data-link="3">
<div class="slide-content">
<h2>Slide 3 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
<!--slide 4-->
<div class="gallery-slide" data-link="4">
<div class="slide-content">
<h2>Slide 4 Title Here</h2>
<p>Paragrapgh 1: Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras dui nisi,
lesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="gallery-selectors" style="display: none;">
1
2
3
4
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script>
//Javascript Module Pattern
//app.js
var total_slides = $('.gallery-slides .gallery-slide').length;
$(document).on('click', '.slider-pagination', function() {
var btn = $(this).attr('id');
var current_slide = $('.is-active').attr('data-link');
if ($(this).attr('data-btn') == 'next') {
if (current_slide < total_slides) {
var next_slide = parseInt(current_slide) + parseInt(1);
} else {
next_slide = 1;
}
} else {
if (current_slide != 1) {
var next_slide = parseInt(current_slide) - parseInt(1);
} else {
next_slide = total_slides;
}
}
console.log(next_slide);
$('a[data-link="' + next_slide + '"]').trigger('click');
});
var app = function() {
var defaults = [];
return {};
}();
$(function() {
// new app.gallery();
$('.gallery').each(function() {
$(this).data(new app.gallery(this));
});
});
//myModule
app.gallery = function($, _, app) {
var def = function(el, opts) {
this.$els = {
'el': $(el)
};
this.options = _.extend({
link: 'data-link'
}, opts);
this.controller = this.$els.el.find('[' + this.options.link + ']');
// this.$gallery = this.$els.el.find('.gallery-slides');
// this.$slide = this.$els.el.find('.gallery-slide');
this.states = {
'active': 'is-active'
};
init.call(this);
};
var init = function() {
this.bind();
};
def.prototype = {
bind: function() {
console.log('gallery loaded');
var self = this;
this.setActive(1);
this.controller.on('click', _.bind(this.slideNext, this));
},
slideNext: function(ev) {
var i = $(ev.currentTarget).attr(this.options.link);
this.setActive(i);
},
setActive: function(index) {
var self = this;
this.currentActive = index;
this.controller.removeClass(this.states.active).filter(function() {
return $(this).attr(self.options.link) == index;
}).addClass(self.states.active);
}
};
return def;
}
(jQuery, _, app);
</script>
</body>
</html>
Thanks in Advance, Love You stackoverflow community experts.

A background overlay under jQuery UI dialog doesn't cover the images as expected

I'm having a small issue regarding the dark background that is appearing when clicking on the second image with pink background. How can I make it cover the images but not the dialog box?
Because of the customized libary of jQuery UI, I can't use modal: true
How can I make it cover the images but not the dialog box?
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: black;
opacity: 1;
overflow: auto;
z-index: 1;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

If you really to want black out out all the div behind your jQuery dialog box then need to wrap your images in a div and do CSS on that instead of using body here then.
Also, we do not need opacity anymore since all the color will be darker. You can either use CSS::after or CSS::before to do that.
For better practice: (in your case) I have wrapped the images div in this div in new div .modal-body to achieve those results.
Live Working Demo:
$(function() {
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
$("#dialog").dialog({
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
}).dialog("open");
setTimeout(() => {
//window.location.href = $(this).prop("href");
}, 50000);
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: pink;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: pink;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="modal-body">
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
</div>

The web browser prints the HTML content on the page using a tree structure.
So, the body tag is the deeper tag in your page. Because of that, the background black on body can't cover the other elements inside of it.
Just create a div tag between .images and #dialog, called #modal-background for example. Then, when you open or close the modal, shown and hide #modal-background.
The style of can be like that:
#modal-background.modal {
width: 100%;
height: 100%;
opacity: 1;
overflow: auto;
z-index: 1;
background-color: black;
}
```

Use the CSS ::after pseudo-element.
Please remove background-color: black; CSS from .modal. Just add below CSS.
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
The styles and considerations in this technique are pretty much easy, we’ll be styling the :after pseudo-element on the body. You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position.
Updated Snippet :-
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
opacity: 1;
overflow: auto;
z-index: 1;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

Grid items disappearing on smaller screen sizes [duplicate]

This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
I am a very new developer attempting to make a presentable photo-gallery-esque type thing to practice a bit. I have been leaning on CSS grid heavily for my layout...and I am pretty proud of what I have thus far.
I have four cards each containing an image thumbnail, a header, and some text. When the user hovers over any card they have the option to "view" the image which brings up a full screen modal. Everything works as I have intended...however...when I decrease the screen size some cards end up disappearing off screen!
I am very new to CSS grid and I have tried just about everything I know at this point. Please help me cross the finish line!
The code below works perfectly if just copy-pasted into the html portion on codepen.io.
Thank you in advance for any help you may offer!
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
const card = event.currentTarget.closest('.card');
const chosenImage = card.querySelector('img').src;
image.src = chosenImage;
modal.classList.add('open');
}
document.addEventListener('click', function(event) {
const target = event.target;
const isModal = target.classList[0] === 'modal';
if (isModal) {
modal.classList.remove('open');
}
});
body {
margin: 0;
height: 100vh;
display: grid;
align-content: center;
background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}
.wrapper {
display: grid;
grid-gap: 40px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
grid-template-rows: 450px;
grid-auto-rows: 450px;
}
.card {
border: solid 5px #ac3434;
border-radius: 0.8rem;
overflow: hidden;
background: #3a363670;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.img-wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
display: grid;
}
.img-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
border: solid 3px #ac3434;
border-radius: 50%;
}
.card-body {
grid-column: 1 / -1;
grid-row: 5 / -1;
padding: 0 10px 0;
font-family: 'Ubuntu', sans-serif;
}
.card-body h2 {
font-family: 'Anton', sans-serif;
}
.card-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
background: #ac34347a;
display: grid;
place-items: center center;
transform: translateY(100%);
transition: 0.4s;
}
.card:hover .card-overlay {
transform: translateY(0%);
}
.card-overlay button {
background: none;
color: white;
text-transform: uppercase;
position: relative;
bottom: 78px;
border: solid 3px white;
border-radius: 0.4rem;
font-family: 'Ubuntu', sans-serif;
}
.modal {
height: 100vh;
width: 100vw;
position: fixed;
background: #0000008f;
display: grid;
place-items: center center;
/* Make modal invisible until triggered */
opacity: 0;
/* Makes it so the modal does not log click
events */
pointer-events: none;
}
.open {
/* Displays the modal */
opacity: 1;
pointer-events: all;
}
.modal-inner {
width: 500px;
}
.modal-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="wrapper">
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sunny Walls</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Kit-the-Kat</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sass in the City</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>City Things</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-inner">
<img>
</div>
</div>

You need to use media tags in the css.
Your site is not responsive and when you change screen size it does not resize the components.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Uncaught DOMException: Not able to run codepen code on my html page

I tried to implement animation pop up modal from this link .
I carefully copied all the code inside my bootstrap template. Now when i tried to run it, it only shows a button which doesn't work at all. Then i check developer option in chrome i get to see this error
`Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at createModal (file:///C:/Users/file:///C:/Users/xyz/Desktop /js/popvideo.js:75:8)
at file:///C:/Users/xyz/Desktop/js/popvideo.js:4:13`
and at popvideo.js line number 75 has this code ` body.removeChild(container);
I don't understand when i am getting this error when the pen works fine.
Here is the compete code
<section class="hero-area">
<div id="homelink"> </div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h1 class="wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s" >Lorem ipsum dolor sit amet.</h1>
<p class="wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
<ul class="list-inline wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".7s">
<li>
<a data-scroll href="#contact" class="btn btn-main">Register</a>
</li>
</ul>
</div>
<div style="margin-top:100px; height:506px; width:332px; float: right; background:url(images/Elaxer-Screen.png)">
<section class="controls">
<button id="open-button">Open</button>
</section>
<section id="modal-1" class="modal-container">
<div class="modal-dialog">
<svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="modal-polygon" />
</svg>
<div class="modal-content">
<h2>I'm a modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
`
JS - popvideo.js
console.clear();
var body = document.body;
var modal = createModal(document.querySelector("#modal-1"));
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", function() {
modal.open();
});
function createModal(container) {
var content = container.querySelector(".modal-content");
var dialog = container.querySelector(".modal-dialog");
var polygon = container.querySelector(".modal-polygon");
var svg = container.querySelector(".modal-svg");
var point1 = createPoint(45, 45);
var point2 = createPoint(55, 45);
var point3 = createPoint(55, 55);
var point4 = createPoint(45, 55);
var animation = new TimelineMax({
onReverseComplete: onReverseComplete,
onStart: onStart,
paused: true
})
.to(point1, 0.3, {
x: 15,
y: 30,
ease: Power4.easeIn
}, 0)
.to(point4, 0.3, {
x: 5,
y: 80,
ease: Power2.easeIn
}, "-=0.1")
.to(point1, 0.3, {
x: 0,
y: 0,
ease: Power3.easeIn
})
.to(point2, 0.3, {
x: 100,
y: 0,
ease: Power2.easeIn
}, "-=0.2")
.to(point3, 0.3, {
x: 100,
y: 100,
ease: Power2.easeIn
})
.to(point4, 0.3, {
x: 0,
y: 100,
ease: Power2.easeIn
}, "-=0.1")
.to(container, 1, {
autoAlpha: 1
}, 0)
.to(content, 1, {
autoAlpha: 1
})
var modal = {
animation: animation,
container: container,
content: content,
dialog: dialog,
isOpen: false,
open: open,
close: close
};
body.removeChild(container);
function onClick() {
if (modal.isOpen) {
close();
}
}
function onStart() {
body.appendChild(container);
container.addEventListener("click", onClick);
}
function onReverseComplete() {
container.removeEventListener("click", onClick);
body.removeChild(container);
}
function open() {
modal.isOpen = true;
animation.play().timeScale(2);
}
function close() {
modal.isOpen = false;
animation.reverse().timeScale(2.5);
}
function createPoint(x, y) {
var point = polygon.points.appendItem(svg.createSVGPoint());
point.x = x || 0;
point.y = y || 0;
return point;
}
return modal;
}
CSS
/*Pop Up Video*/
.buttonpop {
cursor: pointer;
padding: 0 6px;
min-width: 88px;
min-height: 36px;
}
.controls {
padding: 24px;
}
.modal-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
overflow: hidden;
background: rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
}
.modal-dialog {
width: 70vmin;
height: 70vmin;
position: relative;
overflow: hidden;
}
.modal-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-polygon {
fill: #ab47bc;
}
.modal-content {
position: relative;
top: 0;
left: 0;
padding: 24px;
visibility: hidden;
opacity: 0;
color: rgba(255, 255, 255, 0.87);
}
Please guide me to resolve this issue. P.S- I am not good in JS

The problem is that your #modal-1 element isn't the child of the body container as it is the case with the codepen you got the code from. It's a child of the unnamed div with the background:url(images/Elaxer-Screen.png),which is why it gives you the error. What you can simply do is add a parent container and reference it in your js file.
Here is how I did it:
Step 1: Edit your HTML file by adding parentContainer id.
<div id="parentContainer" style="margin-top:100px; height:506px; width:332px; float: right; background:url(images/Elaxer-Screen.png)">
<section class="controls">
<button id="open-button">Open</button>
</section>
<section id="modal-1" class="modal-container">
<div class="modal-dialog">
<svg class="modal-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon class="modal-polygon" />
</svg>
<div class="modal-content">
<h2>I'm a modal</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?</p>
</div>
</div>
</section>
</div>
Step 2: Initialize parent container as a variable.
var parentCont = document.querySelector("#parentContainer");
Step 3: Remove the body variable on line 76 and use the parent container variable.
parentCont.removeChild(container);
Here is a reference to my codepen: my codepen
Works fine. Good luck and hope this helps!

How to make actual dots on a slick slideshow?

How do I make actual dots on the slideshow as I currently just get buttons with numbers on them. I have no idea how to do this, or where to put it. Can anyone help? The code on my site is exactly what I was told to do on a site, but it doesn't work. This is a brand new site that has not yet been published anywhere.
#slideshow .slick-slide { min-height: 1180px;
}
#slideshow .slick-dots {
transform: translateY(-50);
position: relative;
z-index: 10;
bottom: 50px;
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
li {
margin: 0 0.25rem;
}
button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: blue;
text-indent: -9999px;
}
li.slick-active button {
background-color: red;
}
}
<div id="slideshow">
<div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 1</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
<div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 2</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.header ').stickyNavbar();
$('#slideshow').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
autoplay:true,
autoplayspeed: 2000,
});
})
</script>

you need to add:
slick.css
slick-theme.css

Develop Reference

JavaScript is the programming language of the Web.

slides carousel with parallex effect the work on scroll - javascript

Related

how to change making same data-link="n" for all div slides content or completely remove data-link="n" option from <div class="gallery-slide"

A background overlay under jQuery UI dialog doesn't cover the images as expected

Grid items disappearing on smaller screen sizes [duplicate]

Uncaught DOMException: Not able to run codepen code on my html page

How to make actual dots on a slick slideshow?

Categories

Resources